Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

require() of ES modules is not supported. #17

Open
lynn1286 opened this issue Jul 2, 2022 · 0 comments
Open

require() of ES modules is not supported. #17

lynn1286 opened this issue Jul 2, 2022 · 0 comments
Assignees

Comments

@lynn1286
Copy link

lynn1286 commented Jul 2, 2022

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 { 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)
@yarastqt yarastqt self-assigned this Jul 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants