fix(@size-limit/webpack-css v10.0.1 ): require is not defined in ES module scope when running size-limit

[mendrew]

Good day! Thank you very much for this amazing tool!

Problem

In our project we are using size-limit with @size-limit/webpack-css plugin and with latest version v10.0.1 we are having an issue and see this error running size-limit.

ReferenceError: require is not defined in ES module scope, you can use import instead\nThis file is being treated as an ES module because it has a '.js' file extension

The whole error

{
  "error": "ReferenceError: require is not defined in ES module scope, you can use import instead\nThis file is being treated as an ES module because it has a '.js' file extension and '/Users/andrey.medvedev/src/experiment
/size-limit-experiment/node_modules/@size-limit/webpack-css/package.json' contains \"type\": \"module\". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.\n    at file:///Users/andrey.medvedev/s
rc/experiment/size-limit-experiment/node_modules/@size-limit/webpack-css/index.js:6:9\n    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)\n    at async Promise.all (index 0)\n    at async ESMLoader.import (
node:internal/modules/esm/loader:528:24)\n    at async Promise.all (index 2)\n    at async loadPlugins (file:///Users/andrey.medvedev/src/experiment/size-limit-experiment/node_modules/size-limit/load-plugins.js:24:14)\n
 at async findPlugins (file:///Users/andrey.medvedev/src/experiment/size-limit-experiment/node_modules/size-limit/run.js:28:17)\n    at async default (file:///Users/andrey.medvedev/src/experiment/size-limit-experiment/node_modules/size-limit/run.js:57:19)"
}

Version

size-limit: v10.0.1
node: v18.8.0.

To reproduce

Here is a repo example with reproduction: https://github.com/mendrew/stunning-journey

Proposal

As a solution we use createRequire to require commonjs from esm module like we do here in size-limit in other modules. Works well in my case. Hope it close to a solution.

Changes

• use createRequire inside webpack-css plugin
• adding webpack-css plugin as a workspace to global workspace package.json.
• checking that load-plugins() is not throwing an error when we load webpack-css (https://github.com/mendrew/size-limit/blob/f9e9a78c3f62be7061bfd25efa7e546f02de549c/packages/size-limit/test/load-plugins.test.js#L8-L16)

Notes

Unfortunately I was not able to reproduce this issue in tests. Any ideas where I can put a test which would be similar to the example with reproduction?
load-plugins.test.js doesn't catch this issue.

[ai]

Thanks. I will try to release it today.

[ai]

Released in 10.0.2

[mendrew]

Great, thank you very much Andrey!