bem / bem/next-global-css

require() of ES modules is not supported.

Open
#17 0 comments 2 reactions 1 assignee Claimed by @yarastqt View on GitHub
Dominant language
JavaScript
Stars
91
Forks
6
PR merge metrics
No merged PRs in 30d

Description

```
error - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/work/mademine/node_modules/lodash-es/lodash.js
require() of ES modules is not supported.
require() of /Users/work/mademine/node_modules/lodash-es/lodash.js from /Users/work/mademine/.next/server/pages/_app.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename lodash.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/work/mademine/node_modules/lodash-es/package.json.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/work/mademine/node_modules/lodash-es/lodash.js
require() of ES modules is not supported.
require() of /Users/work/mademine/node_modules/lodash-es/lodash.js from/Users/work/mademine/.next/server/pages/_app.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename lodash.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/work/mademine/node_modules/lodash-es/package.json.

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at Object.apply (webpack-internal:///./node_modules/next-global-css/lib/patch-global-require.js:10:20)
at Object.apply (webpack-internal:///./node_modules/next-global-css/lib/patch-global-require.js:10:20)
at Object.apply (webpack-internal:///./node_modules/next-global-css/lib/patch-global-require.js:10:20)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.lodash-es (/Users/work/mademine/.next/server/pages/_app.js:3099:18)
at __webpack_require__ (/Users/work/mademine/.next/server/webpack-runtime.js:33:42) {
code: 'ERR_REQUIRE_ESM'
}
```

package.json

```
"next-global-css": "1.3.1",
"next": "12.1.6",
"lodash-es": "^4.17.21",
"webpack-node-externals": "^3.0.0"
```

I'm trying to use next-global-css to solve the problem of node_module css in next, but I got what the error is. Do you know why?Looking forward to your reply, my code is as follows:

```const withPlugins = require('next-compose-plugins')

const { patchWebpackConfig } = require('next-global-css')
const webpackNodeExternals = require('webpack-node-externals')

const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})

/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config, options) => {
patchWebpackConfig(config, options)

if (options.isServer) {
config.externals = webpackNodeExternals({
// Uses list to add this modules for server bundle and process.
allowlist: [/sunzi-designer/],
})
}

config.module.rules.push({
test: /\.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
svgo: true,
svgoConfig: {
plugins: [
{
name: 'removeViewBox',
active: false,
},
'removeDimensions',
],
},
},
},
],
})

return config
},
}

module.exports = withPlugins([[withBundleAnalyzer]], nextConfig)
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.