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

[lqze]

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]

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]

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

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

[lindsaylevine]

@lqze hey caleb any update here?

[lqze]

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

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

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

[lqze]

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

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

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]

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