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

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.

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 4
  • Comments: 17 (8 by maintainers)

Most upvoted comments

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

Woah it works! Thank you so much 🙏

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.

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

Fixed in 2.0.2. Here is CodeSandbox with working example.

@DavidChouinard can you please confirm? Thanks!

@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 😦

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

@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

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?