search

jacobmischka / gatsby-plugin-react-svg

Adds svg-react-loader to gatsby webpack config
https://www.npmjs.com/package/gatsby-plugin-react-svg
MIT License
70 stars 21 forks source link

receiving Error: Invalid character entity when importing an svg file as Component #50

Open M4ss1ck opened 2 years ago

M4ss1ck commented 2 years ago

In my gatsby-config.js I have 

{
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /svg/,
        },
      },
    },

then in my LandingPage.js component I have 

// other imports
import Hacker from "../svg/hacker.svg"
const LandingPage = () => {
  //...
  return (
             <>
                 //...
                 <Hacker />
                //...
             </>
  )
}

when I run pnpm dev (script for gatsby develop -H 0.0.0.0 -o) I get

> gatsby develop -H 0.0.0.0 -o

warn Plugin gatsby-plugin-intl is not compatible with your gatsby version 4.4.0 - It requires gatsby@^2.0.0
warn Plugin gatsby-plugin-netlify is not compatible with your gatsby version 4.4.0 - It requires gatsby@^3.0.0
warn Plugin gatsby-plugin-intl is not compatible with your gatsby version 4.4.0 - It requires gatsby@^2.0.0
warn Plugin gatsby-plugin-netlify is not compatible with your gatsby version 4.4.0 - It requires gatsby@^3.0.0
success open and validate gatsby-configs, load plugins - 2.130s
success onPreInit - 0.006s
success initialize cache - 0.163s
success copy gatsby files - 0.350s
success Compiling Gatsby Functions - 0.453s
success onPreBootstrap - 0.482s
success createSchemaCustomization - 0.023s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.284s
success building schema - 0.699s
success createPages - 0.115s
success createPagesStatefully - 0.201s
info Total nodes: 108, SitePage nodes: 21 (use --verbose for breakdown)
success Checking for changed pages - 0.002s
success write out redirect data - 0.003s
success Build manifest and related icons - 0.113s
success onPostBootstrap - 0.121s
info bootstrap finished - 8.898s
success onPreExtractQueries - 0.002s
success extract queries from components - 2.653s
success write out requires - 0.141s
success run static queries - 0.024s - 2/2 84.38/s
success run page queries - 0.272s - 3/3 11.03/s
success Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 0.696s - 10/10 14.37/s

 ERROR 

