Why I cannot deploy React file from codesandbox?

Support
, ,
#1

I tried to deply my React file from codesandbox, but failed many many times…
message said
“2022-02-06 19:28:47.856 - yarn install v1.22.5 info No lockfile found. [1/4] Resolving packages… [2/4] Fetching packages… info Visit yarn install | Yarn for documentation about this command. | warning package.json: No license field warning udemy-react2-chakura1208@1.0.0: No license field warning @types/react-router-dom > @types/history@5.0.0: This is a stub types definition. history provides its own type definitions, so you do not need this installed. warning react-scripts > workbox-webpack-plugin > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated warning react-scripts > workbox-webpack-plugin > workbox-build > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x. error eslint@8.8.0: The engine “node” is incompatible with this module. Expected version “^12.22.0 || ^14.17.0 || >=16.0.0”. Got “14.16.0” error Found incompatible module.”

Screen Shot 2022-02-06 at 11.29.06 AM
Screen Shot 2022-02-06 at 11.29.06 AM1516×1066 220 KB

How can I deploy my file to Netlify???

#2

Hi @kiyoko

Can you share the repository you are trying to deploy?

#3

Sure,
https://github.com/kiyokomorita/React-UserManagement-en.git
I still don’t know what is wrong with them…

#4

Thanks @kiyoko

This error is because there is no yarn.lock file in the repository. As per this documentation Netlify will use yarn if there is a yarn.lock or the NETLIFY_USE_YARN environment variable is set to true.

When deploying the project this is the error I see

8:20:44 AM: npm ERR! code ERESOLVE
8:20:44 AM: npm ERR! ERESOLVE unable to resolve dependency tree
8:20:44 AM: npm ERR!
8:20:44 AM: npm ERR! While resolving: udemy-react2-chakura1208@1.0.0
8:20:44 AM: npm ERR! Found: framer-motion@3.3.0-beta.22
8:20:44 AM: npm ERR! node_modules/framer-motion
8:20:44 AM: npm ERR!   framer-motion@"3.3.0-beta.22" from the root project
8:20:44 AM: npm ERR!
8:20:44 AM: npm ERR! Could not resolve dependency:
8:20:44 AM: npm ERR! peer framer-motion@">=3.0.0" from @chakra-ui/react@1.2.1
8:20:44 AM: npm ERR! node_modules/@chakra-ui/react
8:20:44 AM: npm ERR!   @chakra-ui/react@"1.2.1" from the root project
8:20:44 AM: npm ERR!
8:20:44 AM: npm ERR! Fix the upstream dependency conflict, or retry
8:20:44 AM: npm ERR! this command with --force, or --legacy-peer-deps
8:20:44 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
8:20:44 AM: npm ERR!
8:20:44 AM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
8:20:44 AM: npm ERR! A complete log of this run can be found in:
8:20:44 AM: npm ERR!     /opt/buildhome/.npm/_logs/2022-02-06T21_20_44_230Z-debug.log

There is a issue with the dependencies for the project. This issue happens locally as well—it is not Netlify-specific. In order to install all the dependencies locally npm i --force or npm i --legacy-peer-deps is used as stated in the in the log above. To mimic this on Netlify, you need add the NPM_FLAGS environment variable (see Declare variables) with either of these values.

#5

Thank you so much for your advice. I installed npm i --force and npm i --legacy-peer-deps but failed. Could you kindly advice what value should I add NPM_FLAGS??

I am totally beginner of these things…
I tried to paste the log, but could not let me paste here…

#6

NPM_FLAGS is where you add either --force or --legacy-peer-deps e.g.

env-var-npm-flags
env-var-npm-flags1798×804 46.3 KB

You can share the link to the log if you cannot paste it here.

#7

https://app.netlify.com/sites/zealous-northcutt-9066ae/deploys/6200513759462c5172055a02
Yeah, I thought so, I tried to put value --force or --legacy-peer-deps, but failed. Can you see the log from the above link?

#8

