Handle error: [ERR_REQUIRE_ESM]: Must use import to load ES Module

 Error:

When i import a third lib to my Vue SSR project, ( such as: @ol/map.js), there is a ERR_REQUIRE_ESM error。

[1] 2022-01-12 09:04:06:46 error: error during render : /index

[1] 2022-01-12 09:04:06:46 error: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\workspace\xxx\xxxxxx-base\node_modules\ol\Map.js

[1] require() of ES modules is not supported.

[1] require() of D:\workspace\xxxx\xxxxxx-base\node_modules\ol\Map.js from D:\workspace\xxxx\xxxxxx-base\node_modules\vue-server-renderer\build.dev.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.

[1] Instead rename Map.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from D:\workspace\xxxx\xxxxxx-base\node_modules\ol\package.json.

[1]

[1]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)

[1]     at Module.load (internal/modules/cjs/loader.js:937:32)

[1]     at Function.Module._load (internal/modules/cjs/loader.js:778:12)

[1]     at Module.require (internal/modules/cjs/loader.js:961:19)

[1]     at require (internal/modules/cjs/helpers.js:92:18)

[1]     at r (D:\workspace\xxxx\xxxxxx-base\node_modules\vue-server-renderer\build.dev.js:9343:16)

[1]     at Object.ol/Map (webpack:/external "ol/Map":1:0)

[1]     at __webpack_require__ (webpack/bootstrap:25:0)

[1]     at Module../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/pages/map/index.vue?vue&type=script&lang=js& (5.server-bundle.js:1629:64)

[1]     at __webpack_require__ (webpack/bootstrap:25:0)

[1]     at Module../src/pages/map/index.vue?vue&type=script&lang=js& (src/pages/map/index.vue?2615:1:0)

[1]     at __webpack_require__ (webpack/bootstrap:25:0)

[1]     at Module../src/pages/map/index.vue (src/pages/map/index.vue:1:0)

[1]     at __webpack_require__ (webpack/bootstrap:25:0)

[1]     at processTicksAndRejections (internal/process/task_queues.js:95:5)

Analyze:

import statements are permitted only in ES modules.  you can't make Node.js treat your file as an ES module with do nothing.

Solution:

Install webpack-node-externals in webpack config to sort of bypass this issue

const nodeExternals = require('webpack-node-externals');

// add these to the webpack config.
    externals: [
          nodeExternals({
            whitelist: [/^@babel\/runtime/, /\.css$/, /ol/],
          }),
     ],

ref: 

1. https://stackoverflow.com/questions/57169793/error-err-require-esm-how-to-use-es6-modules-in-node-12

2. https://stackoverflow.com/questions/61670459/importing-in-node-js-error-must-use-import-to-load-es-module

3. https://flutterq.com/error-err_require_esm-must-use-import-to-load-es-module-nodejs/

4. https://github.com/webpack/webpack/issues/11696