search

netlify / next-on-netlify

Build and deploy Next.js applications with Server-Side Rendering on Netlify!
MIT License
715 stars 66 forks source link

`next-on-netlify` fails to build peer dependencies in deployment #103

Closed lqze closed 3 years ago

lqze commented 3 years ago

The following error occurs.

~This occurs despite adding the required packages it specifies in the top level package.json.~ Update: Adding all packages via npm i to top level package.json seems to resolve, however build-size becomes too large for Netlify's lambdas to succeed.

I'm using react-spring with TypeScript, I believe this is an issue with the types for react-spring potentially

FYI. Build works normally when using the build command next build && next export as if the site was 100% static.

5:10:25 AM: ✅ Success! All done!
5:10:25 AM: ​
5:10:25 AM: (build.command completed in 1m 10.5s)
5:10:25 AM: ​
5:10:25 AM: ────────────────────────────────────────────────────────────────
5:10:25 AM:   2. Functions bundling                                         
5:10:25 AM: ────────────────────────────────────────────────────────────────
5:10:25 AM: ​
5:10:25 AM: Packaging Functions from out_functions directory:
5:10:25 AM:  - next_api_disablepreview/next_api_disablepreview.js
5:10:25 AM:  - next_api_enablepreview/next_api_enablepreview.js
5:10:25 AM:  - next_index/next_index.js
5:10:25 AM:  - next_uri/next_uri.js
5:10:29 AM: ​
5:10:29 AM: ────────────────────────────────────────────────────────────────
5:10:29 AM:   Dependencies installation error                               
5:10:29 AM: ────────────────────────────────────────────────────────────────
5:10:29 AM: ​
5:10:29 AM:   Error message
5:10:29 AM:   A Netlify Function failed to require one of its dependencies.
5:10:29 AM:   If the dependency is a Node module, please make sure it is present in the site's top-level "package.json".
  If it is a local file instead, please make sure the file exists and its filename is correctly spelled.
5:10:29 AM: ​
5:10:29 AM:   In file "/opt/build/repo/out_functions/next_index/next_index.js"
5:10:29 AM:   Cannot find module 'react-native'
5:10:29 AM:   Require stack:
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/resolve.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/dependencies.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/main.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/plugins_core/functions/index.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/commands/get.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/main.js
5:10:29 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/bin.js
5:10:29 AM: ​
5:10:29 AM:   Resolved config
5:10:29 AM:   build:
5:10:29 AM:     command: npm run build

It's as if it cant resolve any deps or something in the opt folder? Or it's not able to correctly path to it?

My package.json is the following:

},
  "dependencies": {
    "@apollo/client": "^3.2.7",
    "color": "^3.1.3",
    "date-fns": "^2.16.1",
    "graphql": "^15.4.0",
    "html-react-parser": "^0.14.1",
    "next": "^10.0.2",
    "next-compose-plugins": "^2.2.1",
    "next-images": "^1.6.2",
    "next-on-netlify": "^2.6.3",
    "next-seo": "^4.17.0",
    "next-svgr": "0.0.2",
    "pure-react-carousel": "^1.27.6",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-hook-form": "^6.11.3",
    "react-hook-inview": "^4.3.5",
    "react-is": "^17.0.1",
    "react-spring": "^9.0.0-rc.3",
    "styled-components": "^5.2.1",
    "styled-normalize": "^8.0.7",
    "typescript": "~4.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@graphql-codegen/add": "^2.0.1",
    "@graphql-codegen/cli": "^1.19.2",
    "@graphql-codegen/typescript": "^1.17.11",
    "@graphql-codegen/typescript-operations": "^1.17.10",
    "@graphql-codegen/typescript-react-apollo": "^2.1.1",
    "@storybook/addon-actions": "^6.1.1",
    "@storybook/addon-essentials": "^6.1.1",
    "@storybook/addon-links": "^6.1.1",
    "@storybook/react": "^6.1.1",
    "@types/color": "^3.0.1",
    "@types/jest": "^26.0.15",
    "@types/react-dom": "^16.9.9",
    "@types/react-is": "^16.7.1",
    "@types/styled-components": "^5.1.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.1",
    "babel-plugin-styled-components": "^1.11.1",
    "core-js": "^3.7.0",
    "eslint": "^7.13.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript-prettier": "^4.0.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "jest": "^26.6.3",
    "prettier": "^2.1.2",
    "react-test-renderer": "^17.0.1",
    "tsconfig-paths-webpack-plugin": "^3.3.0"
  }

I've removed the konva from above after not getting any further.

