Create-react-app: SVG Files are not included in the dev bundle.

[chrisjpatty]

Can you reproduce the problem with latest npm?

Yes

Description

SVG files fail to be included in the development bundle.

This occurs when the image is imported like so:
import Logo from '../../common/img/logo.svg';
and used like so:
<img src={Logo} />

Other image files (.png, .jpg, etc) render as expected, but SVG files never come through.

Expected behavior

SVG images should load as normal.

Actual behavior

Renders as a broken <img /> tag. When the URL to the image, as output by Webpack, is entered into the URL bar, it renders this error: "error on line 1 at column 1: Document is empty".

Environment

Node version 7.9.0
NPM version 4.2.0
Windows 10 | Version 1703 | OS Build 15063.0
Google Chrome | 58.0.3029.81 (64-bit)

Reproducible Demo

Due to some time constraints, I can't make a demo at the moment. If you can't reproduce this issue let me know and I'll try to get a demo up.

[alisonmonteiro]

@chrisjpatty how the .svg file looks like (the code)?

[gaearon]

A demo would help greatly.

[chrisjpatty]

@alisonmonteiro Here is a sample of the SVG code. I've omitted the majority of the paths for the sake of brevity.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.27 42.45">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }
    </style>
  </defs>
  <title>ND-Logo</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <g>
        <g>
          <path class="cls-1" d="M21.23,0A21.23,21.23,0,1,0,42.45,21.5q0-.13,0-.27A21.23,21.23,0,0,0,21.23,0Zm-.17,42.07A20.88,20.88,0,0,1,.37,21.6q0-.26,0-.52a20.85,20.85,0,1,1,20.7,21Z"/>
          <rect class="cls-1" x="16.23" y="12.9" width="1.95" height="0.11"/>
          <polygon class="cls-1" points="15.82 14.11 17.57 14.11 17.55 14.01 15.82 14.01 15.82 14.11"/>
        </g>
        <g>
          <path class="cls-1" d="M61.83,19.65H59.29L53,9.53H53l0,.56q.12,1.61.12,3v6.6H51.25V7h2.52L60,17h.05q0-.2-.07-1.45t-.05-2V7h1.9Z"/>
          <path class="cls-1" d="M73.49,14.83a5.25,5.25,0,0,1-1.21,3.67,4.33,4.33,0,0,1-3.36,1.32,4.6,4.6,0,0,1-2.38-.61,4,4,0,0,1-1.59-1.75,5.94,5.94,0,0,1-.56-2.64,5.21,5.21,0,0,1,1.2-3.65A4.34,4.34,0,0,1,69,9.87a4.23,4.23,0,0,1,3.3,1.34A5.18,5.18,0,0,1,73.49,14.83Zm-7,0q0,3.33,2.46,3.33t2.43-3.33q0-3.29-2.45-3.29a2.09,2.09,0,0,0-1.86.85A4.33,4.33,0,0,0,66.5,14.83Z"/>
        </g>
      </g>
    </g>
  </g>
</svg>

[alisonmonteiro]

@chrisjpatty just copied your svg and saved as a file and:

import Logo from '../logo.svg';
// ...
render() {
  return (
    <header>
      <img src={Logo} />
    </header>
  )
}

no errors at all. 👍
As @gaearon said, a demo would help greatly.

[chrisjpatty]

@gaearon @alisonmonteiro Alright, I've got a demo you can look at. You'll notice the header image is a broken link, and if you look at the actual file, it's been stripped down to a single line of code:

module.exports = __webpack_public_path__ + "public/fonts/ND-Logo.svg";

Hopefully this is what you need to troubleshoot this issue. Let me know what else I can provide and thank you for the help!

*Edit: * Whoops, forgot to include the link: Broken SVG Demo

[gaearon]

Sorry, where can we find the demo?

[chrisjpatty]

@gaearon Sorry, forgot to paste it. Demo

[gaearon]

Is it possible to also share the source?

[chrisjpatty]

I don't know that my employer would love if I shared the whole source, but I could probably share some of the files. Which files do you think would be most useful?

[gaearon]

The file that imports the SVG, the SVG file, and their exact locations in the source tree.

[chrisjpatty]

Sure, I can do that. Here's an abbreviated sample of the structure:

|   actions.js
|   App.js
|   App.test.js
|   index.js     <---Webpack Entry
|   print.txt
|   requests.js
|   Routes.js
|   store.js
|   
+---common
|   \---img
|           ND-Logo.svg      <---Valid SVG  
\---components      
    +---Shell
    |       Shell.js    <---File that imports the SVG
    |       Shell.scss

