Error: "Cannot use import statement outside a module" when upgrading to 2.0

[DavidChouinard]

Description

In a Next.js project, we have the following minimal component:

import ReactSlider from "react-slider"

export const SliderSelection = () => {
   return <ReactSlider />
}

On v1.3.1 this works correctly. However on v2.0 it causes an error (pasted below).

Additional details:

• This is in a Next.js project
• Node.js 18
• package.json does not specify "type": "module" (doing so would break other parts of the project)

Might this have to do with the upgrade of create-react-styleguide?

The error

(node:11539) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
/Users/username/projects/candor.co/node_modules/react-slider/dist/es/prod/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js:1
import t from"./setPrototypeOf.js";function o(o,e){o.prototype=Object.create(e.prototype),o.prototype.constructor=o,t(o,e)}export{o as default};
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Module._load (node:internal/modules/cjs/loader:827:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)

CodeSandbox

Happy to provide a minimally reproducible example if needed.

[kris-ellery]

@DavidChouinard which version of Next.js, and its bundler, do you use? Some bundlers do not recognize the exports key in package.json and follow the main or module. Are you able to provide a minimal reproduction example? I created a CodeSandbox with Next.js 12, React 18, React Slider 2, and I didn't get any issues. See here: https://codesandbox.io/s/next-js-with-react-slider-09p8gu

[kris-ellery]

You could also try setting experimental: { esmExternals: false } in next.config.js.

[DavidChouinard]

That seemed to work, thank you! (we're using webpack 5)

[cs-ashiqu]

Hey @kris-ellery , I am also getting the same error. I am using Next 12.1.0 , React 17.0.2 and React slider latest.

experimental: { esmExternals: false } Is this a proper fix for the issue? Or any other fixes?

[kris-ellery]

@cs-ashiqu I'm not sure if there are any other workarounds. My CodeSandbox example uses Next 12, React 18, and ReactSlider v2 w/out any issues. I tried it with and w/out babel config. I'm not exactly sure what causes these issues in your projects. Maybe it's the targeted browsers list? ReactSlider v2 dropped IE11 support and updated supported browsers.

[timichal]

@kris-ellery I've encountered the same issue and looked into the sandbox example - the problem is that, according to yarn.lock, the version of Next.js that's actually being run in the example is 9.5.5. If you reinstall the packages (I did it just by forking the example), the error appears as described.

[kris-ellery]

@timichal thanks for that! I was able to reproduce and I'm going to investigate further why Next.js is not working here.

[afvr94]

Hey @kris-ellery, I’m having the same problem. We are using nextjs 12.1.4 and react 18.1.0. Let me know if you need anything else that will help you investigate the problem. Thank you!

[kris-ellery]

experimental: { esmExternals: false } is the easiest fix, but it could affect your application bundle, which is not ideal.

I did preliminary testing/debugging and for some reason Next.js does not recognize exports key in package.json, it defaults to production build of react-slider. What confuses me most is that each ./dist format (es/dev, es/prod, etc) have their own package.json with "type": "module" and that should satisfy Next.js ESM requirements.

I need to either tweak create-react-styleguide build settings OR add some sort of config to Next.js The interesting part is that none of these errors show up in Vite.

In the meantime, react-slider v1 is still available.

[consegrado]

@kris-ellery the problem is the file extension must be used for esm .mjs and not .js, a similar problem was solved here https://github.com/fkhadra/react-toastify/issues/766

[kris-ellery]

@consegrado Thats one of the solutions. You can read more about dual-packaging here and here. create-react-styleguide, which react-slider is based on, follows the latter approach.

[willtpwise]

Thanks for working on this @kris-ellery. Keen as for the patch 🥳

[DavidChouinard]

@kris-ellery anything we can do to help? Running esmExternals: false isn't great and Next is probably going to deprecate it at some point :(

[kris-ellery]

@DavidChouinard you can still use react-slider@1.3.1 to make Next.js happy. The v2 improvements are minuscule for a single component.

We'll do our best to get the bundle issue fixed, I'm not able to provide a definitive timeline tho.

[DavidChouinard]

Got it appreciate it will move down to 1.3.1 given the improvements are small

[kris-ellery]

Fixed in 2.0.2. Here is CodeSandbox with working example.

@DavidChouinard can you please confirm? Thanks!

[DavidChouinard]

Woah it works! Thank you so much 🙏