Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using isomorphic modules in middlewares #36974

Closed
1 task done
brc-dd opened this issue May 17, 2022 · 2 comments
Closed
1 task done

Using isomorphic modules in middlewares #36974

brc-dd opened this issue May 17, 2022 · 2 comments
Labels
bug Issue was opened via the bug report template.

Comments

@brc-dd
Copy link

brc-dd commented May 17, 2022

Verify canary release

  • I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 16.15.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.7-canary.6
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Put something like this in pages/_middleware.js:

import { NextResponse } from 'next/server'
import fetch from 'isomorphic-fetch'

export const middleware = async (req, ev) => NextResponse.next()

It throws error like:

Module not found: Can't resolve 'querystring'

Import trace for requested module:
./node_modules/.pnpm/node-fetch@2.6.7/node_modules/node-fetch/lib/index.mjs
./node_modules/.pnpm/isomorphic-fetch@3.0.0/node_modules/isomorphic-fetch/fetch-npm-node.js
./pages/_middleware.js

https://nextjs.org/docs/messages/module-not-found

You're using a Node.js module (querystring) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime

I know that we have access to fetch inside middlewares, but the question I want to ask is how can one write a module that works on both Node.js and edge-runtimes without making the users to manually specify the file to import?

Expected Behavior

I expect Next.js to by default import browser field of package.json inside middlewares. Or don't check for native modules inside conditions that are not true on middlewares. For example in this one:

import { NextResponse } from 'next/server'

let crypto

if (process?.versions?.node) {
  console.log('is Node')
  // uncommenting below line throws error: You're using a Node.js module (crypto) which is not supported in the Edge Runtime.
  // crypto = require('crypto').webcrypto // or maybe @peculiar/webcrypto
} else {
  console.log('not Node') // this gets printed on terminal
  crypto = global?.crypto || window?.crypto // and some other fallbacks
}

export const middleware = async (req, ev) => NextResponse.next()

EDIT:

I understand the reasoning behind not importing browser field as mentioned at #36844 (comment). But for the second one (selective requiring/import), I think that's a bug.

@brc-dd brc-dd added the bug Issue was opened via the bug report template. label May 17, 2022
@brc-dd
Copy link
Author

brc-dd commented May 17, 2022

I ended up doing:

const nodeVer = typeof process !== 'undefined' && process.versions?.node
const nodeRequire = nodeVer
  ? typeof __webpack_require__ === 'function'
    ? __non_webpack_require__
    : require
  : undefined

@brc-dd brc-dd closed this as completed May 17, 2022
@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 17, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

1 participant