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)
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
exports
key inpackage.json
, it defaults to production build ofreact-slider
. What confuses me most is that each./dist
format (es/dev
,es/prod
, etc) have their ownpackage.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/766Hey @kris-ellery , I am also getting the same error. I am using Next
12.1.0
, React17.0.2
and React slider latest.experimental: { esmExternals: false }
Is this a proper fix for the issue? Or any other fixes?