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

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}/`));
}

[mummybot]

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

1. Including style-inject in the library’s dependencies
2. 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?

[dandrewgarvin]

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',
            );
          });
        },
      }
  ]
}