Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

[alex-shul]

🐛 Bug Report

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: \node_modules@babel\runtime\helpers\esm\objectWithoutPropertiesLoose.js
require() of ES modules is not supported.
require() of \node_modules@babel\runtime\helpers\esm\objectWithoutPropertiesLoose.js from \node_modules\react-spring\renderprops.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 objectWithoutPropertiesLoose.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from \node_modules@babel\run
time\helpers\esm\package.json.

at Module._extensions..js (internal/modules/cjs/loader.js:1174:13)
at Object.newLoader [as .js] \node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (\node_modules\react-spring\renderprops.js:7:53)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Module._compile (\node_modules\pirates\lib\index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)

To Reproduce

Steps to reproduce the behavior:

Expected behavior

not throwing an error

Link to repro (highly encouraged)

(Please provide either a CodeSandbox demo or an example GitHub repo.)

Environment

• nodejs v12.16.1
• react-spring ^8.0.27
• react ^16.13.1

[aleclarson]

See #601

[kaanozcan]

@aleclarson So how to fix this on v8? 601 seems to be for v9. I'm on nodejs v14.10.0.

this is my loader setup nodejs:

{
          test: /\.(js|jsx)$/,
          loader: "babel-loader",
          include: [
            path.join(__dirname, "/src"),
            path.join(__dirname, "/lib")
          ],
      }

[kaanozcan]

@aleclarson

When I am using react-spring/renderprops-addons I get

internal/modules/cjs/loader.js:1093
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/x/node_modules/@babel/runtime/helpers/esm/extends.js
require() of ES modules is not supported.
require() of /home/x/node_modules/@babel/runtime/helpers/esm/extends.js from /home/x/node_modules/react-spring/renderprops-addons.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 extends.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/x/node_modules/@babel/runtime/helpers/esm/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1093:13)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/x/node_modules/react-spring/renderprops-addons.js:7:32)
    at Module._compile (internal/modules/cjs/loader.js:1076:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14) {
  code: 'ERR_REQUIRE_ESM'
}

and when I switch to cjs I start getting

internal/modules/cjs/loader.js:1093
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/x/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
require() of ES modules is not supported.
require() of /home/x/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js from /home/x/node_modules/react-spring/renderprops.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 objectWithoutPropertiesLoose.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/x/node_modules/@babel/runtime/helpers/esm/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1093:13)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/x/node_modules/react-spring/renderprops.js:7:53)
    at Module._compile (internal/modules/cjs/loader.js:1076:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14) {
  code: 'ERR_REQUIRE_ESM'
}