Cannot load SVG as React Component
seleckis opened this issue · comments
I cannot make any of svg loaders work with webpack-isomorphic-tools. I tried a lot of different loaders like react-svg-loader, svg-react-loader and configurations from { test: /\.svg$/, loader: 'svg-react' } to { test: /\.svg$/, loader: 'file!babel!svg-react…' } with no luck.
webpack-isomorphic-tools mostly throws an error:
[webpack-isomorphic-tools] [error] asset not found: ./src/app/theme/svg-icons/bullet.svg
or
./src/app/theme/svg-icons/bullet.svg
[0] Module build failed: Error: Non-whitespace before first tag.
I tried to parse url in webpack-isomorphic-tools with WebpackIsomorphicToolsPlugin.url_loader_parser same errors occures.
Is there a workaround how can I use webpack-isomorphic-tools to get this work?
import SVGicon from '../../theme/svg-icons/bullet.svg';
export const TextWithIcon = ({text}) => <div><SVGIcon />{text}</div>svg-inline-loader is deprecated, svg-inline-react wans about using require in expression.
Please help!
Module build failed: is a webpack error and it's not related to the tools.
Post your webpack-assets.json
nothing interseting here:
{
"javascript": {
"main": "http://localhost:3001/dist/main-85fe4646276c76893fba.js"
},
"styles": {},
"assets": {
"./src/app/theme/styles/theme.scss": {
"_style": "…here goes styles…"
}
}
}
I have another project where is only client side rendering, and there loader: 'babel!react-svg' works perfectly.
No svg files in the assets which means they aren't being included.
Either you haven't added an asset type for svg in tools configuration, or your asset filter doesn't filter svg files properly and leaves them out instead.
you haven't added an asset type for svg in tools configuration, or your asset filter doesn't filter svg files properly and leaves them out instead.
What means "properly"? Now SVG is in a list of images in webpack-isomorphic-tools.js.
I tried to add a separate extension:
svg: {
extension: 'svg',
parser: WebpackIsomorphicToolsPlugin.url_loader_parser
},with or without parser, and get an evil error:
[webpack-isomorphic-tools/plugin] [error] More than a single candidate module was found in webpack stats for require()d path "fbjs/lib/ExecutionEnvironment"
[0] [webpack-isomorphic-tools/plugin] {
[0] "id": 358,
[0] "identifier": "/Users/seleckis/Sites/.../frontend/node_modules/fbjs/lib/ExecutionEnvironment.js",
[0] "name": "./~/fbjs/lib/ExecutionEnvironment.js",
[0] "index": 358,
[0] "index2": 350,
[0] "size": 1094,
[0] "cacheable": true,
[0] "built": true,
[0] "optional": false,
[0] "prefetched": false,
[0] "chunks": [
[0] 0
[0] ],
[0] "assets": [],
[0] "issuer": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/ReactDOM.js",
[0] "failed": false,
[0] "errors": 0,
[0] "warnings": 0,
[0] "reasons": [
[0] {
[0] "moduleId": 353,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/ReactDOM.js",
[0] "module": "./~/react/lib/ReactDOM.js",
[0] "moduleName": "./~/react/lib/ReactDOM.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "59:29-69"
[0] },
[0] {
[0] "moduleId": 357,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/Danger.js",
[0] "module": "./~/react/lib/Danger.js",
[0] "moduleName": "./~/react/lib/Danger.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "15:27-67"
[0] },
[0] {
[0] "moduleId": 359,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/fbjs/lib/createNodesFromMarkup.js",
[0] "module": "./~/fbjs/lib/createNodesFromMarkup.js",
[0] "moduleName": "./~/fbjs/lib/createNodesFromMarkup.js",
[0] "type": "cjs require",
[0] "userRequest": "./ExecutionEnvironment",
[0] "loc": "17:27-60"
[0] },
[0] {
[0] "moduleId": 363,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/fbjs/lib/getMarkupWrap.js",
[0] "module": "./~/fbjs/lib/getMarkupWrap.js",
[0] "moduleName": "./~/fbjs/lib/getMarkupWrap.js",
[0] "type": "cjs require",
[0] "userRequest": "./ExecutionEnvironment",
[0] "loc": "16:27-60"
[0] },
[0] {
[0] "moduleId": 368,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/setInnerHTML.js",
[0] "module": "./~/react/lib/setInnerHTML.js",
[0] "moduleName": "./~/react/lib/setInnerHTML.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "16:27-67"
[0] },
[0] {
[0] "moduleId": 369,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/setTextContent.js",
[0] "module": "./~/react/lib/setTextContent.js",
[0] "moduleName": "./~/react/lib/setTextContent.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "14:27-67"
[0] },
[0] {
[0] "moduleId": 389,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/isEventSupported.js",
[0] "module": "./~/react/lib/isEventSupported.js",
[0] "moduleName": "./~/react/lib/isEventSupported.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "14:27-67"
[0] },
[0] {
[0] "moduleId": 420,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/ReactDefaultInjection.js",
[0] "module": "./~/react/lib/ReactDefaultInjection.js",
[0] "moduleName": "./~/react/lib/ReactDefaultInjection.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "19:27-67"
[0] },
[0] {
[0] "moduleId": 421,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/BeforeInputEventPlugin.js",
[0] "module": "./~/react/lib/BeforeInputEventPlugin.js",
[0] "moduleName": "./~/react/lib/BeforeInputEventPlugin.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "17:27-67"
[0] },
[0] {
[0] "moduleId": 424,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/getTextContentAccessor.js",
[0] "module": "./~/react/lib/getTextContentAccessor.js",
[0] "moduleName": "./~/react/lib/getTextContentAccessor.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "14:27-67"
[0] },
[0] {
[0] "moduleId": 429,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/ChangeEventPlugin.js",
[0] "module": "./~/react/lib/ChangeEventPlugin.js",
[0] "moduleName": "./~/react/lib/ChangeEventPlugin.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "17:27-67"
[0] },
[0] {
[0] "moduleId": 438,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/HTMLDOMPropertyConfig.js",
[0] "module": "./~/react/lib/HTMLDOMPropertyConfig.js",
[0] "moduleName": "./~/react/lib/HTMLDOMPropertyConfig.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "15:27-67"
[0] },
[0] {
[0] "moduleId": 445,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/CSSPropertyOperations.js",
[0] "module": "./~/react/lib/CSSPropertyOperations.js",
[0] "moduleName": "./~/react/lib/CSSPropertyOperations.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "16:27-67"
[0] },
[0] {
[0] "moduleId": 467,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/ReactEventListener.js",
[0] "module": "./~/react/lib/ReactEventListener.js",
[0] "moduleName": "./~/react/lib/ReactEventListener.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "16:27-67"
[0] },
[0] {
[0] "moduleId": 476,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/ReactDOMSelection.js",
[0] "module": "./~/react/lib/ReactDOMSelection.js",
[0] "moduleName": "./~/react/lib/ReactDOMSelection.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "14:27-67"
[0] },
[0] {
[0] "moduleId": 479,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react/lib/SelectEventPlugin.js",
[0] "module": "./~/react/lib/SelectEventPlugin.js",
[0] "moduleName": "./~/react/lib/SelectEventPlugin.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "16:27-67"
[0] },
[0] {
[0] "moduleId": 494,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/fbjs/lib/performance.js",
[0] "module": "./~/fbjs/lib/performance.js",
[0] "moduleName": "./~/fbjs/lib/performance.js",
[0] "type": "cjs require",
[0] "userRequest": "./ExecutionEnvironment",
[0] "loc": "15:27-60"
[0] }
[0] ],
[0] "source": "/**\n * Copyright 2013-2015, Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule ExecutionEnvironment\n */\n\n'use strict';\n\nvar canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);\n\n/**\n * Simple, lightweight module assisting with the detection and context of\n * Worker. Helps avoid circular dependencies and allows code to reason about\n * whether or not they are in a Worker, even if they never include the main\n * `ReactWorker` dependency.\n */\nvar ExecutionEnvironment = {\n\n canUseDOM: canUseDOM,\n\n canUseWorkers: typeof Worker !== 'undefined',\n\n canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),\n\n canUseViewport: canUseDOM && !!window.screen,\n\n isInWorker: !canUseDOM // For now, this is true - might change in the future.\n\n};\n\nmodule.exports = ExecutionEnvironment;"
[0] }
[0] [webpack-isomorphic-tools/plugin] {
[0] "id": 972,
[0] "identifier": "/Users/seleckis/Sites/.../frontend/node_modules/react-side-effect/node_modules/fbjs/lib/ExecutionEnvironment.js",
[0] "name": "./~/react-side-effect/~/fbjs/lib/ExecutionEnvironment.js",
[0] "index": 972,
[0] "index2": 964,
[0] "size": 1094,
[0] "cacheable": true,
[0] "built": true,
[0] "optional": false,
[0] "prefetched": false,
[0] "chunks": [
[0] 0
[0] ],
[0] "assets": [],
[0] "issuer": "/Users/seleckis/Sites/.../frontend/node_modules/react-side-effect/lib/index.js",
[0] "failed": false,
[0] "errors": 0,
[0] "warnings": 0,
[0] "reasons": [
[0] {
[0] "moduleId": 971,
[0] "moduleIdentifier": "/Users/seleckis/Sites/.../frontend/node_modules/react-side-effect/lib/index.js",
[0] "module": "./~/react-side-effect/lib/index.js",
[0] "moduleName": "./~/react-side-effect/lib/index.js",
[0] "type": "cjs require",
[0] "userRequest": "fbjs/lib/ExecutionEnvironment",
[0] "loc": "15:35-75"
[0] }
[0] ],
[0] "source": "/**\n * Copyright 2013-2015, Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n *\n * @providesModule ExecutionEnvironment\n */\n\n'use strict';\n\nvar canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);\n\n/**\n * Simple, lightweight module assisting with the detection and context of\n * Worker. Helps avoid circular dependencies and allows code to reason about\n * whether or not they are in a Worker, even if they never include the main\n * `ReactWorker` dependency.\n */\nvar ExecutionEnvironment = {\n\n canUseDOM: canUseDOM,\n\n canUseWorkers: typeof Worker !== 'undefined',\n\n canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),\n\n canUseViewport: canUseDOM && !!window.screen,\n\n isInWorker: !canUseDOM // For now, this is true - might change in the future.\n\n};\n\nmodule.exports = ExecutionEnvironment;"
[0] }
[0] /Users/seleckis/Sites/.../frontend/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:465
[0] throw _iteratorError2;
[0] ^
[0]
[0] Error: More than a single candidate module was found in webpack stats
[0] at /Users/seleckis/Sites/.../frontend/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/plugin/write assets.js:344:10
[0] at resolver (/Users/seleckis/Sites/.../frontend/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:140:17)
[0] at Function._module2.default._findPath (/Users/seleckis/Sites/.../frontend/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:450:25)
[0] at Function.Module._resolveFilename (module.js:453:25)
[0] at Function._module2.default._resolveFilename (/Users/seleckis/Sites/.../frontend/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:423:34)
[0] at Function.Module._load (module.js:403:25)
[0] at Module.require (module.js:483:17)
[0] at require (internal/module.js:20:19)
[0] at Object.<anonymous> (./Danger.webpack-module:16:28)
[0] at Module._compile (module.js:556:32)
[0]
[0] npm
[0] ERR! Darwin 16.1.0
[0] npm
[0] ERR! argv
[0] "/Users/seleckis/.nvm/versions/node/v6.6.0/bin/node" "/Users/seleckis/.nvm/versions/node/v6.6.0/bin/npm" "run" "watch-client"
[0] npm
[0] ERR! node v6.6.0
[0] npm
[0] ERR! npm v3.10.3
[0] npm
[0] ERR! code ELIFECYCLE
[0] npm ERR! bette-website@0.9.0 watch-client: `better-npm-run watch-client`
[0] npm ERR! Exit status 1
[0] npm
[0] ERR!
[0] npm ERR!
[0] Failed at the bette-website@0.9.0 watch-client script 'better-npm-run watch-client'.
[0] npm ERR! Make sure you have the latest version of node.js and npm installed.
[0] npm ERR!
[0] If you do, this is most likely a problem with the bette-website package,
[0] npm ERR! not with npm itself.
[0] npm
[0] ERR! Tell the author that this fails on your system:
[0] npm ERR!
[0] better-npm-run watch-client
[0] npm ERR! You can get information on how to open an issue for this project with:
[0] npm
[0] ERR! npm bugs bette-website
[0] npm ERR!
[0] Or if that isn't available, you can get their info via:
[0] npm ERR!
[0] npm owner ls bette-website
[0] npm ERR!
[0] There is likely additional logging output above.
[0]
[0] npm ERR!
[0] Please include the following file with any support request:
[0] npm ERR! /Users/seleckis/Sites/.../frontend/npm-debug.log
[0] npm run watch-client exited with code 1
--> Sending SIGTERM to other processes..
More than a single candidate module was found in webpack stats for require()d path "fbjs/lib/ExecutionEnvironment"
This error is unresolvable with the current set of modules you have so you should try universal-webpack instead.
Oh my gosh. Project is based on https://github.com/erikras/react-redux-universal-hot-example, there is a huge amount of configs and dependences, so I doubt it would be easy to do that. :(
Many people managed to import svg files and it worked.
Why the ambiguous module error in your case - that no one knows.
@seleckis I've been trying to get all those packages to work, also with react-redux-universal-hot-example, with no luck. Did you manage to find a work around in the end? thank you 🙏
webpack-react-redux-isomorphic-render-example can load SVGs as React components via svg-react-loader (which is already abandoned as far as I can see).
For loading SVGs as React classes using webpack-isomorphic-tools (this is how I do it in my project and this is how it is written in the README):
webpack.config.js
{
test: /\.svg$/,
use:
[{
loader: 'babel-loader'
},
{
loader: 'svg-react-loader'
}]
}webpack-isomorphic-tools.js
{
assets:
{
svg:
{
extension: 'svg',
runtime: true
}
}
}The above code has been tested and it works
@halt-hammerzeit thanks for the response!
However, getting this error now, could it be a version issue?
Error: Unknown property "runtime" for asset type "svg"
using: "webpack-isomorphic-tools": "^2.2.18"
Upgrade to the latest version
@Jezfx I use react-svg-inline like this:
import SVGInline from 'react-svg-inline';
import Icon from 'icon.svg';
export default () => (
<SVGInline svg={Icon} />
);This works with webpack-isomorphic-tools
For anyone has this issue, you could use inline-react-svg babel plugin.