Parcel JS: tree.render is not a function

user_5720206 0
Viewed 4848

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
parceljs npm svg html javascript
4 Answers

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.

user_44842870

In my case it worked adding .htmlnanorc.js to my project root with the following:

module.exports = {
    "minifySvg": false
  }
user_156468130

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

user_72088890

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 :)

user_94089870
Related