TypeError: genMapping.encodedMap is not a function

[trusktr]

Same issue this other person described here in an Angular project:

https://stackoverflow.com/questions/73074976/angular-build-error-genmapping-encodedmap-is-not-a-function

My project build is roughly:

  System:
    OS: macOS 12.5
  Binaries:
    Node: 18.8.0 - ~/.n-node-versions/bin/node
    npm: 8.19.1 - ~/.npm-packages/bin/npm
  npmPackages:
    @babel/cli: ^7.11.6 => 7.18.10 
    @babel/core: ^7.11.6 => 7.19.1 
    @babel/plugin-proposal-class-properties: ^7.10.4 => 7.18.6 
    @babel/plugin-proposal-class-static-block: ^7.18.6 => 7.18.6 
    @babel/plugin-proposal-decorators: ^7.10.5 => 7.19.1 
    @babel/plugin-proposal-nullish-coalescing-operator: ^7.10.4 => 7.18.6 
    @babel/plugin-proposal-optional-chaining: ^7.11.0 => 7.18.9 
    @babel/preset-typescript: ^7.12.7 => 7.18.6 
    @babel/runtime: ^7.11.2 => 7.19.0 
    babel-loader: ^8.2.2 => 8.2.5 
    babel-preset-solid: ^1.0.0 => 1.5.4 
    webpack: ^5.72.0 => 5.74.0 

where @babel/core depends on @ampproject/remapping at version 2.2.0.

The full error is:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/trusktr/src/lume+lume/packages/classy-solid/dist/index.test.js: genMapping.encodedMap is not a function
    at new SourceMap (/Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/@ampproject/remapping/dist/remapping.umd.js:169:91)
    at remapping (/Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/@ampproject/remapping/dist/remapping.umd.js:203:16)
    at mergeSourceMap (/Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/@babel/core/lib/transformation/file/merge-map.js:22:30)
    at generateCode (/Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/@babel/core/lib/transformation/file/generate.js:76:41)
    at run (/Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/@babel/core/lib/transformation/index.js:55:33)
    at run.next (<anonymous>)
    at transform (/Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/@babel/core/lib/transform.js:29:41)
    at transform.next (<anonymous>)
    at step (/Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/gensync/index.js:261:32)
    at /Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/gensync/index.js:223:11)
    at /Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/gensync/index.js:189:28
    at /Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/@babel/core/lib/gensync-utils/async.js:84:7
    at /Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/gensync/index.js:113:33
    at step (/Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/gensync/index.js:287:14)
    at /Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/Users/trusktr/src/lume+lume/packages/classy-solid/node_modules/gensync/index.js:223:11)

webpack 5.74.0 compiled with 1 error in 302 ms

[trusktr]

I found the issue: I have babel+webpack tooling that is installed as a package that I share with all my packages. If the packages are only within my tooling package's node_modules, not hoisted to the app's node_modules (f.e. due to symlink setup), then running the tooling at the app root will not find the needed packages. Inside @ampproject/remapping/dist/remapping.umd.js the require('@jridgewell/gen-mapping') returns undefined (or something, there's no runtime error regarding the require() call for whatever reason which is not normal) then the tooling fails when global.genMapping ends up undefined.

To solve the issue, I needed to make sure that my app's node_modules contains the dependencies, which is typically what happens in regular installs, but npm linking or Lerna projects that cross link dependencies can sometimes have the wrong result for whatever reason.

[elbakerino]

The same root-error caused my jest build to fail - everything else with webpack/babel worked.

TypeError: /redacted/node_modules/jest-runner/build/index.js: /redacted/node_modules/@ampproject/remapping/dist/remapping.umd.js: _remapping(...) is not a function

In a lerna managed monorepo, which i've just upgraded, bumped @babel/core from 7.16.7 to 7.20.12 - which now introduced @ampproject/remapping.

As i've switched a lot of tooling to work with native ES-Modules, this seems to lead to the invalid @ampproject/remapping call in some runtimes (webpack ?CJS? / jest ESM).

For me the best fix was to add "type": "module" to the root package.json, switching all require with import in the "mono repo tooling" (like jest.config.js), thus forcing the node/TS resolution to not load UMDs, when modules exists.

This commit shows all changes - if babel/runtime is still wanted, it must be added (somehow) to the jest transformIgnorePatterns, but this plugin isn't good in my use-case in general.