Module parse failed

[loulou1007]

Hello ! I want to use react-file-viewer, but i have an error when I build my project 👍

export default class ViewerYes extends React.Component<Props, State>{
const file = './yes.png'
const type = 'png'  
public render() {
        return (
            <div>
                <FileViewer
                    fileType={type}
                    filePath={file}
                    errorComponent={CustomErrorComponent}
                    />
            </div>
        )
   }
}

And I call the component in a parent component like this :
<ViewerYes/>

Do you have a solution about this issue ?
Thank you

[loulou1007]

Any solutions :( ??

[viktoriyavulfson]

@loulou1007 could you provide more information about your environment and steps you're taking?
What is your node and npm versions? Can you access our demo app at http://localhost:8081/ after running these commands?

npm install
npm start

You can see an example of how to use the component here https://github.com/plangrid/react-file-viewer/blob/master/src/app.js

[prionkor]

Build fails using grunt. Unexpected token at (74:6)? This is what I get..

ERROR in ./~/react-file-viewer/src/components/file-viewer.jsx
Module parse failed: /var/www/portal.dev/wp-content/themes/portal/node_modules/react-file-viewer/src/components/file-viewer.jsx Unexpected token (74:6)
You may need an appropriate loader to handle this file type.
|     const Driver = this.getDriver(this.props);
|     return (
|       <div className="pg-viewer-wrapper">
|         <div className="pg-viewer" id="pg-viewer">
|           <Driver {...this.props} width={this.state.width} height={this.state.height} />

[prionkor]

Related SO topic https://stackoverflow.com/questions/44515802/using-react-file-viewer

[stevenleeg]

Any updates on this? I'm running into the same issue as well while trying to include it in my project.

[benoj]

Getting the same issue here

[benoj]

ERROR in ./~/react-file-viewer/src/components/file-viewer.jsx
Module parse failed: /Users/benflowers/Projects/candidate/candidate/node_modules/react-file-viewer/src/components/file-viewer.jsx Unexpected token (74:6)
You may need an appropriate loader to handle this file type.
|     const Driver = this.getDriver(this.props);
|     return (
|       <div className="pg-viewer-wrapper">
|         <div className="pg-viewer" id="pg-viewer">
|           <Driver {...this.props} width={this.state.width} height={this.state.height} />
 @ ./src/frontend/component/PDFViewer.js 43:0-43
 @ ./src/frontend/component/Application.js
 @ ./src/frontend/router.js
 @ ./src/frontend/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill ./src/frontend/index.js
webpack: Failed to compile.

My webpack has the following entries which i assumed should make this work?

 resolve: {
    extensions: [".js", ".jsx", ".json", ".css"]
  },
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            ["es2015", { modules: false }],
            "stage-0",
            "react"
          ],
          plugins: [
            "transform-decorators-legacy",
            "transform-node-env-inline"
          ],
          env: {
            development: {
              presets: ['react-hmre'],
              plugins: ["react-hot-loader/babel"]
            }
          }
        }
      },
      {
        test: /\.css$/,
         use: [ 'style-loader', 'css-loader','less-loader'],
        include: [/flexboxgrid/,/react-star-rating/]
      }
    ]
  }

[kamarajuPrathi]

any updates on this issue?

[viktoriyavulfson]

You have to use babel loader in your application, for documentation please see https://github.com/babel/babel-loader#usage

@kamarajuPrathi please provide more information about your environment if it still doesn't work after adding a babel loader. Pasting your package.json and webpack.config.js here would help us investigate it further

[viktoriyavulfson]

@benoj do you have all the presets and plugins listed in .babelrc installed?
https://github.com/plangrid/react-file-viewer/blob/master/.babelrc

[PawanWagh]

I am also getting the same error.
Using CRA for building reactjs app so everything is preconfigured along with babel.

Error in ./~/react-file-viewer/src/components/file-viewer.jsx
Module parse failed: /Users/pwn/Sites/frontend/node_modules/react-file-viewer/src/components/file-viewer.jsx Unexpected token (76:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (76:6)
 @ ./src/App.jsx 196:17-45

[andrewhawk1ns]

I'm getting this exact error as well

using https://github.com/davezuko/react-redux-starter-kit

added all the plugins to the config and the ruleset for the supported file types to no avail

ERROR in ./~/react-file-viewer/src/components/file-viewer.jsx
Module parse failed: \react-build\node_modules\react-file-viewer\src\components\file-viewer.jsx Unexpected token (76:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (76:6)