Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svg use tag throws startoffset error #10337

Closed
7 tasks done
mattpilott opened this issue Oct 3, 2022 · 2 comments · Fixed by #10381
Closed
7 tasks done

svg use tag throws startoffset error #10337

mattpilott opened this issue Oct 3, 2022 · 2 comments · Fixed by #10381
Labels
feat: html p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@mattpilott
Copy link

Describe the bug

When using svg sprites vite throws an error about startoffset.
Cannot read properties of undefined (reading 'startOffset')

<svg class="icon">
  <use xlink:href="/sprite.svg#icon-star"></use>
</svg>

Reproduction

https://stackblitz.com/edit/vitejs-vite-6bgau8?file=index.html

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.68 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.10.0 - /opt/homebrew/bin/node
    npm: 8.19.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 106.0.5249.91
    Firefox: 105.0
    Safari: 16.1
  npmPackages:
    vite: ^3.1.4 => 3.1.4

Used Package Manager

pnpm

Logs

Click to expand!
[vite] Internal server error: Cannot read properties of undefined (reading 'startOffset')
      at overwriteAttrValue (file:///home/projects/vitejs-vite-6bgau8/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:43386:50)
      at processNodeUrl (file:///home/projects/vitejs-vite-6bgau8/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:60596:9)
      at eval (file:///home/projects/vitejs-vite-6bgau8/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:60687:21)
      at traverseNodes (file:///home/projects/vitejs-vite-6bgau8/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:43345:5)
      at eval (file:///home/projects/vitejs-vite-6bgau8/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:43349:48)
      at Array.forEach (<anonymous>)
      at traverseNodes (file:///home/projects/vitejs-vite-6bgau8/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:43349:25)
      at eval (file:///home/projects/vitejs-vite-6bgau8/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:43349:48)
      at Array.forEach (<anonymous>)
      at traverseNodes (file:///home/projects/vitejs-vite-6bgau8/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:43349:25)

Validations

@userquin
Copy link
Contributor

userquin commented Oct 3, 2022

@mattpilott you must:

  • move out the svg inside #app
  • if you're running Vite 3+, you should specify base: '/' or if using default value (./) use relative part

imagen

@sapphi-red sapphi-red added the p3-minor-bug An edge case that only affects very specific usage (priority) label Oct 4, 2022
sapphi-red added a commit to sapphi-red/vite that referenced this issue Oct 8, 2022
@mattpilott
Copy link
Author

Good work! Thanks so much!

@github-actions github-actions bot locked and limited conversation to collaborators Oct 23, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: html p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants