parcel icon indicating copy to clipboard operation
parcel copied to clipboard

Published 20 hours ago • verified publisher icon parcel-bundler

SVG-related warnings during build

Open stargazer33 opened this issue 5 months ago • 0 comments

🐛 bug report

When running npm run build I get this warning in stdout

You are trying to configure cleanupIDs which is not part of preset-default.
Try to put it before or after, for example

plugins: [
  {
    name: 'preset-default',
  },
  'cleanupIDs'
]

My HTML file contains multiple <svg> ... </svg> I get this warning for each svg tag.

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

package.json:

{
  "version": "1.0.0",
  "private": true,

  "targets": {
    "ex": {
      "source": "ex.html"
    }
  },

  "scripts": {
    "build": "parcel build --target ex --no-cache"
  },

  "dependencies": {
    "@babel/runtime": "7.25.0",
    "@popperjs/core": "2.11.8",
    "bootstrap": "5.3.3",
    "sass": "1.77.6"
  },

  "devDependencies": {
    "parcel": "2.12.0"
  }
}

ex.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
    <form id="search-form-id" class="position-relative">
        <div class="row">
            <div class="col-8 col-sm-8 col-12" >
                    <div class="input-group">
                        <input id="search-form-search-input-id"
                               name="q"
                               type="text"
                               class="form-control"
                        >
                        <span id="search-form-clear-search-id" class="position-absolute top-50 translate-middle-y d-none">
                        <svg xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
                        </svg>
                    </span>
                        <button id="search-form-search-button-id" class="btn btn-primary" type="submit">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-search" viewBox="0 0 16 16">
                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
                            </svg>
                        </button>
                    </div>
            </div>
        </div>
    </form>
</div>
</body>
</html>

🤔 Expected Behavior

There should be no warnings

😯 Current Behavior

I get the warning (see above) for each tag.

🔦 Context

Usual web development

Please suggest a workaround: Actually, I do not need SVG processing/optimization at all. Having a workaround to turn off Parcel SVG processing for embedded SVG's would be good: these SVG's coming from Bootstrap icons, so they could be just copied to dist/ "as is"

🌍 Your Environment

Software Version(s)
Parcel 2.12.0
Node v20.16.0
npm/Yarn npm 10.8.1
Operating System Ubuntu 22.04

stargazer33 avatar Aug 30 '24 08:08 stargazer33