Webpack 3 SVG-Ladefehler

Question

Nicht sicher, warum ich diesen Fehler erhalte, da das Webpack genauso eingerichtet ist wie ein älteres Projekt.

ERROR in ./app/static/imgs/sketch.svg 
Module parse failed: /Users/leongaban/projects/personal/CoinHover/coinhover.io/app/static/imgs/sketch.svg Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
| <?xml version="1.0" encoding="UTF-8"?> 
| <svg width="400px" height="400px" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
|  <!-- Generator: Sketch 47 (45396) - http://www.bohemiancoding.com/sketch --> 
@ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./app/coinhover.scss 6:13780-13815 
error Command failed with exit code 2. 
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 

Die _svg.scss Datei:

.close-x { 
    position: relative; 
    background-size: 400px 400px; 
    background-image: url('static/imgs/sketch.svg'), none; 
} 

.close-x { 
    width: 30px; 
    height: 30px; 
    background-position: -41px -2px; 
    cursor: pointer; 
} 

package.json

{ 
    "name": "coinhover", 
    "version": "0.0.2", 
    "main": "index.js", 
    "author": "Leon Gaban", 
    "license": "MIT", 
    "scripts": { 
    "start": "webpack && webpack-dev-server", 
    "dev": "webpack-dev-server", 
    "build": "webpack -p", 
    "production": "webpack -p", 
    "test": "eslint app && jest", 
    "test:fix": "eslint --fix app" 
    }, 
    "now": { 
    "name": "coinhover", 
    "engines": { 
     "node": "7.4.x" 
    }, 
    "alias": "coinhover.io" 
    }, 
    "jest": { 
    "moduleNameMapper": {}, 
    "moduleFileExtensions": [ 
     "js", 
     "jsx" 
    ], 
    "moduleDirectories": [ 
     "node_modules" 
    ] 
    }, 
    "dependencies": { 
    "axios": "^0.16.2", 
    "babel-runtime": "^6.23.0", 
    "chalk": "^2.1.0", 
    "prop-types": "^15.5.10", 
    "ramda": "^0.24.1", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-hot-loader": "^1.3.1", 
    "react-redux": "^5.0.5", 
    "react-router": "^4.1.2", 
    "react-router-dom": "^4.1.2", 
    "redux": "^3.7.2", 
    "redux-thunk": "^2.2.0", 
    "svg-loader": "^0.0.2" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.1", 
    "babel-plugin-transform-async-to-generator": "^6.24.1", 
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1", 
    "babel-plugin-transform-runtime": "^6.23.0", 
    "babel-polyfill": "^6.23.0", 
    "babel-preset-env": "^1.6.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-react-hmre": "^1.1.1", 
    "babel-preset-stage-0": "^6.24.1", 
    "copy-webpack-plugin": "^4.0.1", 
    "css-loader": "^0.28.4", 
    "enzyme": "^2.9.1", 
    "enzyme-to-json": "^1.5.1", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "html-webpack-plugin": "^2.29.0", 
    "jest": "^20.0.4", 
    "node-sass": "^4.5.3", 
    "react-test-renderer": "^15.6.1", 
    "redux-mock-store": "^1.2.3", 
    "sass-loader": "^6.0.6", 
    "style-loader": "^0.18.2", 
    "url-loader": "^0.5.9", 
    "webpack": "^3.3.0", 
    "webpack-dev-server": "^2.5.1" 
    } 
} 

webpack

import webpack from 'webpack'; 
import HtmlWebpackPlugin from 'html-webpack-plugin'; 
import ExtractTextPlugin from 'extract-text-webpack-plugin'; 
import CopyWebpackPlugin from 'copy-webpack-plugin'; 
import path from 'path'; 
import chalk from 'chalk'; 

const coinhover = path.resolve(__dirname, 'coinhover'); 
const app = path.resolve(__dirname, 'app'); 
const log = console.log; 
// https://gist.github.com/leongaban/dc92204454b3513e511645af98107775 

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: `${__dirname}/app/index.html`, 
    filename: 'index.html', 
    inject: 'body' 
}); 

const ExtractTextPluginConfig = new ExtractTextPlugin({ 
    filename: 'coinhover.css', 
    disable: false, 
    allChunks: true 
}); 

const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: 'app/static', to: 'static' }]); 

const PATHS = { 
    app, 
    build: coinhover 
}; 

const LAUNCH_COMMAND = process.env.npm_lifecycle_event; 

const isProduction = LAUNCH_COMMAND === 'production'; 
process.env.BABEL_ENV = LAUNCH_COMMAND; 

const productionPlugin = new webpack.DefinePlugin({ 
    'process.env': { 
    NODE_ENV: JSON.stringify('production') 
    } 
}); 

const base = { 
    entry: [ 
    PATHS.app 
    ], 
    output: { 
    path: PATHS.build, 
    filename: 'index_bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     use: ['babel-loader'] 
     }, 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'sass-loader'], 
      publicPath: coinhover 
     }) 
     } 
    ], 
    loaders: [ 
     { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, 
     { 
     test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/, 
     loader: 'url-loader?limit=100000' 
     } 
    ] 
    }, 
    resolve: { modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'] } 
    // resolve: { 
    // modules: ['node_modules', path.resolve(__dirname, '/app')] 
    // } 
}; 

const developmentConfig = { 
    devServer: { 
    publicPath: '', 
    contentBase: path.join(__dirname, 'dist'), 
    quiet: true, 
    inline: true, 
    compress: true, 
    stats: 'errors-only', 
    open: true 
    }, 
    devtool: 'cheap-module-inline-source-map', 
    plugins: [ 
    CopyWebpackPluginConfig, 
    ExtractTextPluginConfig, 
    HtmlWebpackPluginConfig 
    ] 
}; 

const productionConfig = { 
    devtool: 'cheap-module-source-map', 
    plugins: [ 
    CopyWebpackPluginConfig, 
    ExtractTextPluginConfig, 
    HtmlWebpackPluginConfig, 
    productionPlugin 
    ] 
}; 

log(`${chalk.magenta(' ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`); 

export default Object.assign({}, base, 
    isProduction === true ? productionConfig : developmentConfig 
); 

Answer 1

Ich weiß nicht, ob es in der von Ihnen verwendeten Version von Webpack mehrdeutig ist (ich habe 1.15.0 verwendet), aber Webpack hat Probleme beim Parsing bestimmter <xml> Tags und innerhalb des <svg> Elements gibt es manchmal xmls/xmlns Attribute, die Webpack Probleme hat Parsing. Dies sind in der Regel fehlerhafte verbose Reste von Illustrator oder anderen SVG-generierenden Anwendungen. Ich hatte einen sehr ähnlichen, wenn nicht identischen Fehler, bei dem Webpack im Fehlerbildschirm nach einem Loader gefragt hat.

Ich wette, wenn Sie Ihr „sketch.svg“ Dokument des <xml> Tag Wrapper Streifen und möglicherweise die xmlns Attribute auch Webpack erfolgreich kompiliert werden.

(Boo zu den Benutzern, die über Stackoverflow Best Practices meckern und nicht versuchen, selbst zu helfen.)