I apologize if this is a dumb question as I am not a web developer.
I am trying to use rollup.js to bundle a web components pack to use inside WebIQ. When building with
rollup -c --bundleConfigAsCjs
I get the following error
./src/index.ts → dist_rollup/lib-OB-ian.js...
[!] Error: Could not load C:\Users\...\file.css?inline (imported by file.ts): ENOENT: no such file or directory, open 'C:\Users\file.css?inline'
at open (node:internal/fs/promises:636:25)
at Object.readFile (node:internal/fs/promises:1246:14)
at C:\Users\PORT_IM_3\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:20102:24
at Queue.work (C:\Users\PORT_IM_3\AppData\Roaming\npm\node_modules\rollup\dist\shared\rollup.js:20468:32)
I believe that rollup is trying to acess a file that is ".css?inline" instead of ".css" but I am not sure. Is there any way to fix this?
My rollup.config.cjs looks like this:
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import json from "@rollup/plugin-json";
import css from "rollup-plugin-import-css";
import postcss from 'rollup-plugin-postcss';
export default [
{
input: './src/index.ts',
output: [
{
file: 'dist_rollup/lib-OB-ian.js',
format: 'cjs'
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" }), json(), css(),
postcss({extensions: ['.css'],})
],
}
]
Try: rollup -c --bundleConfigAsCjs
Expected: a file bundle.js with the code
This plugin should fix it. Another build tool probably needs the ?inline
but that will break imports in rollup because they are non-standard.
function removeQueryParams() {
return {
name: 'remove-query-params',
resolveId(source) {
// Remove query parameter-like strings from the end of the import path
const cleanSource = source.replace(/\?.*$/, '');
return cleanSource;
}
};
}
...
plugins: [
removeQueryParams(),
]
...