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.jsondoes 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)
You could also try setting
experimental: { esmExternals: false }innext.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
exportskey inpackage.json, it defaults to production build ofreact-slider. What confuses me most is that each./distformat (es/dev,es/prod, etc) have their ownpackage.jsonwith"type": "module"and that should satisfy Next.js ESM requirements.I need to either tweak
create-react-styleguidebuild 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-sliderv1 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: falseisn’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
.mjsand not.js, a similar problem was solved here https://github.com/fkhadra/react-toastify/issues/766Hey @kris-ellery , I am also getting the same error. I am using Next
12.1.0, React17.0.2and React slider latest.experimental: { esmExternals: false }Is this a proper fix for the issue? Or any other fixes?