cssnode.jsbundle

Rollup.js is trying to access "*.css?inline"


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


Solution

  • 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(),
    ]
    ...