Module build failed (from ./node_modules/.pnpm/svg-react-loader@0.4.6/node_modules/svg-react-loader/lib/loader.js):
Error: Invalid character entity
Line: 12
Column: 52
Char: ;
    at error (E:\TRABAJO\web\1. Proyectos\massick-portfolio\node_modules\.pnpm\sax@1.2.4\node_modules\sax\lib\sax.js:651:10)
    at strictFail (E:\TRABAJO\web\1. Proyectos\massick-portfolio\node_modules\.pnpm\sax@1.2.4\node_modules\sax\lib\sax.js:677:7)
    at parseEntity (E:\TRABAJO\web\1. Proyectos\massick-portfolio\node_modules\.pnpm\sax@1.2.4\node_modules\sax\lib\sax.js:937:7)
    at SAXParser.write (E:\TRABAJO\web\1. Proyectos\massick-portfolio\node_modules\.pnpm\sax@1.2.4\node_modules\sax\lib\sax.js:1485:31)
    at Parser.exports.Parser.Parser.parseString (E:\TRABAJO\web\1.
Proyectos\massick-portfolio\node_modules\.pnpm\xml2js@0.4.17\node_modules\xml2js\lib\xml2js.js:508:31)
    at Parser.parseString (E:\TRABAJO\web\1. Proyectos\massick-portfolio\node_modules\.pnpm\xml2js@0.4.17\node_modules\xml2js\lib\xml2js.js:7:59)      
    at AnonymousObservable.__subscribe (E:\TRABAJO\web\1.
Proyectos\massick-portfolio\node_modules\.pnpm\svg-react-loader@0.4.6\node_modules\svg-react-loader\lib\xml\parse.js:16:16)
    at AnonymousObservable.tryCatcher (E:\TRABAJO\web\1. Proyectos\massick-portfolio\node_modules\.pnpm\rx@4.1.0\node_modules\rx\dist\rx.js:63:31)     
    at setDisposable (E:\TRABAJO\web\1. Proyectos\massick-portfolio\node_modules\.pnpm\rx@4.1.0\node_modules\rx\dist\rx.js:5845:44)
    at AnonymousObservable.Rx.AnonymousObservable.AnonymousObservable._subscribe (E:\TRABAJO\web\1.
Proyectos\massick-portfolio\node_modules\.pnpm\rx@4.1.0\node_modules\rx\dist\rx.js:5862:9)
    at AnonymousObservable.Rx.Observable.observableProto.subscribe.observableProto.forEach (E:\TRABAJO\web\1.
Proyectos\massick-portfolio\node_modules\.pnpm\rx@4.1.0\node_modules\rx\dist\rx.js:2034:19)
    at CatchObserver.error (E:\TRABAJO\web\1. Proyectos\massick-portfolio\node_modules\.pnpm\rx@4.1.0\node_modules\rx\dist\rx.js:3255:30)
    at CatchObserver.Rx.internals.AbstractObserver.AbstractObserver.onError (E:\TRABAJO\web\1.
Proyectos\massick-portfolio\node_modules\.pnpm\rx@4.1.0\node_modules\rx\dist\rx.js:1772:14)
    at CatchObserver.tryCatcher (E:\TRABAJO\web\1. Proyectos\massick-portfolio\node_modules\.pnpm\rx@4.1.0\node_modules\rx\dist\rx.js:63:31)
    at AutoDetachObserverPrototype.error (E:\TRABAJO\web\1. Proyectos\massick-portfolio\node_modules\.pnpm\rx@4.1.0\node_modules\rx\dist\rx.js:5891:52)    at AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onError (E:\TRABAJO\web\1.
Proyectos\massick-portfolio\node_modules\.pnpm\rx@4.1.0\node_modules\rx\dist\rx.js:1772:14)

  ModuleBuildError: Module build failed (from ./node_modules/.pnpm/svg-react-loader@0.4.6/node_modules/svg-react-loader/lib/loader.js):
  Error: Invalid character entity
  Line: 12
  Column: 52
  Char: ;

  - sax.js:651 error
    [massick-portfolio]/[sax@1.2.4]/[sax]/lib/sax.js:651:10

  - sax.js:677 strictFail
    [massick-portfolio]/[sax@1.2.4]/[sax]/lib/sax.js:677:7

  - sax.js:937 parseEntity
    [massick-portfolio]/[sax@1.2.4]/[sax]/lib/sax.js:937:7

  - sax.js:1485 SAXParser.write
    [massick-portfolio]/[sax@1.2.4]/[sax]/lib/sax.js:1485:31

  - xml2js.js:508 Parser.exports.Parser.Parser.parseString
    [massick-portfolio]/[xml2js@0.4.17]/[xml2js]/lib/xml2js.js:508:31

  - xml2js.js:7 Parser.parseString
    [massick-portfolio]/[xml2js@0.4.17]/[xml2js]/lib/xml2js.js:7:59

  - parse.js:16 AnonymousObservable.__subscribe
    [massick-portfolio]/[svg-react-loader@0.4.6]/[svg-react-loader]/lib/xml/parse.js:16:16

  - rx.js:63 AnonymousObservable.tryCatcher
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:63:31

  - rx.js:5845 setDisposable
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:5845:44

  - rx.js:5862 AnonymousObservable.Rx.AnonymousObservable.AnonymousObservable._subscribe
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:5862:9

  - rx.js:2034 AnonymousObservable.Rx.Observable.observableProto.subscribe.observableProto.forEach
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:2034:19

  - rx.js:3255 CatchObserver.error
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:3255:30

  - rx.js:1772 CatchObserver.Rx.internals.AbstractObserver.AbstractObserver.onError
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:1772:14

  - rx.js:63 CatchObserver.tryCatcher
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:63:31

  - rx.js:5891 AutoDetachObserverPrototype.error
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:5891:52

  - rx.js:1772 AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onError
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:1772:14

  - NormalModule.js:751 processResult
    [massick-portfolio]/[webpack@5.65.0]/[webpack]/lib/NormalModule.js:751:19

  - NormalModule.js:853 
    [massick-portfolio]/[webpack@5.65.0]/[webpack]/lib/NormalModule.js:853:5

  - LoaderRunner.js:399 
    [massick-portfolio]/[loader-runner@4.2.0]/[loader-runner]/lib/LoaderRunner.js:399:11

  - LoaderRunner.js:251 
    [massick-portfolio]/[loader-runner@4.2.0]/[loader-runner]/lib/LoaderRunner.js:251:18

  - LoaderRunner.js:124 AnonymousObserver.context.callback [as _onError]
    [massick-portfolio]/[loader-runner@4.2.0]/[loader-runner]/lib/LoaderRunner.js:124:13

  - rx.js:1836 AnonymousObserver.Rx.AnonymousObserver.AnonymousObserver.error
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:1836:12

  - rx.js:1772 AnonymousObserver.Rx.internals.AbstractObserver.AbstractObserver.onError
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:1772:14

  - rx.js:63 AnonymousObserver.tryCatcher
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:63:31

  - rx.js:5891 AutoDetachObserverPrototype.error
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:5891:52

  - rx.js:1772 AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onError
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:1772:14

  - rx.js:5413 InnerObserver.error
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:5413:14

  - rx.js:1772 InnerObserver.Rx.internals.AbstractObserver.AbstractObserver.onError
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:1772:14

  - rx.js:63 InnerObserver.tryCatcher
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:63:31

  - rx.js:5891 AutoDetachObserverPrototype.error
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:5891:52

  - rx.js:1772 AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onError
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:1772:14

  - rx.js:63 AutoDetachObserver.tryCatcher
    [massick-portfolio]/[rx@4.1.0]/[rx]/dist/rx.js:63:31

