Webpack Errors from Middleware Imports

creativeindustriesgroup commented 5 months ago

Link to the code that reproduces this issue

https://github.com/creativeindustriesgroup/nextjs-webpack-middleware-issue

To Reproduce

When importing certain packages into middleware, accessing any page which triggers the middleware will throw the error: ./node_modules/farmhash-modern/bin/bundler/farmhash_modern_bg.wasm Module parse failed: Unexpected character '' (1:0) The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack. BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature. You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated). For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"'). (Source code omitted for this binary file)

Current vs. Expected behavior

Packages such as firebase-admin, with-electron-typescript and mssql cannot be imported into middleware. I would expect these packages to be importable in order to perform operations such as token validation (in the case of firebase) in middleware.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:42:11 PST 2023; root:xnu-8792.81.3~2/RELEASE_X86_64
  Available memory (MB): 32768
  Available CPU cores: 16
Binaries:
  Node: 20.13.1
  npm: 10.5.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

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

Middleware, Webpack

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

next dev (local), next build (local)

Additional context

Issue seems similar in:

jackrdye commented 5 months ago

Encountered exact same issue. Specifically, firebase admin middleware trying to perform token verification.

creativeindustriesgroup commented 5 months ago

Encountered exact same issue. Specifically, firebase admin middleware trying to perform token verification.

@jackrdye I think this is because middleware doesn’t support certain libraries. Would be great if someone could confirm this and then maybe we could turn this into a feature request or at least give the problem a shout out in the docs?

I got around this by using next-firebase-auth-edge in the middleware.

A heads up if you decided to implement this; I only used next-firebase-auth-edge for middleware in the end and didn’t bother using their getToken() method for the rest of the website (instead using firebase’s onAuthStateChanged() method to get the user data everywhere except middleware) as trying to use getToken() ends up sending you down a bit of a rabbit hole when trying to use other Firebase methods such as auth.signOut().

Akila-Kavisinghe commented 4 months ago

I have been running into this issue as well. I am not super keen on using an entire new library just for the middleware. Anyone find any solutions? I am having a similar issue to @jackrdye

creativeindustriesgroup commented 4 months ago

I have been running into this issue as well. I am not super keen on using an entire new library just for the middleware. Anyone find any solutions? I am having a similar issue to @jackrdye

@Akila-Kavisinghe I believe this is because Firebase uses the Node.js runtime which is not supported by Next.js.

I have come across a a possible solution. This solution provides a way of getting the current auth data to the middleware without dependencies, but to verify the auth tokens you will still need to use a JWT library. I believe next-firebase-auth-edge uses the Web Crypto API in order to achieve this. With this in mind, it may be that an out of the box solution such as next-firebase-auth-edge just makes sense.

By passing the auth data into the cookies as per the above solution, the middleware can grab the auth data and then you can verify it manually. See information on how to verify ID tokens using a third-party JWT library.

Finally, a completely dependant-free solution could be that you use a Firebase Cloud Function which you call from your NextJS application's middleware. You would pass the Cloud Function the current auth token (again, from cookies), verify it inside of the Cloud Function and then use the response of the Cloud Function to determine whether the user is verified or not inside the middleware.

However, I still believe that the claim that Firebase is not supported is confirmed and then maybe we could turn this into a feature request or at least give the problem a much more specific shout out in the docs and then at least such a shoutout would be found in the search results in future.

hassanzadeh commented 2 months ago

Hey Guys, I ran into this issue as well, after so much coding to replace firebase admin with next-firebase-auth-edge, it now looks like I have to revert all my code base. Do you think there will be an easy solution any time soon? Like @creativeindustriesgroup I'm also using middleware. I'm not sure firebase-admin for anything but firestore (the rest is done with the package above) but still it gives me the same error.

vercel / next.js