Whenever I try to run production build command npm run build or npx parcel build index.html, I get this error. I have a simple html and css project, no react, no 3rd party library Why could this be happening? I have tried parcel versions 1.12.3, 1.12.4 and 1.12.5.
Here is the error:
/Users/user/Documents/HTML Apps/Project/index.html: tree.render is not a function
at /Users/user/Documents/HTML Apps/Project/node_modules/htmlnano/lib/modules/minifySvg.js:19:23
at /Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:91:45
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:105:26)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:111:5)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:105:17)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:111:5)
at traverse (/Users/user/user/HTML Apps/Project/node_modules/posthtml/lib/api.js:105:17)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:111:5)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:105:17)
at traverse (/Users/user/Documents/HTML Apps/Project/node_modules/posthtml/lib/api.js:111:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Project@1.0.0 build: `parcel build index.html`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Project@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/user/.npm/_logs/2021-04-14T07_44_52_872Z-debug.log
Turns out you can get around this by configuring htmlnano to not minify SVG.
Add a .htmlnanorc file to your project root, with a JSON configuration object like this:
{
"minifySvg": false
}
The relevant part of the documentation is here for V1 (which actually doesn't mention the minifySvg setting) or here for V2.
In my case it worked adding .htmlnanorc.js to my project root with the following:
module.exports = {
"minifySvg": false
}
parcel build --no-minify index.html
It will jump the optimization of parcel and let you going on.
Hope it’s helpful.
very easy way pls upvote
In my case, it worked by using an IMG tag with the SVG as the src.
You can weigh the pro's & con's yourself: Adding vector graphics to the Web | MDN
Note: I'm not sure if doing it this way is less efficient/optimized or not.
If someone sees anything wrong with this approach please let me know :)