remix: Uncaught Error: Dynamic require of "fs/promises" is not supported - when importing json from @remix-run/node

What version of Remix are you using?

1.7.1

Steps to Reproduce

import { json } from "@remix-run/node";

export default function SomePage(props) {
    return <div>
        Page
    </div>
}

Then yarn dev.

Expected Behavior

No errors in developer console.

Actual Behavior

Error in developer console:

package.json

{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "start": "remix-serve build"
  },
  "dependencies": {
    "@remix-run/node": "^1.7.1",
    "@remix-run/react": "^1.7.1",
    "@remix-run/serve": "^1.7.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.7.1",
    "@remix-run/eslint-config": "^1.7.1",
    "eslint": "^8.20.0"
  },
  "engines": {
    "node": ">=14"
  },
  "packageManager": "yarn@3.2.3"
}

Yarn and Node

node version: 18.9.0
Yarn: 3.x

NB. I tried creating the project with using Yarn 1.x and it worked fine. The problem appears after migrating to yarn 3.x

Might be related:

https://github.com/yarnpkg/berry/issues/638#issuecomment-1124629341

Looks like Yarn 3.x supports ESM module loading. So I tried the following in my .yarnrc.yml file, following the recommendations from the link above:

yarnPath: .yarn/releases/yarn-3.2.3.cjs
pnpEnableEsmLoader: true
nodeLinker: "pnp"

But this did not help.

So, the thread above makes me think that yarn 3.x should work with Remix. But it does not. I’m wondering if this is Remix or Yarn issue?

The only workaround that works for me is to rollback to using nodeLinker: node-modules.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 4
Comments: 18 (1 by maintainers)

Most upvoted comments

@meglio I hit this too… A temp workaround is just change how “fs/promises” imports…

You need to change this row in file node_modules/@remix-run/node/dist/upload/fileUploadHandler.js:

var fs = require('fs');
-var promises = require('fs/promises');
+var promises = require('fs').promises;
var os = require('os');

it is at the top of the file… but still annoys…

Explanation is on Stackoverflow So… a fix for devs must be just updating a node version… or change how they import promises from fs…

mkikets99 on Oct 1, 2022

I was facing the same issue.

Solution that worked for me : moved createCookie helper to .server file

shubumpc91 on Dec 12, 2022

In my case, working with sessions, I had not specifically scoped my module to the server, e.g.: session.server.ts – so the module had leaked to the client producing the titled error.

naturalethic on Oct 20, 2022

This problem happened to me because server-only code was in the client. I had to re-name the server-only files with .server extension and it worked!

I though Remix would do a better job at distinguishing the server/client JS bundles.

ErlanBelekov on Nov 30, 2022