So I have a non-react library (let's call it D) I'm building as a local NPM package (it's not uploaded to npm yet). I also have a separate package (also not uploaded anywhere) that is a create-react-app site consisting of demos of D. Since D is under development and not uploaded, I'm using npm link to get the demos site to use my local in-development copy of D.
Unfortunately, despite it being a separate package, it seems that CRA evaluates the contents of D with the same babel rules it has for itself. I'm trying some private member using the # syntax (not TypeScript) and CRA seems struggling with that:
../render/three/ThreeEntity.js 43:2 #### this file is part of the library D, not the CRA demos app
Module parse failed: Unexpected character '#' (43:2)
File was processed with these loaders:
* ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| export default class ThreeEntity {
#deployed;
| #entity;
| #three;
My understanding is that private class members have been supported in Node for some time (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields#browser_compatibility), so I'm also not sure why Babel is struggling with this. Can anyone provide any insight?