Skip to content
This repository has been archived by the owner on Jun 5, 2022. It is now read-only.

Module parse failed: Unexpected token (85:10) #21

Open
madeinspace opened this issue Mar 20, 2018 · 23 comments · Fixed by #23
Open

Module parse failed: Unexpected token (85:10) #21

madeinspace opened this issue Mar 20, 2018 · 23 comments · Fixed by #23

Comments

@madeinspace
Copy link

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
Copy link

I get the same error on compile.

@ivnnv
Copy link
Collaborator

ivnnv commented Mar 29, 2018

You both need to correctly configure webpack to handle jsx

@joshuaai
Copy link
Contributor

joshuaai commented Mar 30, 2018

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
Copy link
Collaborator

ivnnv commented Mar 30, 2018

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
Copy link
Contributor

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

@ivnnv
Copy link
Collaborator

ivnnv commented Mar 30, 2018

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
Copy link
Contributor

joshuaai commented Mar 31, 2018

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
Copy link
Collaborator

ivnnv commented Mar 31, 2018

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
Copy link

sambit-gwl commented Apr 20, 2018

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
Copy link

lodi-g commented May 6, 2018

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

@JakeHartnell JakeHartnell reopened this May 6, 2018
@SanderVanCamp
Copy link

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

@karanmartian
Copy link

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
Copy link

@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
Copy link

@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
Copy link
Contributor

donalmurtagh commented May 16, 2018

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
Copy link
Owner

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
Copy link
Owner

JakeHartnell commented May 18, 2018

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
Copy link
Contributor

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

@JakeHartnell
Copy link
Owner

Should work now as of v1.0.95.

@LaKorita
Copy link

LaKorita commented May 31, 2018

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
Copy link
Contributor

@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
Copy link

Hi,

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

screen shot 2018-06-07 at 6 01 31 pm

@songyanho
Copy link

Just found a solution by adding css rule:

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

and attach your own svg/image.

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