Module parse failed: Unexpected token (85:10)

[madeinspace]

I'd love to use your module but using your example that's the error I get on compile, I'm using an app created by the create-react-app module so don't have control over the webpack configuration (I chose not to anyway):

./node_modules/react-images-upload/index.js
Module parse failed: Unexpected token (85:10)
You may need an appropriate loader to handle this file type.
| renderIcon() {
| if (this.props.withIcon) {
| return

;
| }
| }

[marianalucut7]

I get the same error on compile.

[ivnnv]

You both need to correctly configure webpack to handle jsx

[joshuaai]

This is a known bug on create-react-app #3856 with importing SVG files () in CSS.

I removed the SVG file and converted it to it's Data URI format using this awesome Codepen and it works fine for me.

I have created a pull request here #22

[ivnnv]

Problem is not having a .svg file in the project, so i dont think the solution is converting it to inline code.
The problem that needs to be solved when adding this component to a project is that the parent project's bundler (webpack, parcel), needs to correctly handle jsx AND .css AND svg files.
What if the file was a .png instead a .svg? You couldn't inline it in the .css file, you would anyway need to tell the bundler how to handle the file, so this is the case.
I dont really see the benefict of chaning a svg file for its inline code inside the .css file, it is less handleable in my opinion.

[joshuaai]

I beg to differ. Every other file format works fine in my project. Please visit the CRA issue I referenced above.

[ivnnv]

I think you have replied to yourself in the issue:

"Webpack crashes in create-react-app when trying to parse background: url(UploadIcon.svg) as it cannot find a suitable loader."

So, you need to correctly configure webpack from the main project (create-react-app webpack config is NOT configured by default to handle .svg files) and add the correct loader to webpack's configuration:

{
    test: /\.svg$/,
    include: [/react-images-upload/],
    loader: 'file-loader',
    options: {
        name: '[name].[ext]?[hash]'
    }
}

I will probably add this to our Readme because i found myself figuring out this exact piece of code to make the .svg file be correctly handled by webpack in first app i added the component to.
So i think this is definitely the correct way to integrate the file, instead inlining it as code in the css file.

[joshuaai]

Hi @IvanLinos as you might already know, CRA does not provide the Webpack config files without ejecting.

Technically, the SVG file does not have to be imported in CSS. In this new PR #23 I followed the standard React approach and imported the SVG as a component, and using the src prop of the <img /> tag to parse it. Everything works fine now.

I hope you consider this.

[ivnnv]

I pretty much consider this solution as a better aproach than having to set the webpack loader (im not a fan of webpack anyway :D).
Ill test it when i have time and if its ok for me and for @JakeHartnell i could merge your PR.

[sambit-gwl]

Is this bug fix updated in npm https://www.npmjs.com/package/react-images-upload

I am not sure how to get the latest version. Could someone help me with this?

[lodi-g]

Couldn't get it to work, even with the loader. :(

[SanderVanCamp]

Any updates on this issue? I'm on the 1.0.7 version but issue still persists. Thank you!

[karanmartian]

hey any update on this issue? i am having same problem. Please request to fix it asap so the module can be used as it is without any webpack config or other stuff

[SanderVanCamp]

@karanmartian, I managed to fix the problem. When using version 1.0.7 the issue is fixed. However, for some reason the code was not updated. U had to manually copy the code to my project and now it works.

[karanmartian]

@SanderVanCamp i had just installed 1.0.7 like 30 mins ago and then uninstalled it because of this issue. Can you make a new release if this is fixed. because in 1.0.7 its still not working.

[donalmurtagh]

I also have this problem in the latest version (1.0.7). The error message is:

Failed to compile.

./node_modules/react-images-upload/index.js
Module parse failed: Unexpected token (86:10)
You may need an appropriate loader to handle this file type.
|       renderIcon() {
|               if (this.props.withIcon) {
|                       return <img src={UploadIcon} className="uploadIcon" 
|                               alt="Upload Icon" />;
|               }

The problem is using UploadIcon (an SVG) as the value of an image's src attribute.

The reason for this error (and others), is that source files, rather than bundled files are being distributed.

For example, rather than distributing a .js file, an .svg file, and a .css file, a single .js should be distributed with the .svg and .css file bundled within it.

While it might be possible for users to do this bundling within their own app's build config, they shouldn't have to.

[JakeHartnell]

The reason for this error (and others), is that source files, rather than bundled files are being distributed.

Yes, this is the heart of it, and why @SanderVanCamp was able to get it working by manually copying the code into her project (where it would be bundled as part of create react app for example).

The solution is to ship a bundled distribution with the npm package. I've been meaning to do this for a while but have been swamped with work from other projects.

[JakeHartnell]

Ok, v1.0.8 is now published, and the pull request #29 is out for review. Try it, and let me know if this is resolved.

https://www.npmjs.com/package/react-images-upload

[donalmurtagh]

@JakeHartnell v1.0.8 seems to be totally broken, I've left some further details on the PR

[JakeHartnell]

Should work now as of v1.0.95.

[LaKorita]

Hey guys, is this issue fixed? I'm using v1.1.99 and I see the following error:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .fileUploader {
|       width: 100%;
| }
 @ ./node_modules/react-images-upload/compiled.js 17:0-22
 @ ./src/scenes/AddActivity/index.js
 @ ./src/scenes/Application/Router.js
 @ ./src/scenes/Application/index.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server babel-polyfill ./src/index.js ```

[donalmurtagh]

@LaKorita it work fine for me in version 1.1.99. I suspect the reason you're having this problem is because you're importing the wrong file. In my case, I'm using ES6 imports

import ImageUploader from 'react-images-upload';

and this imports compiled.js

[songyanho]

Hi,

Although the file-loader managed to generate the URL but the SVG does not export properly.

[songyanho]

Just found a solution by adding css rule:

img.uploadIcon {
  content:url('./upload.svg') !important;
}

and attach your own svg/image.