Do I have it setup correctly?

[StefKors]

Hi I've been trying to install the next-svgr package. when trying to use it I get the following errors:

Warning: <data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTdweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTcgMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU2ICg4MTU4OCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+TG91cGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iTG91cGUiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJHcm91cC02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9IiMxRDFEMUQiIHN0cm9rZS13aWR0aD0iMiI+CiAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSI2IiBjeT0iNiIgcj0iNiI+PC9jaXJjbGU+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMTAuNSBMMTUsMTYiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4= /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    in data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTdweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTcgMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU2ICg4MTU4OCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+TG91cGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iTG91cGUiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJHcm91cC02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9IiMxRDFEMUQiIHN0cm9rZS13aWR0aD0iMiI+CiAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSI2IiBjeT0iNiIgcj0iNiI+PC9jaXJjbGU+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMTAuNSBMMTUsMTYiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4= (at Loupe.js:6)
    in Loupe (at Search.js:9)
    in a (at Search.js:9)
    in Link (at Search.js:8)
    in Search (at Navigation.js:13)
    in section (at Menu.js:55)
    in div (at Menu.js:54)
    in Query (at Menu.js:48)
    in Menu
    in Context.Provider
    in ConnectFunction
    in ConnectFunction (at Navigation.js:12)
    in nav (at Navigation.js:10)
    in Navigation (at pages/index.js:28)
    in div (at pages/index.js:26)
    in Index (at _app.js:21)
    in Context.Provider
    in ApolloProvider (at _app.js:20)
    in Context.Provider
    in Provider (at _app.js:19)
    in Context.Provider
    in ApolloProvider (at _app.js:18)
    in Container (at _app.js:17)
    in MyApp (at with-redux-store.js:47)
    in AppWithRedux (at with-apollo-client.js:59)
    in withApollo(App)
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer
Invariant Violation: Invalid tag: data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0ivvrgltgipz4kphn2zyb3awr0ad0imtdwecigagvpz2h0psixohb4iib2awv3qm94psiwidagmtcgmtgiihzlcnnpb249ijeumsigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3zniib4bwxuczp4bgluaz0iahr0cdovl3d3dy53my5vcmcvmtk5os94bgluayi+ciagica8is0tiedlbmvyyxrvcjogu2tldgnoidu2icg4mtu4ockglsbodhrwczovl3nrzxrjac5jb20gls0+ciagica8dgl0bgu+tg91cgu8l3rpdgxlpgogicagpgrlc2m+q3jlyxrlzcb3axroifnrzxrjac48l2rlc2m+ciagica8zybpzd0itg91cguiihn0cm9rzt0ibm9uzsigc3ryb2tllxdpzhropsixiibmawxspsjub25liibmawxslxj1bgu9imv2zw5vzgqipgogicagicagidxniglkpsjhcm91cc02iib0cmfuc2zvcm09inryyw5zbgf0zsgxljawmdawmcwgms4wmdawmdapiibzdhjva2u9iimxrdfemuqiihn0cm9rzs13awr0ad0imii+ciagicagicagicagidxjaxjjbgugawq9ik92ywwiign4psi2iibjet0iniigcj0inii+pc9jaxjjbgu+ciagicagicagicagidxwyxroigq9ik05ljusmtaunsbmmtusmtyiiglkpsjmaw5lij48l3bhdgg+ciagicagicagpc9npgogicagpc9npgo8l3n2zz4=
    at invariant (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:58:15)
    at validateDangerousTag (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:2637:34)
    at ReactDOMServerRenderer.renderDOM (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:3463:5)
    at ReactDOMServerRenderer.render (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:3237:21)
    at ReactDOMServerRenderer.read (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
    at renderToString (/Users/stef/Code/kor.utrecht.nl/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27)
    at render (/Users/stef/Code/kor.utrecht.nl/node_modules/next-server/dist/server/render.js:81:16)
    at renderPage (/Users/stef/Code/kor.utrecht.nl/node_modules/next-server/dist/server/render.js:230:20)
    at _callee2$ (/Users/stef/Code/kor.utrecht.nl/.next/server/static/development/pages/_document.js:931:24)
    at tryCatch (/Users/stef/Code/kor.utrecht.nl/node_modules/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (/Users/stef/Code/kor.utrecht.nl/node_modules/regenerator-runtime/runtime.js:271:22)
    at Generator.prototype.<computed> [as next] (/Users/stef/Code/kor.utrecht.nl/node_modules/regenerator-runtime/runtime.js:97:21)
    at asyncGeneratorStep (/Users/stef/Code/kor.utrecht.nl/.next/server/static/development/pages/_document.js:283:24)
    at _next (/Users/stef/Code/kor.utrecht.nl/.next/server/static/development/pages/_document.js:305:9)
    at /Users/stef/Code/kor.utrecht.nl/.next/server/static/development/pages/_document.js:312:7
    at new Promise (<anonymous>) {
  name: 'Invariant Violation',
  framesToPop: 1

My next.config.js looks like this:

const withOffline = require('next-offline')
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const sass = require('@zeit/next-sass')
const path = require('path')
const withSvgr = require("next-svgr");

module.exports = withPlugins([
  [withOffline],
  {
    webpack(config, options) {
      config.resolve.alias['components'] = path.join(__dirname, 'components')
      config.resolve.alias['static'] = path.join(__dirname, 'static')
      config.resolve.alias['images'] = path.join(__dirname, 'assets/images')
      config.resolve.alias['svg'] = path.join(__dirname, 'assets/svg')
      config.resolve.alias['assets'] = path.join(__dirname, 'assets')
      config.resolve.alias['styles'] = path.join(__dirname, 'styles')
      return config
    },
  },
  [
    sass,
    {
      cssModules: true,
      cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: '[local]___[hash:base64:5]',
      },
    },
  ],
  [withImages],
  [withSvgr],
])

my component

import SvgIcon from './Loupe.svg'

const Loupe = () => {
  return <SvgIcon />
}

export default Loupe

[Anomen]

Sorry, didn't see your message. Did you figure it out?

[StefKors]

I didn’t after try for an hour I moved to a different package

[chriscamplin]

for anyone else coming here from google I fixed this issue by adding to the next-images config: { fileExtensions: ["jpg", "jpeg", "png", "gif"], }

Being sure to leave out SVG.