Qix-/color

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:

  1. Make sure react-scripts is up to date.
  2. Make sure that your browserslist definition include browsers that needs the transpilation (I believe the default does).
  3. Update browserslist definitions: npx browserslist@latest --update-db
  4. 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.


your un-empathetic response to this issue is unfortunate.

The fragmented javascript ecosystem paired with people calling me names is the more unfortunate thing.

posted by Qix- over 3 years ago

Fund this Issue

$0.00
Funded

Pull requests