I know konva is a dep of react-spring, particularly 

"react-spring": {
      "version": "9.0.0-rc.3",
      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.0.0-rc.3.tgz",
      "integrity": "sha512-VX5Gi6svgRzjGvJ7qVRQBhFN+O2IuPvkSWepIg838LNIMqlc42xdIYtoGJYSqYjNO3IocSfkHlh49WVw6hHMUg==",
      "requires": {
        "@babel/runtime": "^7.3.1",
        "@react-spring/core": "9.0.0-rc.3",
        "@react-spring/konva": "9.0.0-rc.3",
        "@react-spring/native": "9.0.0-rc.3",
        "@react-spring/three": "9.0.0-rc.3",
        "@react-spring/web": "9.0.0-rc.3",
        "@react-spring/zdog": "9.0.0-rc.3"
      }
    },
lindsaylevine commented 3 years ago

hey @lqze! so sorry you're running into this. it's definitely an issue we've seen around. can you try change your target in next.config.js to experimental-serverless-trace? @FinnWoelm does a great job of explaining how it could help here. let me know if that fixes your issue!

lindsaylevine commented 3 years ago

@lqze so sorry! i just realized you had already tried experimental-serverless-trace in https://github.com/netlify/next-on-netlify/issues/99; i'd lost sight of that connection. in that case, can you open a repo that reproduces your issue or add me to a repo where the issue is occurring? thanks so much!

lqze commented 3 years ago

@lindsaylevine All good, I'll try get a minimal repo set up that brings up the issue. Thanks.

lindsaylevine commented 3 years ago

@lqze hey caleb any update here?

lqze commented 3 years ago

@lindsaylevine Hello, sorry have not had a moment in the past week to spin up a minimal reproduction repo. I am working on one now.

On another note, adding the peer dependencies to the top level package.json did work, however, this resulted in 

2:13:52 PM: Request must be smaller than 69905067 bytes for the CreateFunction operation

and the build failing thereof.

lindsaylevine commented 3 years ago

@lqze no worries :) let us know when you have the repo.

re: your other note, #120 should address that!

lqze commented 3 years ago

@lindsaylevine Quick update nonetheless, I don't believe it is directly related to react-spring. It's going to require some more investigation.

I've managed to make a very small repo which had the base nextjs dependencies and the only additional package was react-spring. This successfully built when following the manual next-on-netlify instructions; I'd assume it would be the same with the one-click install.

lindsaylevine commented 3 years ago

@lqze yes should be the exact same with the one-click. hm i just skimmed your dependencies in the original post and not sure which would cause the react-native complaint. thanks for the update, will wait to see what you discover!

lqze commented 3 years ago

The react-native comes from:

"react-spring": {
      "version": "9.0.0-rc.3",
      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.0.0-rc.3.tgz",
      "integrity": "sha512-VX5Gi6svgRzjGvJ7qVRQBhFN+O2IuPvkSWepIg838LNIMqlc42xdIYtoGJYSqYjNO3IocSfkHlh49WVw6hHMUg==",
      "requires": {
        "@babel/runtime": "^7.3.1",
        "@react-spring/core": "9.0.0-rc.3",
        "@react-spring/konva": "9.0.0-rc.3",
        "@react-spring/native": "9.0.0-rc.3",
        "@react-spring/three": "9.0.0-rc.3",
        "@react-spring/web": "9.0.0-rc.3",
        "@react-spring/zdog": "9.0.0-rc.3"
      }
    }

This is what appears in the package-lock.json

lindsaylevine commented 3 years ago

@lqze oh ok but the minimal project still built without error with react-spring installed right? per your second-to-last comment. v interesting

lqze commented 3 years ago

@lqze oh ok but the minimal project still built without error with react-spring installed right? per your second-to-last comment. v interesting

Exactly.

Even with the exact same package.json I am unable to get the build to fail. I am going to just clone my project which is in use on Vercel and try process of elimination. It's going to be hard to pinpoint I imagine.

lindsaylevine commented 3 years ago

