How to resolve React: Module parse failed: Identifier directly after number (numberic separator) #233
zzolo posted onGitHub
<!-- DO NOT OPEN ISSUES ABOUT SYNTAX ERRORS. -->
<!-- If you are here to open an issue about the nu_mer_ic sep_ar_a_tor, DON'T. -->
<!-- Read this instead: https://github.com/Qix-/color/issues/204#issuecomment-889974105 -->
<!-- No, you are not an exception. Your issue will be locked and closed without comment. -->
<!-- Apologies for the annoyed tone. -->
For those that may get a build error similar to the following when using color
in a React (CRA/react-scripts) project:
./node_modules/color/index.js 246:28
Module parse failed: Identifier directly after number (246:28)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| for (const [i, element] of rgb.entries()) {
| const chan = element / 255;
> lum[i] = chan <= 0.039_28 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
| }
|
The following worked for me:
- Make sure
react-scripts
is up to date. - Make sure that your
browserslist
definition include browsers that needs the transpilation (I believe the default does). - Update browserslist definitions:
npx browserslist@latest --update-db
- Delete any babel cache:
rm -r node_modules/.cache/
My basic understanding is that react-scripts
includes babel-env
which includes the babel-plugin-proposal-numeric-separator, but it doesn't think it needs to transpile that specific issue and just needs a little help.
@Qix- Thanks for the great module. Though this issue is not really specific to this package, your un-empathetic response to this issue is unfortunate. Some docs on what browsers/environments you aim to support with your package would be appreciated.