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)"
}
```
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.
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.
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 versionv10.0.1
we are having an issue and see this error runningsize-limit
.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 insize-limit
in other modules. Works well in my case. Hope it close to a solution.Changes
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.