https://app.netlify.com/sites/zealous-northcutt-9066ae/deploys/62005fada4a91de38dc30957
I tried to deploy again, then this shows.

#9

According to this thread [Stack Overflow] the solution is to add

"noFallthroughCasesInSwitch": true,

to the compilerOptions in the tsconfig.json. So the file in your repository would look like

{
    "include": [
        "./src/**/*"
    ],
    "compilerOptions": {
        "noFallthroughCasesInSwitch": true,
        "strict": true,
        "esModuleInterop": true,
        "lib": [
            "dom",
            "es2018"
        ],
        "jsx": "react-jsx"
    }
}
#10

addnoFall
addnoFall1156×882 53.5 KB

I added “noFallthroughCasesInSwitch”: true, but failed again… https://app.netlify.com/sites/focused-nightingale-bdc4bf/deploys/620065d242d81bf84e4ed529
This is so annoying…

#11

Almost @kiyoko

I reverted to the original tsconfig.json and updated react-scripts to v5.0.0. This removed the error

appTsConfig.compilerOptions[option] = suggested;

This then lead to the following error

11:46:47 AM: Failed to compile.
11:46:47 AM: 
11:46:47 AM: src/components/organisms/layout/Header.tsx
11:46:47 AM:   Line 1:1:  Definition for rule 'react-hooks/exhaustive-deps' was not found  react-hooks/exhaustive-deps
11:46:47 AM: src/components/pages/UserManagement.tsx
11:46:47 AM:   Line 1:1:  Definition for rule 'react-hooks/exhaustive-deps' was not found  react-hooks/exhaustive-deps
11:46:47 AM: src/hooks/useAllUsers.ts
11:46:47 AM:   Line 1:1:  Definition for rule 'react-hooks/exhaustive-deps' was not found  react-hooks/exhaustive-deps
11:46:47 AM: Search for the keywords to learn more about each error.

The (simple) solution here was to remove

/*eslint-disable react-hooks/exhaustive-deps */

from the files list above (I say simple because there is likely more to it than that.)

This resulted in a successful build.

#12

Thank you for your prompt advise. I removed
/*eslint-disable react-hooks/exhaustive-deps */
but failed…

I also set Value “–legacy-peer-deps” but could not let me to deploy it…

NPM_FLAGS_legacy
NPM_FLAGS_legacy1364×1088 63.1 KB

Maybe my PC’s problem???

#13

