Good morning. I’ve been trying to deploy my portfolio site for almost a week now. When deploy using Git with dist/ and a npm run build settings, it gives “site deploy failed” and shows shows this deploy log :
:1:48:48 AM: Build ready to start
1:48:50 AM: build-image version: c5b01a919d3e16af69445c5de0cacb49efbb1a23 (focal)
1:48:50 AM: build-image tag: v4.4.0
1:48:50 AM: buildbot version: 9deea8f876b3228119111d3a654f519dd1866bfe
1:48:50 AM: Fetching cached dependencies
1:48:50 AM: Failed to fetch cache, continuing with build
1:48:50 AM: Starting to prepare the repo for build
1:48:51 AM: No cached dependencies found. Cloning fresh repo
1:48:51 AM: git clone GitHub - jeddy019/new-website: My portfolio website!
1:48:52 AM: Preparing Git Reference refs/heads/main
1:48:52 AM: Parsing package.json dependencies
1:48:53 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: ‘dist’ versus ‘dist/’ in the Netlify UI
1:48:53 AM: Starting build script
1:48:53 AM: Installing dependencies
1:48:53 AM: Python version set to 2.7
1:48:54 AM: Downloading and installing node v16.13.0…
1:48:54 AM: Downloading https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz…
1:48:55 AM: Computing checksum with sha256sum
1:48:55 AM: Checksums matched!
1:48:58 AM: Now using node v16.13.0 (npm v8.1.0)
1:48:58 AM: Started restoring cached build plugins
1:48:58 AM: Finished restoring cached build plugins
1:48:58 AM: Attempting ruby version 2.7.2, read from environment
1:49:00 AM: Using ruby version 2.7.2
1:49:00 AM: Using PHP version 8.0
1:49:00 AM: Started restoring cached node modules
1:49:00 AM: Finished restoring cached node modules
1:49:01 AM: Installing NPM modules using NPM version 8.1.0
1:49:03 AM: npm ERR! code ERESOLVE
1:49:03 AM: npm ERR! ERESOLVE unable to resolve dependency tree
1:49:03 AM: npm ERR!
1:49:03 AM: npm ERR! While resolving: simplefolio@1.0.1
1:49:03 AM: npm ERR! Found: webpack@5.61.0
1:49:03 AM: npm ERR! node_modules/webpack
1:49:03 AM: npm ERR! dev webpack@“^5.40.0” from the root project
1:49:03 AM: npm ERR!
1:49:03 AM: npm ERR! Could not resolve dependency:
1:49:03 AM: npm ERR! peer webpack@“^4.0.0” from optimize-css-assets-webpack-plugin@6.0.1
1:49:03 AM: npm ERR! node_modules/optimize-css-assets-webpack-plugin
1:49:03 AM: Creating deploy upload records
1:49:03 AM: npm ERR! dev optimize-css-assets-webpack-plugin@“^6.0.1” from the root project
1:49:03 AM: npm ERR!
1:49:03 AM: npm ERR! Fix the upstream dependency conflict, or retry
1:49:03 AM: npm ERR! this command with --force, or --legacy-peer-deps
1:49:03 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
1:49:03 AM: npm ERR!
1:49:03 AM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
1:49:03 AM: npm ERR! A complete log of this run can be found in:
1:49:03 AM: npm ERR! /opt/buildhome/.npm/_logs/2021-10-31T09_49_03_391Z-debug.log
1:49:03 AM: Error during NPM install
1:49:03 AM: Build was terminated: Build script returned non-zero exit code: 1
1:49:03 AM: Failing build: Failed to build site
1:49:03 AM: Failed during stage ‘building site’: Build script returned non-zero exit code: 1
1:49:03 AM: Finished processing build request in 13.000324704s
I also tried to deploy by dragging the files from my computer. It deployed successfully this time on this link https://peaceful-banach-20da89.netlify.app/ but when I click on link provided, I get redirected to a page that shows “pages not found”. I also get this deploy log:
1:52:45 AM: Creating deploy upload records
1:52:57 AM: Starting post processing
1:52:57 AM: Post processing - HTML
1:52:58 AM: Post processing - header rules
1:52:58 AM: Post processing - redirect rules
1:52:58 AM: Post processing done
1:52:58 AM: Site is live
alongside this deploy summary:
All files already uploaded
All files already uploaded by a previous deploy with the same commits.
I’ve been on this errors for a week now and I’ve read and tried so many solutions but none worked. I’m actually new to coding and I’m already overwhelmed by these errors. I will be so grateful if I can finally fix this issue and deploy my site online. I’m new on this platform too and I g=hope I didn’t break any rules with this long note!
If you look closely the error describes the problem and how to fix it.
1:49:03 AM: npm ERR! ERESOLVE unable to resolve dependency tree
This is a dependency error.
1:49:03 AM: npm ERR! Found: webpack@5.61.0
1:49:03 AM: npm ERR! node_modules/webpack
1:49:03 AM: npm ERR! dev webpack@"^5.40.0" from the root project
Webpack 5 is in use at the root of the project.
1:49:03 AM: npm ERR! Could not resolve dependency:
1:49:03 AM: npm ERR! peer webpack@"^4.0.0" from optimize-css-assets-webpack-plugin@6.0.1
The optimize-css-assets-webpack-plugin wants Webpack 4.
1:49:03 AM: npm ERR! Fix the upstream dependency conflict, or retry
1:49:03 AM: npm ERR! this command with --force, or --legacy-peer-deps
1:49:03 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
You can try npm install --force or npm install --legacy-peer-deps
Thank you so much for your response. Means a lot. I ran the commands ( npm install --force and npm install --legacy-peer-deps ) but it still prompted me to install peer dependencies manually in both cases so I installed webpack@“^4.0.0” using this command npm install --save-dev webpack@“^4.0.0” then pushed changes to my repo.
Then I tried to deploy using Git but got “deploy failed” error with this log:
3:07:20 PM: Build ready to start
3:07:22 PM: build-image version: c5b01a919d3e16af69445c5de0cacb49efbb1a23 (focal)
3:07:22 PM: build-image tag: v4.4.0
3:07:22 PM: buildbot version: 9deea8f876b3228119111d3a654f519dd1866bfe
3:07:22 PM: Fetching cached dependencies
3:07:22 PM: Failed to fetch cache, continuing with build
3:07:22 PM: Starting to prepare the repo for build
3:07:23 PM: No cached dependencies found. Cloning fresh repo
3:07:23 PM: git clone GitHub - jeddy019/new-website: My portfolio website!
3:07:24 PM: Preparing Git Reference refs/heads/main
3:07:24 PM: Parsing package.json dependencies
3:07:25 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: ‘dist’ versus ‘dist/’ in the Netlify UI
3:07:25 PM: Starting build script
3:07:25 PM: Installing dependencies
3:07:25 PM: Python version set to 2.7
3:07:27 PM: Downloading and installing node v16.13.0…
3:07:27 PM: Downloading https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz…
3:07:27 PM: Computing checksum with sha256sum
3:07:27 PM: Checksums matched!
3:07:32 PM: Now using node v16.13.0 (npm v8.1.0)
3:07:32 PM: Started restoring cached build plugins
3:07:32 PM: Finished restoring cached build plugins
3:07:32 PM: Attempting ruby version 2.7.2, read from environment
3:07:34 PM: Using ruby version 2.7.2
3:07:34 PM: Using PHP version 8.0
3:07:34 PM: Started restoring cached node modules
3:07:34 PM: Finished restoring cached node modules
3:07:35 PM: Installing NPM modules using NPM version 8.1.0
3:07:36 PM: npm ERR! code ERESOLVE
3:07:36 PM: npm ERR! ERESOLVE unable to resolve dependency tree
3:07:36 PM: npm ERR!
3:07:36 PM: npm ERR! While resolving: portfolio@1.0.1
3:07:36 PM: npm ERR! Found: webpack@4.46.0
3:07:36 PM: npm ERR! node_modules/webpack
3:07:36 PM: npm ERR! dev webpack@“^4.0.0” from the root project
3:07:36 PM: npm ERR!
3:07:36 PM: npm ERR! Could not resolve dependency:
3:07:36 PM: npm ERR! peer webpack@“^5.0.0” from html-loader@2.1.2
3:07:36 PM: npm ERR! node_modules/html-loader
3:07:36 PM: npm ERR! dev html-loader@“^2.1.2” from the root project
3:07:36 PM: npm ERR!
3:07:36 PM: npm ERR! Fix the upstream dependency conflict, or retry
3:07:36 PM: npm ERR! this command with --force, or --legacy-peer-deps
3:07:36 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
3:07:36 PM: npm ERR!
3:07:36 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
3:07:36 PM: npm ERR! A complete log of this run can be found in:
3:07:36 PM: npm ERR! /opt/buildhome/.npm/_logs/2021-10-31T23_07_36_591Z-debug.log
3:07:36 PM: Creating deploy upload records
3:07:36 PM: Error during NPM install
3:07:36 PM: Build was terminated: Build script returned non-zero exit code: 1
3:07:36 PM: Failing build: Failed to build site
3:07:36 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 1
3:07:36 PM: Finished processing build request in 14.16375069s
I don’t know what to do with this error log. What is happening? and what must I do?
I also deleted node_modules folder from my project and ran npm install to download it again as advised from some users on stack overflow
Another issue now is that the project is not even starting locally on my computer as it was before whenever I ran npm start.
The errors have changed so it means I’m getting closer to the solution!
Thank you so much in advance.
As mentioned in the thread @nathanmartin linked to, in order to pass --force or --legacy-peers-deps to NPM, you need to use the NPM_FLAGS environment variable.
@coelmay Has provided the specific answer that you would need to get it running, but I’ll help you interpret the errors you’re seeing, in particular from the change you made:
3:07:36 PM: npm ERR! ERESOLVE unable to resolve dependency tree
This is still a dependency error.
3:07:36 PM: npm ERR! Found: webpack@4.46.0
3:07:36 PM: npm ERR! node_modules/webpack
3:07:36 PM: npm ERR! dev webpack@"^4.0.0" from the root project
You’ve changed the root of the project to use Webpack 4.
3:07:36 PM: npm ERR! Could not resolve dependency:
3:07:36 PM: npm ERR! peer webpack@"^5.0.0" from html-loader@2.1.2
The html-loader dependency wants Webpack 5.
So despite the change, the problem remains the same, some dependencies want Webpack 4 and some want Webpack 5.
It’s a build issue that you can fix by adjusting the dependencies to use versions that all utilise the same version of Webpack (if they exist), or as indicated you can use the npm flags to try and get past the issue.
When the build is running on Netlify, they execute npm install for you.
To pass the npm flags you use the NPM_FLAGS environment variable demonstrated by @coelmay.
Summary:
Edit your package.json back from "webpack": "^4.0.0", to "webpack": "^5.40.0",.
Add the Environment variable of NPM_FLAGS with a value of --legacy-peer-deps into Netlify.
Good evening @nathanmartin and @coelmay. Thank you so much for your answers! IT WORKED. I set environmental variable as @coelmay suggested and then I edited my package.json file as @nathanmartin suggested (I also changed run build settings on netlify to CI= npm run build) and that did the trick! I’m so grateful for your concern. Thank you!!!
Since I showed you guys the error logs, how about some success logs?
11:53:57 AM: Build ready to start
11:53:59 AM: build-image version: c5b01a919d3e16af69445c5de0cacb49efbb1a23 (focal)
11:53:59 AM: build-image tag: v4.4.0
11:53:59 AM: buildbot version: 9deea8f876b3228119111d3a654f519dd1866bfe
11:53:59 AM: Fetching cached dependencies
11:53:59 AM: Failed to fetch cache, continuing with build
11:53:59 AM: Starting to prepare the repo for build
11:53:59 AM: No cached dependencies found. Cloning fresh repo
11:53:59 AM: git clone GitHub - jeddy019/new-website: My portfolio website!
11:54:00 AM: Preparing Git Reference refs/heads/main
11:54:01 AM: Parsing package.json dependencies
11:54:01 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: ‘dist’ versus ‘dist/’ in the Netlify UI
11:54:02 AM: Starting build script
11:54:02 AM: Installing dependencies
11:54:02 AM: Python version set to 2.7
11:54:03 AM: Downloading and installing node v16.13.0…
11:54:03 AM: Downloading https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz…
11:54:03 AM: Computing checksum with sha256sum
11:54:03 AM: Checksums matched!
11:54:07 AM: Now using node v16.13.0 (npm v8.1.0)
11:54:07 AM: Started restoring cached build plugins
11:54:07 AM: Finished restoring cached build plugins
11:54:07 AM: Attempting ruby version 2.7.2, read from environment
11:54:09 AM: Using ruby version 2.7.2
11:54:09 AM: Using PHP version 8.0
11:54:09 AM: Started restoring cached node modules
11:54:09 AM: Finished restoring cached node modules
11:54:09 AM: Installing NPM modules using NPM version 8.1.0
11:54:26 AM: npm WARN deprecated har-validator@5.1.5: this library is no longer supported
11:54:27 AM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
11:54:28 AM: npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() · V8 for details.
11:54:29 AM: npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
11:54:33 AM: npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
11:54:36 AM: added 630 packages, and audited 631 packages in 26s
11:54:36 AM: 73 packages are looking for funding
11:54:36 AM: run npm fund for details
11:54:36 AM: 8 moderate severity vulnerabilities
11:54:36 AM: To address all issues (including breaking changes), run:
11:54:36 AM: npm audit fix --force
11:54:36 AM: Run npm audit for details.
11:54:36 AM: NPM modules installed
11:54:36 AM: Started restoring cached go cache
11:54:36 AM: Finished restoring cached go cache
11:54:37 AM: go version go1.16.5 linux/amd64
11:54:37 AM: go version go1.16.5 linux/amd64
11:54:37 AM: Installing missing commands
11:54:37 AM: Verify run directory
11:54:38 AM:
11:54:38 AM: ────────────────────────────────────────────────────────────────
11:54:38 AM: Netlify Build
11:54:38 AM: ────────────────────────────────────────────────────────────────
11:54:38 AM:
11:54:38 AM: ❯ Version
11:54:38 AM: @netlify/build 18.20.1
11:54:38 AM:
11:54:38 AM: ❯ Flags
11:54:38 AM: baseRelDir: true
11:54:38 AM: buildId: 618045d45ea22c0007b67f4e
11:54:38 AM: deployId: 618045d45ea22c0007b67f50
11:54:38 AM:
11:54:38 AM: ❯ Current directory
11:54:38 AM: /opt/build/repo
11:54:38 AM:
11:54:38 AM: ❯ Config file
11:54:38 AM: No config file was defined: using default values.
11:54:38 AM:
11:54:38 AM: ❯ Context
11:54:38 AM: production
11:54:38 AM:
11:54:38 AM: ────────────────────────────────────────────────────────────────
11:54:38 AM: 1. Build command from Netlify app
11:54:38 AM: ────────────────────────────────────────────────────────────────
11:54:38 AM:
11:54:38 AM: $ CI= npm run build
11:54:39 AM: > portfolio@1.0.1 build
11:54:39 AM: > webpack --config webpack.prod.js
11:54:40 AM: (node:1431) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
11:54:40 AM: (Use node --trace-deprecation ... to show where the warning was created)
11:54:52 AM: assets by info 1.18 MiB [immutable]
11:54:52 AM: assets by path *.png 42.4 KiB
11:54:52 AM: asset 40f8312cb4b20a747bc3.png 20.4 KiB [emitted] [immutable] [from: src/assets/logo3.png]
11:54:52 AM: asset 38964305b6a3fce77df8.png 7.96 KiB [emitted] [immutable] [from: src/assets/logo.png]
11:54:52 AM: asset 5278b53b03a2560c6474.png 7.51 KiB [emitted] [immutable] [from: src/assets/logo2.png]
11:54:52 AM: asset 922a832981c022b657a1.png 6.47 KiB [emitted] [immutable] [from: src/assets/favicon.png]
11:54:52 AM: assets by path *.js 259 KiB
11:54:52 AM: asset vendor.bf724f1f49b7fba3126c.bundle.js 165 KiB [emitted] [immutable] [minimized] (name: vendor) 1 related asset
11:54:52 AM: asset main.ed049f846a8987f16a7d.bundle.js 94.7 KiB [emitted] [immutable] [minimized] (name: main) 1 related asset
11:54:52 AM: asset 3222988415ecfc1c6e12.jpg 742 KiB [emitted] [immutable] [from: src/assets/profile.jpg] [big]
11:54:52 AM: asset main.5ea7c0744ee38d5482b8.css 163 KiB [emitted] [immutable] (name: main)
11:54:52 AM: asset resume.pdf 279 KiB [emitted] [from: src/assets/resume.pdf] [big] (auxiliary name: main)
11:54:52 AM: asset favicon.png 6.47 KiB [emitted]
11:54:52 AM: asset index.html 5.9 KiB [emitted]
11:54:52 AM: Entrypoint vendor 165 KiB = vendor.bf724f1f49b7fba3126c.bundle.js
11:54:52 AM: Entrypoint main [big] 258 KiB (279 KiB) = main.5ea7c0744ee38d5482b8.css 163 KiB main.ed049f846a8987f16a7d.bundle.js 94.7 KiB 1 auxiliary asset
11:54:52 AM: orphan modules 301 KiB [orphan] 67 modules
11:54:52 AM: runtime modules 1.72 KiB 5 modules
11:54:52 AM: cacheable modules 504 KiB (javascript) 166 KiB (css/mini-extract)
11:54:52 AM: javascript modules 504 KiB
11:54:52 AM: modules by path ./src/ 211 KiB
11:54:52 AM: ./src/vendor.js + 56 modules 208 KiB [built] [code generated]
11:54:52 AM: ./src/index.js + 6 modules 2.59 KiB [built] [code generated]
11:54:52 AM: modules by path ./node_modules/ 293 KiB
11:54:52 AM: ./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
11:54:52 AM: ./node_modules/tilt.js/src/tilt.jquery.js 11.5 KiB [built] [code generated]
11:54:52 AM: modules by path ./src/style/ 166 KiB
11:54:52 AM: css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style/main.scss 72 bytes [built] [code generated]
11:54:53 AM: Creating deploy upload records
11:54:52 AM: css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style/main.scss (1) 166 KiB [built] [code generated]
11:54:52 AM: WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
11:54:52 AM: This can impact web performance.
11:54:52 AM: Assets:
11:54:52 AM: 3222988415ecfc1c6e12.jpg (742 KiB)
11:54:52 AM: resume.pdf (279 KiB)
11:54:52 AM: WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
11:54:52 AM: Entrypoints:
11:54:52 AM: main (258 KiB)
11:54:52 AM: main.5ea7c0744ee38d5482b8.css
11:54:52 AM: main.ed049f846a8987f16a7d.bundle.js
11:54:52 AM:
11:54:52 AM: WARNING in webpack performance recommendations:
11:54:52 AM: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
11:54:52 AM: For more info visit Code Splitting | webpack
11:54:52 AM: webpack 5.61.0 compiled with 3 warnings in 12239 ms
11:54:53 AM:
11:54:53 AM: (build.command completed in 14.3s)
11:54:53 AM:
11:54:53 AM: ────────────────────────────────────────────────────────────────
11:54:53 AM: 2. Deploy site
11:54:53 AM: ────────────────────────────────────────────────────────────────
11:54:53 AM:
11:54:53 AM: Starting to deploy site from ‘dist’
11:54:53 AM: Creating deploy tree
11:54:53 AM: 0 new files to upload
11:54:53 AM: 0 new functions to upload
11:54:53 AM: Site deploy was successfully initiated
11:54:53 AM:
11:54:53 AM: (Deploy site completed in 127ms)
11:54:53 AM:
11:54:53 AM: ────────────────────────────────────────────────────────────────
11:54:53 AM: Netlify Build Complete
11:54:53 AM: Starting post processing
11:54:53 AM: ────────────────────────────────────────────────────────────────
11:54:53 AM:
11:54:53 AM: (Netlify Build completed in 14.6s)
11:54:53 AM: Post processing - HTML
11:54:53 AM: Post processing - header rules
11:54:53 AM: Post processing - redirect rules
11:54:53 AM: Post processing done
11:54:53 AM: Site is live
11:54:53 AM: Caching artifacts
11:54:53 AM: Started saving node modules
11:54:53 AM: Finished saving node modules
11:54:53 AM: Started saving build plugins
11:54:53 AM: Finished saving build plugins
11:54:53 AM: Started saving pip cache
11:54:53 AM: Finished saving pip cache
11:54:53 AM: Started saving emacs cask dependencies
11:54:53 AM: Finished saving emacs cask dependencies
11:54:53 AM: Started saving maven dependencies
11:54:53 AM: Finished saving maven dependencies
11:54:53 AM: Started saving boot dependencies
11:54:53 AM: Finished saving boot dependencies
11:54:53 AM: Started saving rust rustup cache
11:54:53 AM: Finished saving rust rustup cache
11:54:53 AM: Started saving go dependencies
11:54:53 AM: Finished saving go dependencies
11:54:56 AM: Build script success
11:55:21 AM: Finished processing build request in 1m22.298562787s
it’s looking really good @Jed ! congratulations on getting it live and thanks for everyone in this thread who contributed to a solution.
Everyone has to start somewhere in their career and as the person who runs these forums, it makes me proud and happy every time we can help a new person level up. it shows that there are places on the internet that are kind and helpful and focused on supporting each other. that’s been our goal from the beginning and i love seeing when we get to achieve that goal
Thank you @perry. I’m now able to also help others who are having similar issues. By the way, I just showed my Dad the website now and he’s already asking how he can share it with every single person on the planet