@lqze :( sorry it's such a pain to figure out. wish i could help more at this moment! D: good luck 🙏

lindsaylevine commented 3 years ago

additional context: someone posted on twitter a very similar issue if not the exact same issue and they were able to reply with their source: https://github.com/erikras/happyhourfm

that is mainly a note for me but if i'm able to clone that and deploy/repro myself that might enable me to move forward on your issue caleb

lqze commented 3 years ago

I can see we are both using styled-components and styled-normalise. I wonder if it's only correlation?

On another note, is it possible to get additional debugging output through the Netlify CLI? I.e., could I run next-on-netlify locally and attach a debugger?

neefrehman commented 3 years ago

hey @lindsaylevine. just continuing the conversation from https://github.com/netlify/netlify-plugin-nextjs/issues/75#issuecomment-755252655.

going from 'serverless' to 'experimental-serverless-trace' in my next config didn't solve the build issue, but adding critters as a devDependency did.

lindsaylevine commented 3 years ago

@neefrehman cool thanks for trying that. lines up with caleb's issue. trying to loop in some others from the build team at netlify to hopefully get this figured out sooner rather than later!

lindsaylevine commented 3 years ago

@lqze if you make changes to node_modules/next-on-netlify they should output on a CLI build. as far as general CLI debugging goes, @erezrokah may have more insight there 🙏

erezrokah commented 3 years ago

On another note, is it possible to get additional debugging output through the Netlify CLI? I.e., could I run next-on-netlify locally and attach a debugger?

You can run NODE_OPTIONS="--inspect-brk" netlify build and attach a debugger. Both our build system and the CLI use zip-it-and-ship-it for bundling so the error should come from: https://github.com/netlify/zip-it-and-ship-it/blob/86cf238bd82dd8a1aa6f0581d2cbb6b3c90c726b/src/node_dependencies/index.js#L20

Is the current status that the build fails or that functions are too big? For the functions size we've released an optimization for next-on-netlify (first to the CLI and now to our build system) that should help with https://github.com/netlify/next-on-netlify/issues/120. For build failures we have https://github.com/erikras/happyhourfm to reproduce critters build error but not react-native one. Is that correct?

lindsaylevine commented 3 years ago

@erezrokah their functions fail on bundling and the build fails. for both neefrehman and erikras, their bundles fail on Cannot find module critters

Ep74n6tXYAAT97H

caleb's fails on Cannot find module 'react-native' despite it not being a direct dependency

lindsaylevine commented 3 years ago

@erezrokah and yes! we have happyhourfm as a repo that reproduces critters, thats it.

erezrokah commented 3 years ago

@erezrokah their functions fail on bundling and the build fails. for both neefrehman and erikras, their bundles fail on Cannot find module critters

Reported on Next.js repo too https://github.com/vercel/next.js/issues/20742 and related to https://github.com/netlify/zip-it-and-ship-it/issues/68. The dynamic requires happens here: https://github.com/vercel/next.js/blob/8bdff57b15211fb8af4714ade3bc26d285768d35/packages/next/next-server/server/render.tsx#L1093

It was added recently

erezrokah commented 3 years ago

Hello 👋 A fix to the missing critter dependency is now live in our build system and the CLI.

Unless we can get a reproduction for the react-spring error (the original error reported in this issue), I believe we can close this issue. @lindsaylevine WDYT?

lindsaylevine commented 3 years ago

@erezrokah thanks so much for the build/CLI fix!!! i agree we can close : )

cc @neefrehman @jonasbuntinx

@lqze please feel free to re-open if you have end up having a repro and need more of our help!

neefrehman commented 3 years ago

@lindsaylevine hello! Sorry for bringing it up again but I'm the critters issue has resurfaced :(

Works fine again when I re-install it as a devDependency, but just thought I'd bring it to your attention.

1:06:49 PM: ────────────────────────────────────────────────────────────────
1:06:49 PM:   Dependencies installation error                               
1:06:49 PM: ────────────────────────────────────────────────────────────────
1:06:49 PM:   Error message
1:06:49 PM:   A Netlify Function failed to require one of its dependencies.
1:06:49 PM:   If the dependency is a Node module, please make sure it is present in the site's top-level "package.json".
  If it is a local file instead, please make sure the file exists and its filename is correctly spelled.
1:06:49 PM: ​
1:06:49 PM:   In file "/opt/build/repo/netlify-automatic-functions/next_country/next_country.js"
1:06:49 PM:   Cannot find module 'critters'
lindsaylevine commented 3 years ago

@neefrehman

NotLikeThis-Logo

thank you for surfacing. i tagged @erezrokah in slack for tomorrow!

lindsaylevine commented 3 years ago

@neefrehman do you have a link to the deploy that failed? (doesnt need to be public)

lindsaylevine commented 3 years ago

@neefrehman ah wait just realized you're using the CLI (i think)

lindsaylevine commented 3 years ago

https://github.com/netlify/netlify-plugin-nextjs/issues/88

lindsaylevine commented 3 years ago

i'm gonna re-close after transferring the plugin issue to NoN. let's track there since some back and forth has started.

https://github.com/netlify/next-on-netlify/issues/157