Skip to content

Commit

Permalink
Fix ESM issue with webpack-css plugin (#340)
Browse files Browse the repository at this point in the history
When we are using `size-limit` with` @size-limit/webpack-css` plugin `v10.0.1` we are having an issue and see this error running `size-limit` during plugin loading
```
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '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
```

As a solution we use createRequire to require commonjs from esm module.

---

Also,
- 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)
  • Loading branch information
mendrew committed Nov 1, 2023
1 parent f9e9a78 commit 7caea08
Show file tree
Hide file tree
Showing 5 changed files with 10 additions and 1 deletion.
1 change: 1 addition & 0 deletions fixtures/zero-esbuild/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"devDependencies": {
"@size-limit/esbuild": ">= 0.0.0",
"@size-limit/file": ">= 0.0.0",
"@size-limit/webpack-css": ">= 10.0.1",
"size-limit": ">= 0.0.0"
},
"size-limit": [
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@size-limit/preset-small-lib": "workspace:^",
"@size-limit/time": "workspace:^",
"@size-limit/webpack": "workspace:^",
"@size-limit/webpack-css": "workspace:^",
"@size-limit/webpack-why": "workspace:^",
"@vitest/coverage-v8": "^0.34.6",
"clean-publish": "^4.2.0",
Expand Down
3 changes: 2 additions & 1 deletion packages/size-limit/test/load-plugins.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ describe(`load-plugins`, () => {
let cwd = join(__dirname, '..', '..', '..', 'fixtures', 'zero-esbuild')
let result = await loadPlugins(await readPkgUp(cwd))
expect(result.isEmpty).toBe(false)
expect(result.list.length).toBe(2)
expect(result.list.length).toBe(3)
expect(result.has('esbuild')).toBe(true)
expect(result.has('file')).toBe(true)
expect(result.has('webpack-css')).toBe(true)
expect(result.has('plugin')).toBe(false)
})

Expand Down
3 changes: 3 additions & 0 deletions packages/webpack-css/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
import { createRequire } from 'node:module';

const require = createRequire(import.meta.url);

const cssRule = {
exclude: /\.module\.css$/,
Expand Down
3 changes: 3 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 7caea08

Please sign in to comment.