Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

You may need an appropriate loader to handle this file type. #90

Open
Tenkir opened this issue Dec 5, 2017 · 2 comments
Open

You may need an appropriate loader to handle this file type. #90

Tenkir opened this issue Dec 5, 2017 · 2 comments

Comments

@Tenkir
Copy link

Tenkir commented Dec 5, 2017

Running Webpack 3.8.1.

Error:

./src/components/Navigation/logo.svg
Module parse failed: Unexpected token (21:12)
You may need an appropriate loader to handle this file type.
| 
|         return (
|             <svg {...this.props}>
|                   <defs>
|     <polygon id="path-1" points="0 29.3122683 67.4495122 29.3122683 67.4495122 7.31707317e-05 0 7.31707317e-05"/>

Webpack.config.js:

          {
            test: /\.svg$/,
            exclude: /node_modules/,
            loader: require.resolve('svg-react-loader'),
            options: {
              xmlnsTest: /^xmlns.*$/
            }
          },

logo.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="68px" height="30px" viewBox="0 0 68 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <polygon id="path-1" points="0 29.3122683 67.4495122 29.3122683 67.4495122 7.31707317e-05 0 7.31707317e-05"></polygon>
    </defs>
    <g id="Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="2018---Home" transform="translate(-250.000000, -10.000000)">
            <g id="Navigation">
                <g id="Logo" transform="translate(250.000000, 10.000000)">
                    <polygon id="Fill-1" fill="#000000" points="7.32804878 19.2564146 10.992439 19.2564146 10.992439 10.0566585 7.32804878 10.0566585"></polygon>
                    <polygon id="Fill-2" fill="#000000" points="12.8239024 19.2564146 16.4882927 19.2564146 16.4882927 10.0566585 12.8239024 10.0566585"></polygon>
                    <path d="M21.9838537,11.8883415 L21.9838537,19.2434634 C21.9838537,19.2507805 21.9787317,19.2559024 21.9714146,19.2559024 L18.3333659,19.2559024 C18.3260488,19.2559024 18.3201951,19.2507805 18.3201951,19.2434634 L18.3201951,10.0693171 C18.3201951,10.062 18.3260488,10.056878 18.3333659,10.056878 L20.1523902,10.056878 C21.1643415,10.056878 21.9838537,10.8763902 21.9838537,11.8883415 Z" id="Fill-3" fill="#000000"></path>
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <g id="Clip-6"></g>
                    <path d="M3.6504878,25.6617805 L25.662439,25.6617805 L25.662439,3.64982927 L3.6504878,3.64982927 L3.6504878,25.6617805 Z M0,29.3122683 L29.3121951,29.3122683 L29.3121951,7.31707317e-05 L0,7.31707317e-05 L0,29.3122683 Z" id="Fill-5" fill="#000000" mask="url(#mask-2)"></path>
                    <polygon id="Fill-7" fill="#000000" mask="url(#mask-2)" points="33.068122 11.0872683 37.3837317 11.0872683 38.5515366 14.6967805 39.7947073 11.0872683 44.0356829 11.0872683 44.0356829 20.1114146 41.0569024 20.1114146 41.0569024 15.3150732 39.3403171 20.1114146 37.7634878 20.1114146 36.0469024 15.3150732 36.0469024 20.1114146 33.068122 20.1114146"></polygon>
                    <polygon id="Fill-8" fill="#000000" mask="url(#mask-2)" points="58.7657561 11.0872683 62.5142927 11.0872683 64.4701463 15.2770244 64.4701463 11.0872683 67.4489268 11.0872683 67.4489268 20.1114146 64.2564878 20.1114146 61.7569756 15.1884878 61.7569756 20.1114146 58.7657561 20.1114146"></polygon>
                    <path d="M50.814878,20.2829268 C50.8382927,20.2829268 50.8580488,20.2865854 50.8814634,20.2865854 C53.2909756,20.28 55.2431707,18.3256098 55.2431707,15.9139024 L55.2431707,11.087561 L51.8597561,11.087561 L51.8597561,15.9387805 C51.8597561,16.4860976 51.4156098,16.9295122 50.8690244,16.9295122 C50.3217073,16.9295122 49.8782927,16.4860976 49.8782927,15.9387805 L49.8782927,11.087561 L46.5212195,11.087561 L46.5212195,16.1692683 C46.6543902,18.444878 48.5121951,20.2536585 50.814878,20.2829268" id="Fill-9" fill="#000000" mask="url(#mask-2)"></path>
                    <polygon id="Fill-10" fill="#000000" mask="url(#mask-2)" points="33.0680488 29.3122683 67.4487805 29.3122683 67.4487805 25.5710488 33.0680488 25.5710488"></polygon>
                </g>
            </g>
        </g>
    </g>
</svg>
@mantissa7
Copy link

Did you get this working?
I've tried the above code and it loads for me.

"svg-react-loader": "^0.4.5",
"webpack": "^3.8.1"

@jhamlet
Copy link
Owner

jhamlet commented Oct 15, 2018

Please provide a small repository that reproduces this issue so I can investigate

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants