3.0.8 no longer compatible with react-scripts 1.1.4

[jakber]

Hi,

I know I should upgrade my react-scripts, but just FYI (and for anyone searching for this error message) 3.0.8 caused my build to fail with:

Failed to minify the code from this file:

        ./node_modules/canvg/lib/index.es.js:29

3.0.7 worked fine yesterday. Pinning the version by adding "canvg": "3.0.7" to package.json makes it build again.

[gabelerner]

@jakber

• The file in question is https://cdn.jsdelivr.net/npm/canvg@3.0.8/lib/index.es.js correct?
• Do you have more information such as line or character number?
• What library are you using to minify? with what args?

[trxcllnt]

I believe the issue is with mixing both "type": "module" and listing entrypoints via the "exports" field in package.json.

If I understand correctly you only need on or the other, not both. In this case, canvg's index.js is CJS, index.es.js is ESM, but "type": "module" is telling node to treat both as ESM. Alternatively, you could rename index.{js,cjs}, index.{es.js,js}, keeping "type": "module", but IMO the "exports" field is cleaner.

Here's the message node prints when importing svg2img (which calls require("canvg")):

node_modules/svg2img/index.js:1
var canvg = require('canvg'),
^

Error [ERR_REQUIRE_ESM]: require() of ES Module canvg/lib/index.js from svg2img/index.js not supported.

canvg/lib/index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.

Instead rename canvg/lib/index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in canvg/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

[gabelerner]

does the prior version work where i may have done something wrong w/ the deploy or was it code/deps from the diff that fails to minify? @dangreen any help here would be appreciated - i just ran cleanPublish

[trxcllnt]

Here's an example of trying to import in both ESM and CJS input-modes (node v16.6.2):

CJS:

$ node --input-type=commonjs --eval "require('canvg')"
node:internal/modules/cjs/loader:1150
      throw err;
      ^
Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules/canvg/lib/index.js from [eval] not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in node_modules/canvg/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at [eval]:1:1
    at Script.runInThisContext (node:vm:129:12)
    at Object.runInThisContext (node:vm:305:38)
    at [eval]-wrapper:6:22 {
  code: 'ERR_REQUIRE_ESM'
}

ESM:

$ node --input-type=module --eval "import 'canvg'"
file://node_modules/canvg/lib/index.es.js:18
import { SVGPathData } from 'svg-pathdata';
         ^^^^^^^^^^^
SyntaxError: Named export 'SVGPathData' not found. The requested module 'svg-pathdata' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'svg-pathdata';
const { SVGPathData } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:179:5)
    at async Loader.eval (node:internal/modules/esm/loader:170:24)
    at async node:internal/process/execution:49:24
    at async loadESM (node:internal/process/esm_loader:68:5)
    at async handleMainPromise (node:internal/modules/run_main:63:12)

[dangreen]

@gabelerner I'll look at the weekend

[jakber]

If I understand correctly it is using webpack 3.8.1, uglifyjs-webpack-plugin 0.4.6 and uglify-js 2.8.29 and also babel-core 6.26.0 which may have nothing to do with it.

[dangreen]

@jakber can you try canvg@3.0.9 ?

[jakber]

@dangreen I get the same problem with 3.0.9. It seems like ./node_modules/canvg/lib/index.es.js uses a lot of modern features like object destructuring with renaming, functions in object literals and generators. I could fix a few lines by e.g. changing line 29 to
var DOMParserFallback = (arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}).DOMParser;
and line 36 to createCanvas: function(width, height) { but that just caused it to complain about line 40 instead. That's when I noticed the generator function and didn't feel like rewriting that.

3.0.7 looks completely different. Not sure why. I noticed that target is "esnext" in tsconfig.json but "es5" in tsconfig.dev.json (and that has not changed recently). But if your build/publish process changed to use tsconfig.json instead of tsconfig.dev.json maybe that could have something to do with it?

[dangreen]

@jakber

1. index.es.js file is only for environments which supports esmodules -> supports most of es6 features, for rest environments there are index.cjs

   canvg/package.json

   Lines 28 to 36 in 7dd63e4

   	"main": "lib/index.cjs",
   	"module": "lib/index.es.js",
   	"raw": "lib/index.babel.js",
   	"umd": "lib/umd.js",
   	"types": "lib/index.d.ts",
   	"exports": {
   	"require": "./lib/index.cjs",
   	"import": "./lib/index.es.js"
   	},

2. We're using babel-preset-env with esmodules target
3. Please make minimal repo with reproduction of this issue - it will easier for us to research reason of the issue 🙏.

[dangreen]

@jakber

react-scripts 1.1.4

Current react-scripts version is 4.0.3 (3 versions higher).

uglifyjs-webpack-plugin 0.4.6 and uglify-js 2.8.29 and also babel-core 6.26.0

all of these has few major updates, uglifyjs-webpack-plugin 2 years without updates

so I think your setup just can't parse modern js.

[jakber]

That's exactly right, it can't (https://create-react-app.dev/docs/troubleshooting/#npm-run-build-fails-to-minify). Probably not worth fixing, but maybe 3.0.8 should be 4.0.0 if it drops support for old runtimes? If not that's cool too, just wanted to let you (and others with the same problem) know that something changed in case you weren't aware.

[dangreen]

@jakber If you are able to customize webpack config, you can try to let babel-loader transpile canvg, or set mainFields without 'module'.