Comments (5)
Your webpack treats SVG files differently hence the error.
Configure your SVG file loading properly.
Example of React SVG loading:
https://github.com/catamphetamine/webpack-isomorphic-tools#svg-react-loader-css-stylesheets-with-css-modules-feature
from webpack-isomorphic-tools.
from webpack-isomorphic-tools.
Thanks. I know it may seem like an error in webpack config, but if you look in the files in the gist webpack is configured properly:
{
test: webpackIsomorphicToolsPlugin.regularExpression('files'),
include: /src\/files/,
loader: 'file-loader',
options: {
name: env.dev ? '[path][name].[ext]' : 'assets/[hash:12].[ext]'
}
}
if I console.log it I get:
{
test: /\.(png|jpg|gif|ico|svg|xml|json)$/,
include: /src\/files/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
isomorphic config has correct extensions, too:
module.exports = env => ({
webpack_assets_file_path: env.dev
? '../webpack.assets.json'
: '../dist/webpack-assets.json',
debug: true,
assets: {
files: {
extensions: [
'png',
'jpg',
'gif',
'ico',
'svg',
'xml',
'json'
],
include: [
/src\/files/
]
}
}
})
and in the assets the .svg file is correctly resolved:
"./files/icons/down.svg": "http://localhost:8081/files/icons/down.svg"
it also appears in the stats:
{
"name": "files/icons/down.svg",
"size": 875,
"chunks": [],
"chunkNames": [],
"emitted": false
}
The same thing happens to any file, not just svgs:
[webpack-isomorphic-tools] [debug] require() called for /Users/egorovli/Dev/project/src/files/images/cover.jpg
[webpack-isomorphic-tools] [debug] skipping require call for ./files/images/cover.jpg
[require-hacker] [debug] Fallback to original loader
/Users/egorovli/Dev/project/src/files/images/cover.jpg:1
(function (exports, require, module, __filename, __dirname) { ����
^
SyntaxError: Invalid or unexpected token
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:152:10)
at Module._compile (module.js:605:28)
at Module._extensions..js (module.js:652:10)
at newLoader (/Users/egorovli/Dev/project/node_modules/pirates/lib/index.js:96:7)
at Object._module2.default._extensions.(anonymous function) [as .jpg] (/Users/egorovli/Dev/project/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:293:60)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
at Module.require (module.js:585:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/egorovli/Dev/project/src/client/components/Landing/index.jsx:7:1)
at Module._compile (module.js:641:30)
at Module._compile (/Users/egorovli/Dev/project/node_modules/pirates/lib/index.js:91:24)
at Module._extensions..js (module.js:652:10)
at Object.newLoader [as .jsx] (/Users/egorovli/Dev/project/node_modules/pirates/lib/index.js:96:7)
[nodemon] app crashed - waiting for file changes before starting...
😞
from webpack-isomorphic-tools.
Ok, I think I've found the culprit here, if I remove
include: [
/src\/files/
]
from isomorphic config, everything works. Since I guess the relative path gets tested (./files/images/cover.jpg
), not the absolute one. I replaced it with:
include: [
/\.\/files/
]
from webpack-isomorphic-tools.
from webpack-isomorphic-tools.
Related Issues (20)
- Seems like my webpack.config.js file is getting ignored HOT 1
- Error while wepback build HOT 2
- Is it possible to have _style property in production using ExtractTextPlugin loader HOT 2
- webpack_asset_path is not defined HOT 3
- Keep getting errors module not defined and exports not defined HOT 9
- Ability to ignore warnings / errors HOT 6
- Ability to specify publicPath at runtime for server-side? HOT 1
- Inside CSS, background-url is packaged into absolute paths HOT 1
- Support for compression webpack plugin (js.gz) HOT 1
- Resolving webpack custom module paths HOT 1
- webpack-isomorphic-tools/plugin ReferenceError: window is not defined HOT 11
- Depreciation for webpack 4x HOT 2
- Clarification in README HOT 2
- mini-css-extract-plugin HOT 1
- anyway to define __webpack_public_path__ or cdn? HOT 15
- Webpack resolve extensions not working with SSR
- Babel 7 is not supported HOT 4
- (/config/webpack-assets.json not found) HOT 1
- Unexpected token less file HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-isomorphic-tools.