HTML/CSS series 3 - part 44 (Deployment)

HTML/CSS
1

Hi there

I am trying to deploy the website that has been established in this section. I keep getting a build error when attempting to deploy the website. Here is the error log:

  1. Build command from Netlify app
    12:46:36 PM: ────────────────────────────────────────────────────────────────
    12:46:36 PM: ​
    12:46:36 PM: $ parcel build index.html
    12:46:39 PM: :rotating_light: /opt/build/repo/images/sprite.svg: Invalid Version: undefined
    12:46:39 PM: at new SemVer (/opt/build/repo/node_modules/@babel/preset-env/node_modules/semver/semver.js:314:11)
    12:46:39 PM: at compare (/opt/build/repo/node_modules/@babel/preset-env/node_modules/semver/semver.js:647:10)
    12:46:39 PM: at lt (/opt/build/repo/node_modules/@babel/preset-env/node_modules/semver/semver.js:688:10)
    12:46:39 PM: at /opt/build/repo/node_modules/@babel/preset-env/lib/index.js:280:22
    12:46:39 PM: at Object.default (/opt/build/repo/node_modules/@babel/helper-plugin-utils/lib/index.js:22:12)
    12:46:39 PM: at getEnvPlugins (/opt/build/repo/node_modules/parcel-bundler/src/transforms/babel/env.js:62:34)
    12:46:39 PM: at getEnvConfig (/opt/build/repo/node_modules/parcel-bundler/src/transforms/babel/env.js:12:25)
    12:46:39 PM: at async getBabelConfig (/opt/build/repo/node_modules/parcel-bundler/src/transforms/babel/config.js:32:19)
    12:46:39 PM: at async babelTransform (/opt/build/repo/node_modules/parcel-bundler/src/transforms/babel/transform.js:6:16)
    12:46:39 PM: at async JSAsset.pretransform (/opt/build/repo/node_modules/parcel-bundler/src/assets/JSAsset.js:83:5)
    12:46:41 PM: ​
    12:46:41 PM: ────────────────────────────────────────────────────────────────
    12:46:41 PM: “build.command” failed
    12:46:41 PM: ────────────────────────────────────────────────────────────────
    12:46:41 PM: ​
    12:46:41 PM: Error message
    12:46:41 PM: Command failed with exit code 1: parcel build index.html
    12:46:41 PM: ​
    12:46:41 PM: Error location
    12:46:41 PM: In Build command from Netlify app:
    12:46:41 PM: parcel build index.html
    12:46:41 PM: ​
    12:46:41 PM: Resolved config
    12:46:41 PM: build:
    12:46:41 PM: command: parcel build index.html
    12:46:41 PM: commandOrigin: ui
    12:46:41 PM: environment:
    12:46:41 PM: - CI
    12:46:41 PM: publish: /opt/build/repo/dist
    12:46:42 PM: Caching artifacts
    12:46:42 PM: Started saving node modules
    12:46:42 PM: Finished saving node modules
    12:46:42 PM: Started saving build plugins
    12:46:42 PM: Finished saving build plugins
    12:46:42 PM: Started saving pip cache
    12:46:42 PM: Finished saving pip cache
    12:46:42 PM: Started saving emacs cask dependencies
    12:46:42 PM: Finished saving emacs cask dependencies
    12:46:42 PM: Started saving maven dependencies
    12:46:42 PM: Finished saving maven dependencies
    12:46:42 PM: Started saving boot dependencies
    12:46:42 PM: Finished saving boot dependencies
    12:46:42 PM: Started saving rust rustup cache
    12:46:42 PM: Finished saving rust rustup cache
    12:46:42 PM: Started saving go dependencies
    12:46:42 PM: Finished saving go dependencies
    12:46:45 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
    12:46:45 PM: Failing build: Failed to build site
    12:46:45 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 2
    12:46:45 PM: Finished processing build request in 39.276574084s

I also get these 2 lines which I don’t know how to address:

12:46:33 PM: 42 packages are looking for funding
12:46:33 PM: run npm fund for details
12:46:33 PM: found 1 high severity vulnerability
12:46:33 PM: run npm audit fix to fix them, or npm audit for details

1 Like
2

Still no answer yet, halp plz

3

I’m almost done with Part 2 – If I get to where you are and figure it out (before you do) I’ll share what I’ve learned! But I hope you figure it out before I get there just in case I hit the same problem! LOL
Cheers,
Kyle

2 Likes
4

Lol, I think it’s just me, I am cursed. I reckon you will do it and won’t have any problems.

5

The people who created and maintaining these 42 packages are looking for (financial) support. You can ignore this, doesn’t affect the operating of the software.

The other one about severity vulnerability means probably there is a security issue. If not used in a production environment it’s probably no problem.

With the other problem I can’t help because I have no experience with Parcel and Netlify.

6

Same issue here…
I was finally past the production part,
However, I encountered the same issue…

7

I rebuilt the entire project and again had another issue but this time I used the most updated version of parcel. I posted my query on the netlify forums and I finally resolved it. It was a real pain though: Error: ENOENT: no such file or directory, open '/opt/build/repo/images/logo.svg' - Support - Netlify Support Forums

8

When executing the build command on netlify, this command worked “parcel build --no-minify index.html” (source: Error: tree.render is not a function - #2 by lasjorg - HTML-CSS - The freeCodeCamp Forum) and unfortunately mosh’s one kept failing. The other error was to do with the images folder being named “Images”. HTML and CSS are not case sensitive but when used with netlify, there is case-sensitivity so I had to rename my folder to “images” and make all my code on HTML and CSS consistent with that (to be written as “images/…” and not “Images/…” since I used them interchangeably).

1 Like
9

For some reason, Parcel chokes on SVG tags in the code when trying to run Minify.
So you have to run it without Minify turned off.
I had to use the command

parcel build index.html --no-minify

To get it to work in Netlify, you have to the “Advanced” tab when setting up your configuration.
Only if you put in the exact --no-minify command will Netlify work.

Give that a try!

Cheers,
Kyle

3 Likes
10

All of these issues were resolve for me by changing the “Images” to “images” in both the HTML file AND the style sheet for ticks and popular tags… the choking is a hatred of “Images” with a capital I… I went as far as to remove the Images folder from my project, rename it to “images” and pushed it to Github with a lower case folder name as well.

2 Likes
11

Dang! I hate that too! I think 90-percent of my bugs are spelling errors. Really need a Grammarly plugin for VS Code! LOL

1 Like
12

WORKS!! Thanks Kyle!!

parcel build index.html --no-minify

13

you can simply add a file to your project root with the name of “.htmlnanorc.js”
then put this code in that file.

module.exports = {
  minifySvg: false,
};

after that, you can use your simple code without any flag: parcel build index.html

15

I have the exact same problem than @Sasan, don´t know what it is. Somebody help us, please

16

hey there Ricardo, try using the command “parcel build index.html --no-minify” instead of “parcel build index.html”

If this does not work, you can also try to drag and drop your file into Netlify manually

P.S. make sure your file names are all lower case (the case sensitivity matters)

17

Thanks Sasan, I will try as you say and report to you

18

I add the --no-minify parameter and succeded. Thanks a lot

19

no prob buddy! glad it helped you!

20

Thanks for the tip, man. I tried many times to make it work. It turns out that parcel-bundler should be in 1.12.5 ( video was with 1.12.4). With the old version, it keeps failing.

1 Like
22

Yo, so did u solved the Invalid Version: undefined for images after changing the version to 1.12.5? This problem has been haunting me.