route.ts: error when importing/requiring certain npm packages

stx-chris commented 1 year ago

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: arm64
      Version: Darwin Kernel Version 22.4.0: Wed Feb 22 22:12:01 PST 2023; root:xnu-8796.100.763.505.1~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.12.1
      npm: 9.3.0
      Yarn: 1.22.19
      pnpm: 7.9.0
    Relevant packages:
      next: 13.2.4-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/determined-voice-3xxxo4

To Reproduce

Tried to migrate to the new api spec (Next.js 13.2). When the package opencv-wasm is required or imported, the call to the api fails. Doing it the classic way (/pages), this works just fine.

Classic way (succeeds):

const CV = require("opencv-wasm");

export default function handler(req, res) {
  console.log(Object.keys(CV));
  return res.status(200).json({ message: "success" });
}

New way (fails):

const CV = require("opencv-wasm");

export function GET(request: Request): Response {
  console.log(Object.keys(CV));
  return Response.json({ message: "success" });
}

Describe the Bug

error - node_modules/opencv-wasm/opencv.js (775:26) @ abort
error - RuntimeError: abort(Error: ENOENT: no such file or directory, open '/Users/chris/repos/reproduction-app/.next/server/app/apix/sample-post/opencv.wasm'). Build with -s ASSERTIONS=1 for more info.
    at abort (webpack-internal:///(sc_server)/./node_modules/opencv-wasm/opencv.js:772:23)
    at getBinary (webpack-internal:///(sc_server)/./node_modules/opencv-wasm/opencv.js:797:21)
    at instantiateSync (webpack-internal:///(sc_server)/./node_modules/opencv-wasm/opencv.js:839:34)
    at Object.createWasm [as asm] (webpack-internal:///(sc_server)/./node_modules/opencv-wasm/opencv.js:861:17)
    at eval (webpack-internal:///(sc_server)/./node_modules/opencv-wasm/opencv.js:7148:36)
    at eval (webpack-internal:///(sc_server)/./node_modules/opencv-wasm/opencv.js:7862:12)
    at Object.eval (webpack-internal:///(sc_server)/./node_modules/opencv-wasm/opencv.js:8:30)
    at eval (webpack-internal:///(sc_server)/./node_modules/opencv-wasm/opencv.js:9:12)
    at eval (webpack-internal:///(sc_server)/./node_modules/opencv-wasm/opencv.js:12:3)
    at (sc_server)/./node_modules/opencv-wasm/opencv.js (/Users/chris/repos/reproduction-app/.next/server/app/apix/sample-post/route.js:162:1)
    at __webpack_require__ (/Users/chris/repos/reproduction-app/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/opencv-wasm/index.js:3:9)
    at (sc_server)/./node_modules/opencv-wasm/index.js (/Users/chris/repos/reproduction-app/.next/server/app/apix/sample-post/route.js:152:1)
    at __webpack_require__ (/Users/chris/repos/reproduction-app/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./app/apix/sample-post/route.ts:5:12)
    at (sc_server)/./app/apix/sample-post/route.ts (/Users/chris/repos/reproduction-app/.next/server/app/apix/sample-post/route.js:72:1)
    at __webpack_require__ (/Users/chris/repos/reproduction-app/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapix%2Fsample-post%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapix%2Fsample-post%2Froute.ts&appDir=%2FUsers%2Fchris%2Frepos%2Freproduction-app%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fchris%2Frepos%2Freproduction-app&isDev=true&tsconfigPath=tsconfig.json&assetPrefix=!:13:123)
    at (sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapix%2Fsample-post%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapix%2Fsample-post%2Froute.ts&appDir=%2FUsers%2Fchris%2Frepos%2Freproduction-app%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fchris%2Frepos%2Freproduction-app&isDev=true&tsconfigPath=tsconfig.json&assetPrefix=! (/Users/chris/repos/reproduction-app/.next/server/app/apix/sample-post/route.js:62:1)
    at __webpack_require__ (/Users/chris/repos/reproduction-app/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/chris/repos/reproduction-app/.next/server/app/apix/sample-post/route.js:192:39)
    at /Users/chris/repos/reproduction-app/.next/server/app/apix/sample-post/route.js:193:28
    at Object.<anonymous> (/Users/chris/repos/reproduction-app/.next/server/app/apix/sample-post/route.js:196:3)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.requirePage (/Users/chris/repos/reproduction-app/node_modules/next/dist/server/require.js:88:12)
    at /Users/chris/repos/reproduction-app/node_modules/next/dist/server/load-components.js:49:73
    at async Object.loadComponentsImpl [as loadComponents] (/Users/chris/repos/reproduction-app/node_modules/next/dist/server/load-components.js:49:26)
    at async DevServer.findPageComponentsImpl (/Users/chris/repos/reproduction-app/node_modules/next/dist/server/next-server.js:599:36) {
  page: '/apix/sample-post'

Expected Behavior

Should work as before. All other settings are equal.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

mikerudge commented 1 year ago

Not sure if this is the same error, since updating to 13.2.3 from 13.1.2 I can no longer build because it seems as though webpack cannot import any modules anymore.

There are pages of these types of errors

../../libs/server/next-auth/src/lib/server-next-auth.ts
Module parse failed: Unexpected token (8:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import GithubProvider from 'next-auth/providers/github';
| 
> import type { GetServerSidePropsContext } from 'next';

stx-chris commented 1 year ago

As a workaround, I could mitigate this issue by adding the package to the webpack externals list as follows:

  webpack: (config, options) => {
    config.externals = [...config.externals, "opencv-wasm"]
    return config;
  }

However, I hope that future versions of next.js will fix this loader problem.

olliejm commented 1 year ago

I'm getting the same error trying to import a WASM module in a file imported to a route.ts:

import * as CMS from '@emurgo/cardano-message-signing-nodejs';

Error:

Error: ENOENT: no such file or directory, open '/Users/{...}/.next/server/chunks/cardano_message_signing_bg.wasm'

I wasn't entirely sure if this is a bug or if what I'm trying is unsupported. I'm assuming the former?

vercel / next.js