Next.js: import svg (path must be a string or Buffer)

[flieks]

for me this example doesn't work
https://github.com/zeit/next.js/tree/master/examples/svg-components

npm install babel-plugin-inline-react-svg --save-dev

.babelrc:

{
  "plugins": [
    [
      "module-resolver", {
        "root": ["."],
        "alias": {
          "styles": "./styles"
        },
        "cwd": "babelrc"
    }],
    [
      "wrap-in-js",
      {
        "extensions": ["css$"]
      }
    ],
    ["inline-react-svg"]
  ],
  "presets": [
    "next/babel"
  ],
  "ignore": []
}

and i get

Module build failed: 
TypeError: C:/Users/.../src/components/header/View.js: path must be a string or Buffer
    at TypeError (native)
    at Object.fs.openSync (fs.js:641:18)
    at fs.readFileSync (fs.js:509:33)
    at PluginPass.ImportDeclaration (C:\Users\...\node_modules\babel-plugin-inline-react-svg\lib\index.js:63:50)
    at newFn (C:\Users\...\node_modules\babel-traverse\lib\visitors.js:276:21)

tried with multiple sources of svg's. There content looks fine

[timneutkens]

Just tried the example and it works for me. Maybe there's a windows bug in inline-react-svg?

[aviramga]

@flieks I got the same issue, works on mac but not on Debian. Were you able to solve it?

[TonyHYK]

i'm running into the same problem, but the example works for me.

[TonyHYK]

it turns out that the module resolver might be causing some problems with it, i used a relative path for the svg and it works...

[aviramga]

@TonyHYK what is the module resolver? Im importing the SVG also with a relative path and it works on my Mac doesn't work on my Ubuntu remote server

[TonyHYK]

https://www.npmjs.com/package/babel-plugin-module-resolver

i'm using the Linux subsystem on windows 10 and my app deployed via now also works fine

[aviramga]

So wait, using this module caused this issue? or using it solved it?

[TonyHYK]

the module allowed me to use absolute paths, but was incompatible with svgs, so I went back to using relative paths, obviating the need to rely on the module to resolve the path and the svg loaded correctly

[aviramga]

Strange, I already use relative paths and still have this issue.....

[aviramga]

Could be because Im using it with the next export?

[TonyHYK]

what do you mean? do you have an example?

[aviramga]

Not one that I can share. Its on a private repo. But the use case is very simple. I used the static export example (https://github.com/zeit/next.js/tree/master/examples/with-static-export) as a boilerplate. Added the inline-svg plugin. I then used it like this

import { PureComponent } from "react";
import OutlineButton from "./outline-button/outline-button-component";
import componentStyles from "./navbar-component.css";
import MondayLogo from "../../../static/monday-logos/monday6-temp-logo.svg";

export default class NavbarComponent extends PureComponent {
  render() {
    return (
      <header>
        <nav className="navbar" id="navbar-fixed" role="navigation">
          <div className="homepage-logo">
            <MondayLogo />
          </div>
          <div className="navbar-menu">
            <OutlineButton className="navbar-login" url="https://auth.monday.com/login" text="Log In" theme="dark" />
            <div className="menu" />
          </div>
        </nav>
        <div className="navbar-padding" />
        <style jsx>{componentStyles}</style>
      </header>
    );
  }
}

Hope this helps

[TonyHYK]

ah ok, I'm not too sure then. I think it would be better for someone with more knowledge on babel and next to speak to this...

[flieks]

@aviramga no couldn't fix it. I did copy paste the vector html code inside a wrapper component but this is alot of work if many svg files

[randallagordon]

Though entirely unrelated to Next.js, I bumped into this error while using babel-inline-react-svg and it turned out to be a stray uppercase character in the filename of the SVG.

OSX's file system preserves case—but will happily load x.svg instead of the X.svg I accidentally specified in the import! Most file systems, however...not so happy to play ball.