SVG Files are not included in the dev bundle.

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.

@chrisjpatty

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

A demo would help greatly.

@alisonmonteiro

@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>

@chrisjpatty

@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.

@gaearon

@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

Sorry, where can we find the demo?

@gaearon

@gaearon Sorry, forgot to paste it. Demo

Is it possible to also share the source?

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?

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

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

Is everything inside src folder?

and my webpack config files.

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

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?

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

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

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"
  }
}

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).

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

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

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

@chrisjpatty

@chrisjpatty did you add:

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

to your webpack.config.dev.js?

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.

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.

@existentialism

@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.

Navigation Menu

Repository navigation

SVG Files are not included in the dev bundle. #2065

Can you reproduce the problem with latest npm?

Description

Expected behavior

Actual behavior

Environment

Reproducible Demo

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

SVG Files are not included in the dev bundle. #2065

Description

Can you reproduce the problem with latest npm?

Description

Expected behavior

Actual behavior

Environment

Reproducible Demo

Activity

alisonmonteiro commented on May 4, 2017

gaearon commented on May 4, 2017

chrisjpatty commented on May 4, 2017

alisonmonteiro commented on May 4, 2017

chrisjpatty commented on May 5, 2017

gaearon commented on May 5, 2017

chrisjpatty commented on May 5, 2017

gaearon commented on May 5, 2017

chrisjpatty commented on May 5, 2017

gaearon commented on May 5, 2017

chrisjpatty commented on May 5, 2017

gaearon commented on May 5, 2017

gaearon commented on May 5, 2017

chrisjpatty commented on May 5, 2017

chrisjpatty commented on May 5, 2017

1 remaining item

chrisjpatty commented on May 5, 2017

chrisjpatty commented on May 5, 2017

gaearon commented on May 5, 2017

chrisjpatty commented on May 5, 2017

chrisjpatty commented on May 5, 2017

gaearon commented on May 5, 2017

existentialism commented on May 5, 2017

chrisjpatty commented on May 5, 2017

Timer commented on May 5, 2017

chrisjpatty commented on May 5, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions