0

I'm currently trying to deploy a Remix App to Netlify and followed the steps described in the Netlify docs. However, as soon as I try to deploy the site (netlify deploy), Netlify complains about some missing dependencies I never directly imported into my project.

// e.g. 
Error: In file "C:\..\PROJECT_NAME\.netlify\functions-internal\server.js"
Cannot find module '@react-hook/debounce'

I would be fine to add one or two deps, but it seems like I've to add 10+ deps. So I guess it has a deeper reason I couldn't figure out yet.

enter image description here

Note: The green marked deps I had already to add, and I'm still not finished. The next dep I'm supposed to add is @react-hook/debounce. Then I will run pnpm install -D @react-hook/debounce and netlify deploy, wait 20s and it will complain about the next missing dependency, and so on.

I set up a new project from scratch following this tutorial. However, there occurs the same issue as described above.

I'm using pnpm as package manager. As described in this blog Netlify claims to support pnpm out of the box.

Useful Resources (from the new setup project)

netlify.toml

[build]
  command = "pnpm run build"
  publish = "public"

[dev]
  command = "remix watch"
  port = 3000

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/server"
  status = 200

[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

package.json (without added deps)

{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "pnpm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "concurrently \"pnpm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css"
  },
  "dependencies": {
    "@netlify/functions": "^1.0.0",
    "@remix-run/netlify": "^1.7.3",
    "@remix-run/node": "^1.7.3",
    "@remix-run/react": "^1.7.3",
    "cross-env": "^7.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.7.3",
    "@remix-run/eslint-config": "^1.7.3",
    "@remix-run/serve": "^1.7.3",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "autoprefixer": "^10.4.12",
    "concurrently": "^7.5.0",
    "eslint": "^8.23.1",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.2.1",
    "typescript": "^4.7.4"
  },
  "engines": {
    "node": ">=14"
  }
}

remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverBuildTarget: "netlify",
  server:
    process.env.NETLIFY || process.env.NETLIFY_LOCAL
      ? "./server.js"
      : undefined,
  ignoredRouteFiles: ["**/.*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: ".netlify/functions-internal/server.js",
  // publicPath: "/build/",
};
BennoDev
  • 1,067
  • 1
  • 6
  • 17

2 Answers2

0

The issue occurred because pnpm has another node_modules structure than yarn or npm which Netlify currently can't handle. Luckily pnpm offers a flag --shamefully-hoist which creates a flat node_modules structure, similar to that of npm or yarn.

-> To resolve the issue, you need to run your pnpm install with --shamefully-hoist. So, simply add the Environment Variable PNPM_FLAGS with the value --shamefully-hoist to your netlify.toml config.

// ..

[build.environment]
  PNPM_FLAGS = "--shamefully-hoist"

// ..

Further details: https://answers.netlify.com/t/nuxt-3-deploy-failed-rollup-failed-to-resolve-import-vue/77680/9

BennoDev
  • 1,067
  • 1
  • 6
  • 17
0

One possible cause is using ESM packages, see Remix docs: Gotchas

Adding

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverDependenciesToBundle: ["@react-hook/debounce"],
  // ...
};

to remix.config.js could help

Jkarttunen
  • 6,764
  • 4
  • 27
  • 29