lightningcss
lightningcss copied to clipboard
parcel-bundler
LightningCSS fails to build on nextjs docker images using linux/arm/v6 and linux/arm/v7 architectures
I have a nextjs app which apparently uses LightningCSS under the hood for the fonts, and I wanted to add docker images for older raspberry pi models, which uses linux/arm/v6 and linux/arm/v7 architectures. The problem is that when I run those builds I get the error Error: Cannot find module '../lightningcss.linux-arm-musl.node', and the build fails.
I have simple repro here. I'm not too sure whether I should've created the bug here or on nextjs' repo, but since this seems to come directly from node_modules/.pnpm/[email protected]/node_modules/lightningcss/node/index.js, i thought it would fit better here.
Repro steps:
- Setup docker multi-arch buildx if you don't have it already
docker buildx create --name multiarch-builder --driver docker-container --bootstrap
docker buildx use multiarch-builder
- Run the following to build the image on both architectures
$ docker buildx build \
--platform linux/arm/v6,linux/arm/v7 \
.
- The above should give you the following error:
> [linux/arm/v7 builder 3/3] RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm build:
8.643 ! Corepack is about to download https://registry.npmjs.org/pnpm/-/pnpm-10.11.0.tgz
11.31 ! The local project doesn't define a 'packageManager' field. Corepack will now add one referencing [email protected]+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977.
11.31 ! For more details about this field, consult the documentation at https://nodejs.org/api/packages.html#packagemanager
11.31
13.98
13.98 > [email protected] build /app
13.98 > next build
13.98
24.85 Downloading swc package @next/swc-wasm-nodejs... to /root/.cache/next-swc
50.42 Attention: Next.js now collects completely anonymous telemetry regarding usage.
50.42 This information is used to shape Next.js' roadmap and prioritize features.
50.42 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
50.42 https://nextjs.org/telemetry
50.42
50.95 ▲ Next.js 15.3.2
50.95
51.06 Creating an optimized production build ...
83.25
83.25
83.25 Retrying 1/3...
83.26
83.26
83.26 Retrying 1/3...
83.27
83.27
83.27 Retrying 1/3...
83.28
83.28
83.28 Retrying 1/3...
83.29
83.29
83.29 Retrying 1/3...
83.29
83.29
83.29 Retrying 1/3...
99.77 Failed to compile.
99.77
99.77 src/app/layout.tsx
99.77 An error occurred in `next/font`.
99.77
99.77 Error: Cannot find module '../lightningcss.linux-arm-musl.node'
99.77 Require stack:
99.77 - /app/node_modules/.pnpm/[email protected]/node_modules/lightningcss/node/index.js
99.77 - /app/node_modules/.pnpm/@[email protected]/node_modules/@tailwindcss/node/dist/index.js
99.77 - /app/node_modules/.pnpm/@[email protected]/node_modules/@tailwindcss/postcss/dist/index.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/config/blocks/css/index.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/config/index.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack-config.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack-build/impl.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/jest-worker/processChild.js
99.77 at Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
99.77 at /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/require-hook.js:55:36
99.77 at Module._load (node:internal/modules/cjs/loader:1043:27)
99.77 at Module.require (node:internal/modules/cjs/loader:1298:19)
99.77 at mod.require (/app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/require-hook.js:65:28)
99.77 at require (node:internal/modules/helpers:182:18)
99.77 at Object.<anonymous> (/app/node_modules/.pnpm/[email protected]/node_modules/lightningcss/node/index.js:22:22)
99.77 at Module._compile (node:internal/modules/cjs/loader:1529:14)
99.77 at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
99.77 at Module.load (node:internal/modules/cjs/loader:1275:32)
99.77
99.77 src/app/layout.tsx
99.77 An error occurred in `next/font`.
99.77
99.77 Error: Cannot find module '../lightningcss.linux-arm-musl.node'
99.77 Require stack:
99.77 - /app/node_modules/.pnpm/[email protected]/node_modules/lightningcss/node/index.js
99.77 - /app/node_modules/.pnpm/@[email protected]/node_modules/@tailwindcss/node/dist/index.js
99.77 - /app/node_modules/.pnpm/@[email protected]/node_modules/@tailwindcss/postcss/dist/index.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/config/blocks/css/index.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/config/index.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack-config.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack-build/impl.js
99.77 - /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/jest-worker/processChild.js
99.77 at Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
99.77 at /app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/require-hook.js:55:36
99.77 at Module._load (node:internal/modules/cjs/loader:1043:27)
99.77 at Module.require (node:internal/modules/cjs/loader:1298:19)
99.77 at mod.require (/app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/require-hook.js:65:28)
99.77 at require (node:internal/modules/helpers:182:18)
99.77 at Object.<anonymous> (/app/node_modules/.pnpm/[email protected]/node_modules/lightningcss/node/index.js:22:22)
99.77 at Module._compile (node:internal/modules/cjs/loader:1529:14)
99.77 at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
99.77 at Module.load (node:internal/modules/cjs/loader:1275:32)
99.77
100.1
100.1 > Build failed because of webpack errors
100.3 ELIFECYCLE Command failed with exit code 1.
------
WARNING: No output specified with docker-container driver. Build result will only remain in the build cache. To push result image into registry use --push or to load image into docker use --load
Dockerfile:14
--------------------
12 | COPY --from=deps /app/node_modules ./node_modules
13 | COPY . .
14 | >>> RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm build
15 |
16 | FROM base AS runner
--------------------
ERROR: failed to solve: process "/dev/.buildkit_qemu_emulator /bin/sh -c pnpm build" did not complete successfully: exit code: 1
armv7 musl is not currently a supported platform. If you use an OS with glibc instead of musl, or use arm64 it should work. Supporting additional low usage platforms adds a bit of overhead.
Same problem with Macbook M1:
Error: Cannot find module '../lightningcss.linux-arm64-gnu.node'
