Next.js Discord

Discord Forum

When does Next use Node vs not?

Unanswered
Polish posted this in #help-forum
Open in Discord
PolishOP
I have an extremely simple Node script that I need to run when I hit an API route, but it errors out when I do; running the same code with node script.ts works perfectly.

I'm using Next 14 on the app router. The simplest repro code as a Next API Route for this is:

import { SourceMapConsumer } from "source-map";


export async function GET() {
  const sourceMap = {...} // json object representing a sourcemap.
  const consumer = await new SourceMapConsumer(sourceMap); // this line fails.
  return new NextResponse(
    JSON.stringify({ message: "Success" }),
    {
      status: 200,
      headers: {
        "Content-Type": "application/json",
      },
    }
  );
}


Hitting this endpoint throws a "mappings.wasm" not found error; this error is only expected in a Browser environment!:
 ⨯ [Error: ENOENT: no such file or directory, open '/Users/.../my_app/.next/server/vendor-chunks/mappings.wasm'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/.../my_app/.next/server/vendor-chunks/mappings.wasm'
}


This same code, when copy pasted into a separate file and I run node script.ts works perfectly.

I think this is because NextJS is not running this code as classic node or something like that. In a browser environment SourceMapConsumer needs to be called with an argument for the wasm file; and explicitly not in a Node environment. (https://github.com/mozilla/source-map?tab=readme-ov-file#new-sourcemapconsumerrawsourcemap)

Please help!

13 Replies

@Polish I have an extremely simple Node script that I need to run when I hit an API route, but it errors out when I do; running the same code with `node script.ts` works perfectly. I'm using Next 14 on the app router. The simplest repro code as a Next API Route for this is: typescript import { SourceMapConsumer } from "source-map"; export async function GET() { const sourceMap = {...} // json object representing a sourcemap. const consumer = await new SourceMapConsumer(sourceMap); // this line fails. return new NextResponse( JSON.stringify({ message: "Success" }), { status: 200, headers: { "Content-Type": "application/json", }, } ); } Hitting this endpoint throws a "mappings.wasm" not found error; this error is only expected in a Browser environment!: ⨯ [Error: ENOENT: no such file or directory, open '/Users/.../my_app/.next/server/vendor-chunks/mappings.wasm'] { errno: -2, code: 'ENOENT', syscall: 'open', path: '/Users/.../my_app/.next/server/vendor-chunks/mappings.wasm' } This same code, when copy pasted into a separate file and I run `node script.ts` works perfectly. I think this is because NextJS is not running this code as classic node or something like that. In a browser environment SourceMapConsumer needs to be called with an argument for the wasm file; and explicitly not in a Node environment. (https://github.com/mozilla/source-map?tab=readme-ov-file#new-sourcemapconsumerrawsourcemap) Please help!
PolishOP
thanks for the response @Ray. The problem isnt' reading a local file; I just wrote that to simplify the example. It's the exact same problem if the JSON in the file is inlined. (Updated the example in the post to reflect this)
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverComponentsExternalPackages: ['source-map'],
},
}

module.exports = nextConfig
PolishOP
Oooo! This looks promising
Trying now, thanks
Oh my goodness, that worked. Thank you so much @Ray ! Looking at https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages, does this mean Next is defaulting to a "browser" version of a dependnecy or something? (not familiar with how this stuff works tbh)
PolishOP
Thanks @Ray . Now i'm seeing that it works when placed in /api/route.ts, but not when placed in app/page.tsx. A different error occurs when in page.tsx (I'm trying to server-generate this page):

"Error: Cannot read properties of undefined (reading 'decode')

Call Stack
new URLStateMachine
(rsc)/node_modules/source-map/node_modules/whatwg-url/lib/url-state-machine.js (546:0)"

Any ideas why this might be?
PolishOP
Same problem unfortunately:
@Polish Same problem unfortunately:
Hmm, not sure. I can help to try if you could share a repo
PolishOP
OK, appreciate you looking — will make a repo today!
PolishOP
So weird. I tried adding a repo yesterday but on a tiny repo with very little code...it actually worked. Somehow the same code in my larger page.tsx didn't...Not sure where the delta is coming from