Why I cannot deploy React file from codesandbox?

kiyoko · February 6, 2022, 7:36pm

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 GitHub - lydell/source-map-url: [DEPRECATED] Tools for working with sourceMappingURL comments. warning react-scripts > workbox-webpack-plugin > workbox-build > source-map-url@0.4.1: See GitHub - lydell/source-map-url: [DEPRECATED] Tools for working with sourceMappingURL comments. 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.”

How can I deploy my file to Netlify???

coelmay · February 6, 2022, 8:25pm

Hi @kiyoko

Can you share the repository you are trying to deploy?

kiyoko · February 6, 2022, 8:56pm

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

coelmay · February 6, 2022, 9:33pm

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.

kiyoko · February 6, 2022, 11:19pm

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…

coelmay · February 6, 2022, 11:33pm

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

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

kiyoko · February 6, 2022, 11:51pm

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?

kiyoko · February 6, 2022, 11:56pm

I tried to deploy again, then this shows.

coelmay · February 7, 2022, 12:06am

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"
    }
}

kiyoko · February 7, 2022, 12:26am

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

coelmay · February 7, 2022, 12:53am

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.

kiyoko · February 7, 2022, 1:40am

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…

Maybe my PC’s problem???

kiyoko · February 7, 2022, 1:42am

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

coelmay · February 7, 2022, 1:45am

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.

kiyoko · February 7, 2022, 4:48am

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

kiyoko · February 7, 2022, 4:49am

You are my hero! Thank you!!

Topic		Replies	Views
Fork-ts-checker-webpack-plugin incompatible with Yarn Support building , deployment , create-react-app	2	1429	December 10, 2019
Deployment Error - The platform "linux" is incompatible with this module Support deployment	5	3286	April 2, 2020
Error react-scripts@5.0.0: The engine "node" is incompatible with this module. Expected version ">=14.0.0". Got "12.18.0" Support building , deployment , netlify-newbie , create-react-app	1	3667	January 26, 2022
Loading module from my site was blocked because of a disallowed MIME type (“text/html”) Support building , deployment	2	3724	January 11, 2024
Build has stopped since I changed the build command to yarn instead of npm Support deployment	10	1472	April 28, 2022

Why I cannot deploy React file from codesandbox?

Related topics