Skip to content
This repository has been archived by the owner on May 10, 2021. It is now read-only.

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

Closed
lqze opened this issue Nov 30, 2020 · 29 comments
Closed

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

lqze opened this issue Nov 30, 2020 · 29 comments
Assignees
@erezrokah
Labels
experimental-serverless-trace priority: medium type: bug code to address defects in shipped code

Comments

@lqze
Copy link

lqze commented Nov 30, 2020 •
edited

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
Copy link
Contributor

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
Copy link
Contributor

@lqze so sorry! i just realized you had already tried experimental-serverless-trace in #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
Copy link
Author

lqze commented Dec 3, 2020

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

@lindsaylevine
Copy link
Contributor

@lqze hey caleb any update here?

@lindsaylevine lindsaylevine added bug priority: medium type: bug code to address defects in shipped code and removed bug labels Dec 18, 2020
@lqze
Copy link
Author

lqze commented Dec 19, 2020

@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
Copy link
Contributor

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

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

@lqze
Copy link
Author

lqze commented Dec 20, 2020

@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
Copy link
Contributor

@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
Copy link
Author

lqze commented Dec 20, 2020

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
Copy link
Contributor

@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
Copy link
Author

lqze commented Dec 21, 2020

@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
Copy link
Contributor

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

@lindsaylevine
Copy link
Contributor

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
Copy link
Author

lqze commented Dec 23, 2020

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?

@lindsaylevine lindsaylevine mentioned this issue Jan 6, 2021
Closed
@neefrehman
Copy link

hey @lindsaylevine. just continuing the conversation from netlify/next-runtime#75 (comment).

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
Copy link
Contributor

@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!

@erezrokah erezrokah self-assigned this Jan 6, 2021
@lindsaylevine
Copy link
Contributor

@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
Copy link
Contributor

erezrokah commented Jan 6, 2021 •
edited

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 #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
Copy link
Contributor

@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
Copy link
Contributor

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

@erezrokah
Copy link
Contributor

erezrokah commented Jan 8, 2021 •
edited

@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 vercel/next.js#20742 and related to netlify/zip-it-and-ship-it#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 erezrokah mentioned this issue Jan 8, 2021
Closed
@lindsaylevine lindsaylevine mentioned this issue Jan 9, 2021
Closed
@erezrokah erezrokah mentioned this issue Jan 11, 2021
Merged
jonasbuntinx added a commit to jonasbuntinx/next-purescript-example that referenced this issue Jan 12, 2021
@jonasbuntinx
Added critters: netlify/next-on-netlify#103
3e52feb
@erezrokah
Copy link
Contributor

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
Copy link
Contributor

@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!

@erezrokah erezrokah mentioned this issue Jan 12, 2021
Closed
@lindsaylevine lindsaylevine mentioned this issue Jan 17, 2021
Closed
@neefrehman
Copy link

@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
Copy link
Contributor

@neefrehman

NotLikeThis-Logo

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

@lindsaylevine
Copy link
Contributor

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

@lindsaylevine lindsaylevine reopened this Jan 24, 2021
@lindsaylevine
Copy link
Contributor

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

@lindsaylevine
Copy link
Contributor

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

@lindsaylevine
Copy link
Contributor

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

#157

@neefrehman neefrehman mentioned this issue Jan 24, 2021
Closed
@chris-erickson chris-erickson mentioned this issue Jun 8, 2021
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@erezrokah erezrokah

Labels
experimental-serverless-trace priority: medium type: bug code to address defects in shipped code
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@lqze @erezrokah @neefrehman @lindsaylevine