Could not resolve module "crypto"

Question

Could not resolve module "crypto"

10thfloor opened this issue 3 years ago · 0 comments

While working with the Cloudflare Remix template, using the following code in root.tsx

import { Links, LinksFunction, LiveReload, Outlet, Scripts } from "remix";
import { useShouldHydrate } from "remix-utils";
import styles from "./styles/app.css";

export let links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: styles }];
};

export default function App() {
  let shouldHydrate = useShouldHydrate();
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <title>Remix: So great, it's funny!</title>
        <Links />
      </head>
      <body>
        {shouldHydrate && <Scripts />}
        <Outlet />
        {process.env.NODE_ENV === "development" ? <LiveReload /> : null}
      </body>
    </html>
  );
}

Produces the following error when the app is started using npm run start

> dev:worker
> esbuild --define:process.env.NODE_ENV='"development"' --bundle --sourcemap --outdir=dist ./worker

 > node_modules/remix-utils/browser/server/csrf.js:1:28: error: Could not resolve "crypto" (use "--platform=node" when building for node)
    1 │ ...{ randomBytes } from "crypto";
      ╵                         ~~~~~~~~

1 error
[mf:err] BuildError [1]: Build failed with exit code 1
    at ChildProcess.<anonymous> (file:///Users/mackenziekieran/Desktop/remix-cloudflare/node_modules/@miniflare/core/src/plugins/build.ts:71:25)
    at ChildProcess.emit (node:events:390:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)

Node and NPM versions

{
  npm: '8.1.0',
  node: '16.13.0',
}

package.json

{
  "private": true,
  "name": "remix-app-template",
  "description": "",
  "license": "",
  "scripts": {
    "build": "remix build",
    "dev": "remix watch",
    "watch:css": "postcss styles --base styles --dir app/styles -w",
    "build:css": "postcss styles --base styles --dir app/styles --env production",
    "postinstall": "remix setup cloudflare-workers",
    "build:worker": "esbuild --define:process.env.NODE_ENV='\"production\"' --minify --bundle --sourcemap --outdir=dist ./worker",
    "dev:worker": "esbuild --define:process.env.NODE_ENV='\"development\"' --bundle --sourcemap --outdir=dist ./worker",
    "start": "miniflare --build-command \"npm run dev:worker\" --watch",
    "deploy": "npm run build && wrangler publish"
  },
  "dependencies": {
    "@remix-run/cloudflare-workers": "^1.0.5",
    "@remix-run/node": "^1.0.6",
    "@remix-run/react": "^1.0.6",
    "magic-sdk": "^6.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remix": "^1.0.6",
    "remix-utils": "^2.1.1"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^2.2.2",
    "@remix-run/dev": "^1.0.5",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "autoprefixer": "^10.4.0",
    "esbuild": "0.13.14",
    "miniflare": "2.0.0-next.3",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.2",
    "tailwindcss": "^2.2.19",
    "typescript": "^4.1.2"
  },
  "engines": {
    "node": ">=14"
  },
  "sideEffects": false,
  "main": "dist/worker.js"
}