Use of a umd components library works with app router setup, but not page router setup

psylum commented 9 months ago

Link to the code that reproduces this issue

To Reproduce

Specific commands related to package setup are included in the readme.

Perform a build or run the dev server.

$ npm run build
$ npm run dev

Current vs. Expected behavior

Running a build fails, with the following output:

$ npm run build

> acl-poc-page@0.1.0 build
> next build

 ✓ Linting and checking validity of types    
   ▲ Next.js 14.0.3

 ✓ Creating an optimized production build    
 ✓ Compiled successfully
   Collecting page data  ../opt/acl-poc-page/node_modules/@astrouxds/react/dist/index.js:1
export * from "./components";
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at mod.require (/opt/acl-poc-page/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:119:18)
    at 7922 (/opt/acl-poc-page/.next/server/pages/index.js:1:1326)

> Build error occurred
Error: Failed to collect page data for /
    at /opt/acl-poc-page/node_modules/next/dist/build/utils.js:1217:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Collecting page data  .

Expected this to work, as it does using an app router setup (see https://github.com/psylum/acl-poc-app). I've variously tried using transpilePackages, and before attempting against latest, had webpack output an esm or cjs module, though umd would be preferable.

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:27 PDT 2023; root:xnu-10002.41.9~6/RELEASE_X86_64
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.3
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.2
Next.js Config:
  output: N/A

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

Not sure, SWC transpilation

Additional context

This same behavior is seen in a pre-existing application using Next.js 13.2.3, i created these proof of concept apps using latest to reproduce the problem and verify it remained in the current release, so i could file this issue.

psylum commented 9 months ago

Neglected to mention that the library being imported which is triggering the failure (by referencing it from a parallel folder after performing npm pack), can be found at https://github.com/psylum/acl-poc-lib. It is a simplified version of the problem, with the minimal desired capability (component library using react + astro uxds).

psylum commented 9 months ago

There's a branch in my reproduction repository that seems to fix the issue, where both the astro library and the components library are marked for transpilation. I didn't expect that both would need to be included, and i'm still not sure why that's needed at all, when an 'app router' app works without it.

vercel / next.js