react-joyride: Loader problem
Problem Description
Overnight, my project started encountering an unexpected compilation error related to the nullish coalescing operator (??) in the react-joyride dependency. No changes were made to package installations or the Node.js version. The issue initially surfaced when I attempted to create a Docker image, and then later on my local development environment. It occurred after I deleted the node_modules folder and ran npm install again.
Development Environment
- Node.js: v14.15.4
- react-joyride: v2.6.0
Bug
./node_modules/react-joyride/dist/index.mjs 151:49 Module parse failed: Unexpected token (151:49) File was processed with these loaders:
- ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. } } parentElement = parentElement.parentElement ?? null; } return true; }
About this issue
- Original URL
- State: closed
- Created 9 months ago
- Comments: 21 (9 by maintainers)
@basefox
If you get the error on
dist/index.mjs, you are still using v2.6.x. All versions below 2.6 useesm/index.js(orlib/index.js).To pin the version, remove the
^~from the version in your package.json."react-joyride": "2.5.5"and run your package manager install command again
Just stumbled upon this.
The cause of this problem is that the
mjsversion contains??(nullish coalescing operator), which, if used untranspiled bybabeland fed towebpack@4, will be seen as an unexpected token and fail to build.Here’s a similar issue with more explanations: https://github.com/PaulLeCam/react-leaflet/issues/883
For anyone that met the same problem: You can add @babel/plugin-transform-nullish-coalescing-operator to your babel configuration.