parcel v2 - Got unexpected undefined with SVG inline style

[anis8]

🐛 bug report

SVG inline style cause error

🎛 Configuration (.babelrc, package.json, cli command)

package.json

{
  "name": "project",
  "author": "Author",
  "version": "1.0.0",
  "description": "project",
  "scripts": {
    "start": "parcel index.html --port 1111",
    "build": "parcel build index.html --dist-dir build-panel",
  },
  "devDependencies": {
    "@capacitor/android": "3.3.4",
    "@capacitor/app": "1.0.7",
    "@capacitor/cli": "3.3.4",
    "@capacitor/core": "3.3.4",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/ios": "3.3.4",
    "@capacitor/keyboard": "1.2.0",
    "@capacitor/push-notifications": "1.0.7",
    "@capacitor/status-bar": "1.0.6",
    "@parcel/plugin": "2.1.1",
    "@parcel/transformer-sass": "^2.1.1",
    "@parcel/utils": "2.1.1",
    "@riotjs/compiler": "6.1.3",
    "@riotjs/parcel-transformer-riot": "7.0.3",
    "@types/node": "17.0.8",
    "@types/prismjs": "1.16.6",
    "@types/quill": "2.0.9",
    "@types/resize-observer-browser": "0.1.6",
    "@types/socket.io-client": "1.4.36",
    "autoprefixer": "10.4.2",
    "cordova-plugin-screen-orientation": "3.0.2",
    "parcel": "2.1.1",
    "parcel-namer-rewrite": "2.0.0-rc.1",
    "parcel-optimizer-no-conflicts": "0.0.1",
    "parcel-reporter-multiple-static-file-copier": "1.0.5",
    "postcss": "8.4.5",
    "precss": "4.0.0",
    "typescript": "4.5.4"
  },
  "dependencies": {
    "@nx-js/observer-util": "4.2.2",
    "@simonwep/pickr": "1.8.2",
    "apexcharts": "3.32.1",
    "axios": "0.24.0",
    "firebase": "9.6.2",
    "prismjs": "1.26.0",
    "quill": "1.3.7",
    "quill-blot-formatter": "1.0.5",
    "quill-cursors": "3.1.0",
    "quill-magic-url": "4.1.3",
    "regenerator-runtime": "0.13.9",
    "socket.io-client": "2.3.0",
    "sortablejs": "1.14.0",
    "striptags": "3.2.0",
    "tsparticles": "1.39.0",
    "xss": "1.0.10"
  }
}

.postcssrc

{
  "modules": {},
  "plugins": {
    "precss": {},
    "autoprefixer": {},
    "postcss-modules": {
      "generateScopedName": "[local]_[sha1:hash:base64:5]"
    }
  }
}

SVG file content

 <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="975.036px" height="975.036px" viewBox="0 0 975.036 975.036" style="enable-background:new 0 0 975.036 975.036;"
     xml:space="preserve">
<g>
    <path d="M925.036,57.197h-304c-27.6,0-50,22.4-50,50v304c0,27.601,22.4,50,50,50h145.5c-1.9,79.601-20.4,143.3-55.4,191.2
        c-27.6,37.8-69.399,69.1-125.3,93.8c-25.7,11.3-36.8,41.7-24.8,67.101l36,76c11.6,24.399,40.3,35.1,65.1,24.399
        c66.2-28.6,122.101-64.8,167.7-108.8c55.601-53.7,93.7-114.3,114.3-181.9c20.601-67.6,30.9-159.8,30.9-276.8v-239
        C975.036,79.598,952.635,57.197,925.036,57.197z"/>
    <path d="M106.036,913.497c65.4-28.5,121-64.699,166.9-108.6c56.1-53.7,94.4-114.1,115-181.2c20.6-67.1,30.899-159.6,30.899-277.5
        v-239c0-27.6-22.399-50-50-50h-304c-27.6,0-50,22.4-50,50v304c0,27.601,22.4,50,50,50h145.5c-1.9,79.601-20.4,143.3-55.4,191.2
        c-27.6,37.8-69.4,69.1-125.3,93.8c-25.7,11.3-36.8,41.7-24.8,67.101l35.9,75.8C52.336,913.497,81.236,924.298,106.036,913.497z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

🤔 Expected Behavior

When I run parcel build index.html it causes an error, but works fine with parcel index.html

When i remove inline style: style="enable-background:new 0 0 975.036 975.036;" , it work

I tried adding a .htmlnanorc including minifySvg: false, but it didn't work.

😯 Current Behavior

Here is the error:

@parcel/workers: Got unexpected undefined

  Error: Got unexpected undefined
  at nullthrows (C:\xampp\htdocs\project\interface\node_modules\nullthrows\nullthrows.js:7:15)
  at processCSSModule (C:\xampp\htdocs\project\interface\node_modules\@parcel\packager-css\lib\CSSPackager.js:187:67)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async PromiseQueue._runFn (C:\xampp\htdocs\project\interface\node_modules\@parcel\utils\lib\PromiseQueue.js:88:7)
× Build failed.

@parcel/packager-css: Got unexpected undefined

  Error: Got unexpected undefined
  at nullthrows (C:\xampp\htdocs\project\interface\node_modules\nullthrows\nullthrows.js:7:15)
  at processCSSModule (C:\xampp\htdocs\project\interface\node_modules\@parcel\packager-css\lib\CSSPackager.js:187:67)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async PromiseQueue._runFn (C:\xampp\htdocs\project\interface\node_modules\@parcel\utils\lib\PromiseQueue.js:88:7)
  at async PromiseQueue._next (C:\xampp\htdocs\project\interface\node_modules\@parcel\utils\lib\PromiseQueue.js:75:5)

🌍 Your Environment

Software	Version(s)
Parcel	2.1.1
Node	16.13.0
npm/Yarn	8.1.0
Operating System	Windows 11 64bits

[thobas-dnvgl]

Thank you for finding the root cause (inline styles in SVG). We have the build error, but I couldn't figure out where the issue came from.

[anis8]

The solution I found is to run the SVGs in this site: https://shrinkme.app/ By minimizing SVG, it replaces inline styles with attributes, and it allowed me to do all my SVGs at once.

[folknor]

This might be related to https://github.com/parcel-bundler/parcel/issues/7389. Unsure.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.