not finished Building development bundle - 23.647s

 ELIFECYCLE  Command failed with exit code 1.

gatsby info:

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i3-6100 CPU @ 3.70GHz  
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE      
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD        
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (94.0.992.50)
  npmPackages:
    gatsby: ^4.4.0 => 4.4.0
    gatsby-plugin-dark-mode: ^1.1.2 => 1.1.2
    gatsby-plugin-feed: ^4.4.0 => 4.4.0
    gatsby-plugin-gatsby-cloud: ^4.4.0 => 4.4.0
    gatsby-plugin-google-analytics: ^4.4.0 => 4.4.0
    gatsby-plugin-image: ^2.4.0 => 2.4.0
    gatsby-plugin-intl: ^0.3.3 => 0.3.3
    gatsby-plugin-manifest: ^4.4.0 => 4.4.0
    gatsby-plugin-netlify: ^3.14.0 => 3.14.0
    gatsby-plugin-offline: ^5.4.0 => 5.4.0
    gatsby-plugin-pnpm: ^1.2.9 => 1.2.9
    gatsby-plugin-postcss: ^5.4.0 => 5.4.0
    gatsby-plugin-react-helmet: ^5.4.0 => 5.4.0
    gatsby-plugin-react-svg: ^3.1.0 => 3.1.0
    gatsby-plugin-sharp: ^4.4.0 => 4.4.0
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.26 => 1.1.26
    gatsby-remark-copy-linked-files: ^5.4.0 => 5.4.0
    gatsby-remark-images: ^6.4.0 => 6.4.0
    gatsby-remark-prismjs: ^6.4.0 => 6.4.0
    gatsby-remark-responsive-iframe: ^5.4.0 => 5.4.0
    gatsby-remark-smartypants: ^5.4.0 => 5.4.0
    gatsby-source-filesystem: ^4.4.0 => 4.4.0
    gatsby-transformer-remark: ^5.4.0 => 5.4.0
    gatsby-transformer-sharp: ^4.4.0 => 4.4.0
  npmGlobalPackages:
    gatsby-cli: 4.2.0

If you want to reproduce it, this is my repo. Run pnpm dev on it.