I tried to post the link of the log, but failed…
un npm fund for details
5:33:32 PM: 104 vulnerabilities (93 moderate, 9 high, 2 critical)
5:33:32 PM: To address issues that do not require attention, run:
5:33:32 PM: npm audit fix
5:33:32 PM: To address all issues (including breaking changes), run:
5:33:32 PM: npm audit fix --force
5:33:32 PM: Run npm audit for details.
5:33:32 PM: NPM modules installed
5:33:33 PM: Started restoring cached go cache
5:33:33 PM: Finished restoring cached go cache
5:33:33 PM: go version go1.16.5 linux/amd64
5:33:33 PM: go version go1.16.5 linux/amd64
5:33:33 PM: Installing missing commands
5:33:33 PM: Verify run directory
5:33:34 PM: ​
5:33:34 PM: ────────────────────────────────────────────────────────────────
5:33:34 PM: Netlify Build
5:33:34 PM: ────────────────────────────────────────────────────────────────
5:33:34 PM: ​
5:33:34 PM: ❯ Version
5:33:34 PM: @netlify/build 26.2.3
5:33:34 PM: ​
5:33:34 PM: ❯ Flags
5:33:34 PM: baseRelDir: true
5:33:34 PM: buildId: 620076bd39dfd393e3665f99
5:33:34 PM: deployId: 620076bd39dfd393e3665f9b
5:33:34 PM: ​
5:33:34 PM: ❯ Current directory
5:33:34 PM: /opt/build/repo
5:33:34 PM: ​
5:33:34 PM: ❯ Config file
5:33:34 PM: No config file was defined: using default values.
5:33:34 PM: ​
5:33:34 PM: ❯ Context
5:33:34 PM: production
5:33:34 PM: ​
5:33:34 PM: ────────────────────────────────────────────────────────────────
5:33:34 PM: 1. Build command from Netlify app
5:33:34 PM: ────────────────────────────────────────────────────────────────
5:33:34 PM: ​
5:33:34 PM: $ npm run build
5:33:35 PM: > udemy-react2-chakura1208@1.0.0 build
5:33:35 PM: > react-scripts build
5:33:35 PM: /opt/build/repo/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:231
5:33:35 PM: appTsConfig.compilerOptions[option] = suggested;
5:33:35 PM: ^
5:33:35 PM: TypeError: Cannot add property target, object is not extensible
5:33:35 PM: at verifyTypeScriptSetup (/opt/build/repo/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:231:45)
5:33:35 PM: at Object. (/opt/build/repo/node_modules/react-scripts/scripts/build.js:31:1)
5:33:35 PM: at Module._compile (node:internal/modules/cjs/loader:1101:14)
5:33:35 PM: at Object.Module._extensions…js (node:internal/modules/cjs/loader:1153:10)
5:33:35 PM: at Module.load (node:internal/modules/cjs/loader:981:32)
5:33:35 PM: at Function.Module._load (node:internal/modules/cjs/loader:822:12)
5:33:35 PM: at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
5:33:35 PM: at node:internal/main/run_main_module:17:47
5:33:35 PM: ​
5:33:35 PM: ────────────────────────────────────────────────────────────────
5:33:35 PM: “build.command” failed
5:33:35 PM: ────────────────────────────────────────────────────────────────
5:33:35 PM: ​
5:33:35 PM: Error message
5:33:35 PM: Command failed with exit code 1: npm run build
5:33:35 PM: ​
5:33:35 PM: Error location
5:33:35 PM: In Build command from Netlify app:
5:33:35 PM: npm run build
5:33:35 PM: ​
5:33:35 PM: Resolved config
5:33:35 PM: build:
5:33:35 PM: command: npm run build
5:33:35 PM: commandOrigin: ui
5:33:35 PM: environment:
5:33:35 PM: - NPM_FLAGS
5:33:35 PM: publish: /opt/build/repo/build
5:33:35 PM: publishOrigin: ui
5:33:36 PM: Caching artifacts
5:33:36 PM: Started saving node modules
5:33:36 PM: Finished saving node modules
5:33:36 PM: Started saving build plugins
5:33:36 PM: Finished saving build plugins
5:33:36 PM: Started saving pip cache
5:33:36 PM: Finished saving pip cache
5:33:36 PM: Started saving emacs cask dependencies
5:33:36 PM: Finished saving emacs cask dependencies
5:33:36 PM: Started saving maven dependencies
5:33:36 PM: Finished saving maven dependencies
5:33:36 PM: Started saving boot dependencies
5:33:36 PM: Finished saving boot dependencies
5:33:36 PM: Started saving rust rustup cache
5:33:36 PM: Finished saving rust rustup cache
5:33:36 PM: Started saving go dependencies
5:33:36 PM: Finished saving go dependencies
5:33:37 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
5:33:37 PM: Creating deploy upload records
5:33:37 PM: Failing build: Failed to build site
5:33:38 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 2
5:33:38 PM: Finished processing build request in 50.247239654s

#14

As mentioned in my last post, you need to upgrade react-scripts to 5.0.0 for it to work. The issue as I understand it with react-scripts@4.0.0 which is currently listed as a dependency in the package.json.

#15

I finally deployed!!
What I last did is, I deleted the below sentence,
/*eslint-disable react-hooks/exhaustive-deps */
I changed the version of react-scripts to 5.0.0. then finally deployed!! Thank you so much for your patient and support! I really appreciate it!!

1 Like
#16

You are my hero! Thank you!!

1 Like