ESM library generated with rollup-plugin-postcss throws Cannot find module '../node_modules/style-inject/dist/style-inject.es.js' #381

mummybot · 2021-06-16T08:37:49Z

Apologies if this is more of a usage question than a bug, I have posted here at Stackoverflow.

We are maintaining an internal library which is exporting ESM modules using Rollup. We have just recently switched to using CSS modules, which we have set with rollup-plugin-postcss. We want to inject these styles into the head rather than have an external file.

Our built bundle generates the ESM file with:

import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';

Our consuming library then fails with

 Uncaught Error: Cannot find module '../node_modules/style-inject/dist/style-inject.es.js'

I would expect the ESM export to import styleInject from 'style-inject' and style-inject to be included in the package-lock.json as a dependency. Even manually adding the dependency as part of our library which then includes it in the consuming app doesn't allow it to resolve. What is the correct way of using CSS Modules and injecting into the head for the consumer of a library?

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss';
import pkg from './package.json';
import fg from 'fast-glob';
import path from 'path';

export default [
  {
    input: 'src/index.js',
    external: external(),
    output: [
      {
        name: '@my/packageName',
        file: pkg.module,
        format: 'es',
        sourcemap: true,
      },
    ],
    plugins: [
      {
        name: 'watch-external',
        async buildStart() {
          const files = await fg(['src/index.d.ts', 'playground/**/*']);
          for (let file of files) {
            this.addWatchFile(path.resolve(file));
          }
        },
      },
      json(),
      postcss({
        modules: true,
      }),
      babel({
        exclude: /node_modules/,
        babelHelpers: 'runtime',
        babelrc: false,
        presets: [
          [
            '@babel/preset-env',
            {
              modules: false,
              useBuiltIns: 'entry',
              corejs: 3,
              targets: {
                ie: 11,
              },
            },
          ],
          '@babel/preset-react',
        ],
        plugins: [
          '@babel/plugin-transform-runtime',
          '@babel/plugin-proposal-class-properties',
          '@babel/plugin-proposal-export-namespace-from',
        ],
      }),
      commonjs(),
    ],
  },
];

function external() {
  const { dependencies = {}, peerDependencies = {} } = pkg;

  const externals = [
    ...Object.keys(dependencies),
    ...Object.keys(peerDependencies),
  ];

  return id =>
    // match 'lodash' and 'lodash/fp/isEqual' for example
    externals.some(dep => id === dep || id.startsWith(`${dep}/`));
}

The text was updated successfully, but these errors were encountered:

mummybot · 2021-06-16T13:00:50Z

I've fixed this for our project by doing two things:

Including style-inject in the library's dependencies
String replacing the built .esm file: '../node_modules/style-inject/dist/style-inject.es.js' to 'style-inject'.

It works, but this seems like a hack for what should just work out of the box. Is there a reason for the relative import path to style-inject? If so, can we make it configurable?

mummybot · 2021-07-13T12:10:11Z

I'll raise a PR shortly

dandrewgarvin · 2021-07-15T15:05:56Z

We are experiencing this issue as well, and have probably a very similar solution to @mummybot. For anybody else that encounters this problem while it remains unsolved in this plugin, here was the custom inline-plugin we built:

// rollup.config.js
export default {
  // other rollup configurations...

  plugins: [
    // other rollup plugins...

    postcss(),

    {
        name: 'Custom Rollup Plugin`',

        generateBundle: (options, bundle) => {
          Object.entries(bundle).forEach(entry => {

            // early return if the file we're currently looking at doesn't need to be acted upon by this plugin
            if (!entry[0].match(/.*(.scss.js)$/)) {
              return;
            }

            // this line only runs for .scss.js files, which were generated by the postcss plugin.
            // depending on the use-case, the relative path to style-inject might need to change
            bundle[entry[0]].code = entry[1].code.replace(
              '../../node_modules/style-inject/dist/style-inject.es.js',
              'style-inject',
            );
          });
        },
      }
  ]
}

mrcrazylee · 2021-07-17T22:17:42Z

Looks like somebody already created a PR in May, but some tests are failing.
https://github.com/egoist/rollup-plugin-postcss/pull/375/files

…ort for ESM libraries

mummybot · 2021-08-24T19:39:41Z

Let's see if this gets reviewed and merged 🙏

MrJadaml · 2021-09-20T21:40:26Z

We are also running into this issue. Would love to see this get merged in!

Update: actually don't care if this gets merged in as we have found that style-inject has a flaw in that it will inject style tags in reverse order causing css priority issues. egoist/style-inject#23. The lib has also not been touched in 4 years, so don't expect any fixes to go in. Rollup should move away from depending on this lib.

egorgrushin · 2022-08-04T09:31:25Z

This is not a bug at all. It works properly because stylesInject is just a function from 'styles-inject' package, so we can allow it to be bundled. But it is not bundled because most likely you have this setting in your rollup.config.js:

external: [
    /node_modules/
]

So, replace it with a code bellow and it will work:

external: (id) => {
    if (/style-inject/.test(id)) return false;
    if (/node_modules/.test(id)) return true;
    return false;
},

also, you can write a regexp for it instead

renatorroliveira · 2023-01-14T04:24:24Z

The above answer is incorrect since it's assuming you do want to bundle everything together.

When you are generating a library with preserved modules, the nasty node_modules folder for the relative import to work is not packed up by NPM. The configuration is definitely required, regardless of rollup keep using styleInject or not. When generating this kinda library you don't want relative imports and usually will prefer using peer dependencies instead (of some other way to bundle the dependency once for the final bundle).

renatorroliveira · 2023-01-14T04:29:13Z

