can't build using create react app 4

[elmariachi111]

cannot import image-q from an app that's built on Create React App 4.

created a demo: https://github.com/elmariachi111/esm-err-imageq

npm run start yields:

./node_modules/image-q/dist/esm/src/image/nearestColor.js 11:11
Module parse failed: Unexpected token (11:11)
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.
| import { ProgressTracker } from '../utils/progressTracker';
| export class NearestColor extends AbstractImageQuantizer {
>   _distance;
| 
|   constructor(colorDistanceCalculator) {

Have parsed through your ts config. Assume this isn't working because the emitted js files are built for esnext and that's not supported by the webpack config of CRA (4). Btw it does build on the brand new CRA 5 but this one dropped support for node types and the whole web3 industry depends on them so upgrading atm isn't an option. Any ideas?

[elmariachi111]

When "convincing" babel by hacking the browserslist the next issue is

/..../node_modules/.pnpm/image-q@2.1.2/node_modules/image-q/dist/esm/basicAPI.js
Module not found: Can't resolve 'core-js/fn/set-immediate' in '..../node_modules/.pnpm/image-q@2.1.2/node_modules/image-q/dist/esm'

[elmariachi111]

think it might help to set the tsconfig's target to es6

[ibezkrovnyi]

@elmariachi111

• Issue with core-js is fixed
• Latest version of image-q still can't be used in your demo

esm build in image-q is actually not compatible with real ES Modules, only tools like webpack can consume it.

[ibezkrovnyi]

@elmariachi111 could you please check image-q@4.0.0 if it works for you?

[elmariachi111]

@ibezkrovnyi just updated all our dependencies and 4.0.0 runs nicely inside a browser and a node context at the same time now. Nice work, thanks a lot, highly appreciated! That's my adapted repo for React: https://github.com/elmariachi111/esm-err-imageq/commit/9d17b93d04fe80de780452b63cbedfc5857dfa57