And a zip folder containing Shell.js, ND-Logo.svg, and my webpack config files.
Broken SVG Files.zip

[gaearon]

Is everything inside src folder?

[gaearon]

and my webpack config files.

Do you mean that you ejected? On which version of react-scripts were you on?

[chrisjpatty]

Yeah, everything is inside of src. I ejected so that I could add SASS to the Webpack pipeline, but that's the only alteration. How can I check what version of react-scripts I was on?

[chrisjpatty]

I'm not sure how to check the version, but I used the tool on 4/17/2017 and ejected that very same day.

[gaearon]

You can find the commit in which you ejected, and it will contain removal of react-scripts from package.json (along with the version).

[chrisjpatty]

I actually ejected immediately unfortunately, so it doesn't show up in my initial commit.

[chrisjpatty]

But if it's helpful, here is my full package.json at this point:

{
  "name": "react-web-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "clone": "^2.1.1",
    "deep-freeze": "0.0.1",
    "ease-component": "^1.0.0",
    "element-resize-detector": "^1.1.11",
    "moment": "^2.18.1",
    "mouse-event-offset": "^3.0.2",
    "react": "^15.5.4",
    "react-datepicker": "^0.46.0",
    "react-dom": "^15.5.4",
    "react-drag-and-drop": "^2.4.0",
    "react-input-range": "^1.1.2",
    "react-markdown": "^2.5.0",
    "react-motion": "^0.4.8",
    "react-portal": "^3.0.0",
    "react-radio-group": "^3.0.1",
    "react-redux": "^5.0.4",
    "react-resize-detector": "^0.3.3",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-svg": "^2.1.19",
    "react-visibility-sensor": "^3.9.0",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "scroll": "^2.0.0",
    "scroll-doc": "^0.1.3",
    "shortid": "^2.2.8",
    "whatwg-fetch": "^2.0.2",
    "x2js": "^3.1.1"
  },
  "devDependencies": {
    "autoprefixer": "6.7.2",
    "babel-core": "6.22.1",
    "babel-eslint": "7.1.1",
    "babel-jest": "18.0.0",
    "babel-loader": "6.2.10",
    "babel-preset-react-app": "^2.2.0",
    "babel-runtime": "^6.20.0",
    "case-sensitive-paths-webpack-plugin": "1.1.4",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.3.0",
    "cross-spawn": "4.0.2",
    "css-loader": "0.26.1",
    "detect-port": "1.1.0",
    "dotenv": "2.0.0",
    "eslint": "3.16.1",
    "eslint-config-react-app": "^0.6.2",
    "eslint-loader": "1.6.0",
    "eslint-plugin-flowtype": "2.21.0",
    "eslint-plugin-import": "2.0.1",
    "eslint-plugin-jsx-a11y": "4.0.0",
    "eslint-plugin-react": "6.4.1",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.10.0",
    "fs-extra": "0.30.0",
    "html-webpack-plugin": "2.24.0",
    "http-proxy-middleware": "0.17.3",
    "jest": "18.1.0",
    "json-loader": "0.5.4",
    "node-sass": "^4.5.2",
    "object-assign": "4.1.1",
    "postcss-loader": "1.2.2",
    "promise": "7.1.1",
    "react-dev-utils": "^0.5.2",
    "sass-loader": "^6.0.3",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.14.0",
    "webpack-dev-server": "1.16.2",
    "webpack-manifest-plugin": "1.1.0",
    "whatwg-fetch": "2.0.2"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    }
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

[gaearon]

It would really help if you could try reproducing this in a freshly created app, or trim down your app to the minimal amount files necessary to reproduce (and then share the runnable project).

[chrisjpatty]

I'll see what I can do. Thanks for your help so far!

[chrisjpatty]

Got it! Here's a trimmed down version of the source that you can compile.
broken-svg-src.zip

[gaearon]

Tagging as a bug and needing help. Would appreciate somebody looking into it!

[existentialism]

@chrisjpatty did you add:

{
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          loader: 'file?name=public/fonts/[name].[ext]'
}

to your webpack.config.dev.js?

[chrisjpatty]

I don't believe so, I only added the scss loader. I'm away from my computer, but I'll check through my commits to make sure I didn't paste over it on accident somewhere.

[Timer]

I believe it's worth noting that you do not need to eject to use Sass, you can read how to do that in our docs.

[chrisjpatty]

@existentialism No, I've checked my commits and I never added that piece. But it turns out that it's the piece that was breaking it. Removing that line seems to have fixed it.