If you do want to abide for the way rollup decided to implement this, you can "force" NPM to pack the nested modules by adding the folder explicitly on your package.json:

    "files": [
        "dist/*",
        "dist/node_modules/*"
    ],

WahidN · 2023-03-30T10:07:08Z

Has this been resolved? I got this issue too

icy0307 · 2023-06-19T05:24:02Z

As a dependency , style-injectshould not be bundles with library. This pr also would reduce final bundle css, when using multiple libraries transformed with rollup-plugin-postcss
@egoist Could you accept this pr?

ofqwx · 2023-08-17T10:18:45Z

Is there any update on this? I'm running the same issue

U-4-E-A · 2023-10-09T23:44:13Z

Any update here? I have the same issue. Thanks,

SunHuawei · 2023-11-08T04:31:48Z

We are experiencing this issue as well, and have probably a very similar solution to @mummybot. For anybody else that encounters this problem while it remains unsolved in this plugin, here was the custom inline-plugin we built:

// rollup.config.js
export default {
  // other rollup configurations...

  plugins: [
    // other rollup plugins...

    postcss(),

    {
        name: 'Custom Rollup Plugin`',

        generateBundle: (options, bundle) => {
          Object.entries(bundle).forEach(entry => {

            // early return if the file we're currently looking at doesn't need to be acted upon by this plugin
            if (!entry[0].match(/.*(.scss.js)$/)) {
              return;
            }

            // this line only runs for .scss.js files, which were generated by the postcss plugin.
            // depending on the use-case, the relative path to style-inject might need to change
            bundle[entry[0]].code = entry[1].code.replace(
              '../../node_modules/style-inject/dist/style-inject.es.js',
              'style-inject',
            );
          });
        },
      }
  ]
}

This helped me out, thanks to @dandrewgarvin !
Just trying to make it more generic by changing the search value to a regex

        postcss(),
        { 
            name: 'Replace style-inject Rollup Plugin`', // it has to be after `postcss()`
            generateBundle: (options, bundle) => {
                Object.entries(bundle).forEach(entry => {
                    // early return if the file we're currently looking at doesn't need to be acted upon by this plugin
                    if (!entry[0].match(/.*(.scss.js)$/)) {
                        return;
                    }

                    // this line only runs for .scss.js files, which were generated by the postcss plugin.
                    bundle[entry[0]].code = entry[1].code.replace(
                        /[./]*\.\/node_modules\/style-inject\/dist\/style-inject.es.js/,
                        'style-inject',
                    );
                });
            },
        },

marselbairam · 2024-01-27T15:10:04Z

Try this lib: https://www.npmjs.com/package/rollup-plugin-replace-style-inject

mummybot added a commit to mummybot/rollup-plugin-postcss that referenced this issue Aug 24, 2021

egoist#381: Added options styleInjectRelativePath to allow module imp…

d6bebba

…ort for ESM libraries

mummybot linked a pull request Aug 24, 2021 that will close this issue

#381: Added options styleInjectRelativePath to allow module import for ESM libraries #395

Open

YossiSaadi mentioned this issue Dec 20, 2023

fix(build): include style-inject as dependency, downgrade @semantic-release packages as it required node >=18.17 mondaycom/storybook-addon-playground#14

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ESM library generated with rollup-plugin-postcss throws Cannot find module '../node_modules/style-inject/dist/style-inject.es.js' #381

ESM library generated with rollup-plugin-postcss throws Cannot find module '../node_modules/style-inject/dist/style-inject.es.js' #381

mummybot commented Jun 16, 2021

mummybot commented Jun 16, 2021 •

edited

Loading

mummybot commented Jul 13, 2021

dandrewgarvin commented Jul 15, 2021 •

edited

Loading

mrcrazylee commented Jul 17, 2021 •

edited

Loading

mummybot commented Aug 24, 2021

MrJadaml commented Sep 20, 2021 •

edited

Loading

egorgrushin commented Aug 4, 2022 •

edited

Loading

renatorroliveira commented Jan 14, 2023

renatorroliveira commented Jan 14, 2023

WahidN commented Mar 30, 2023

icy0307 commented Jun 19, 2023

ofqwx commented Aug 17, 2023

U-4-E-A commented Oct 9, 2023

SunHuawei commented Nov 8, 2023

marselbairam commented Jan 27, 2024 •

edited

Loading

ESM library generated with rollup-plugin-postcss throws Cannot find module '../node_modules/style-inject/dist/style-inject.es.js' #381

ESM library generated with rollup-plugin-postcss throws Cannot find module '../node_modules/style-inject/dist/style-inject.es.js' #381

Comments

mummybot commented Jun 16, 2021

mummybot commented Jun 16, 2021 • edited Loading

mummybot commented Jul 13, 2021

dandrewgarvin commented Jul 15, 2021 • edited Loading

mrcrazylee commented Jul 17, 2021 • edited Loading

mummybot commented Aug 24, 2021

MrJadaml commented Sep 20, 2021 • edited Loading

egorgrushin commented Aug 4, 2022 • edited Loading

renatorroliveira commented Jan 14, 2023

renatorroliveira commented Jan 14, 2023

WahidN commented Mar 30, 2023

icy0307 commented Jun 19, 2023

ofqwx commented Aug 17, 2023

U-4-E-A commented Oct 9, 2023

SunHuawei commented Nov 8, 2023

marselbairam commented Jan 27, 2024 • edited Loading

mummybot commented Jun 16, 2021 •

edited

Loading

dandrewgarvin commented Jul 15, 2021 •

edited

Loading

mrcrazylee commented Jul 17, 2021 •

edited

Loading

MrJadaml commented Sep 20, 2021 •

edited

Loading

egorgrushin commented Aug 4, 2022 •

edited

Loading

marselbairam commented Jan 27, 2024 •

edited

Loading