Next 14 build errors on jspm.dev urlImports (works in Next 12 w/ babel)

[jimkyndemeyer]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/strange-lamarr-drl3wf

To Reproduce

Open https://codesandbox.io/p/devbox/strange-lamarr-drl3wf and observe the build errors.

This same project builds without any issues on Next.js 12.1.0 using babel.

Current vs. Expected behavior

That the project doesn't fail to build jspm.dev url imports by migrating from Next 12 to Next 14.

This same project builds without any issues on Next.js 12.1.0 using babel.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.39
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

I noticed that 14.0.3 and 14.0.4 canary produce different build errors. 14.0.3 complains about a missing _ export. Canary about self in the jspm file.

[MDFARHYN]

which node j.s version u are using? The minimum Node.js version has been bumped from 16.14 to 18.17, since 16.x has reached end-of-life.

[jimkyndemeyer]

@MDFARHYN From next info above: Node: 20.10.0

[coffeecupjapan]

Maybe the only way to fix it is to directly modify the .next.lock file. I encounter two errors while modifying the .next.lock file.

first is mentioned above TextEncoder. add like this in lib/next.lock/data/https_jspm.dev/npm_jspm_core_2.0.1___a421dfba_b4b5129ea95b6cc40cbe.js

import {TextEncoder, TextDecoder} from "util"

// const TextEncoder = this.TextEncoder;
// const TextDecoder = this.TextDecoder;

second error occurs after TextEncoder fixes. modify line 70 in lib/next.lock/data/https_jspm.dev/npm_jspm_core_2.0_55ddc7cff519606584e8.1_nodelibs_process

  LANG: typeof navigator !== "undefined" ? navigator.language : 'en' + '.UTF-8',

This is not a good solution so if anyone find solution configuring webpack setting in nextjs, please tell me how to fix it!

also see this doc https://nextjs.org/docs/app/api-reference/next-config-js/urlImports