Using React-file-viewer

Question

I'm trying to use React-file-viewer. Npm tutorial is here But I have an error in the console : "you may need an appropriate loader to handle this file type" This is my code :

import FileViewer from 'react-file-viewer';
import { CustomErrorComponent } from 'custom-error';
const file = 'http://example.com/image.png'
const type = 'png'


 onError = (e) => {
    logger.logError(e, 'error in file-viewer');
 }

 <FileViewer
 fileType={type}
 filePath={file}
 errorComponent={CustomErrorComponent}
 onError={this.onError}/>

I specify, i have babel-preset-es2015 and i use it

How can I do ? Thank you

Anaïs Saez · Accepted Answer · 2017-06-13 09:39:54Z

1

module: {
        loaders: [
            // .ts(x) files should first pass through the Typescript loader, and then through babel
            { test: /\.tsx?$/, loaders: ['babel', 'ts-loader'] },
            { test: /\.css$/, loaders: ['style', 'css-loader'] },
            { test: /\.scss$/, loaders: ['style', 'css-loader?modules&importLoaders=1&localIdentName=[local]-[hash:base64:5]', 'postcss-loader', 'sass'] },
            { test: /\.(png|svg|gif|jpg|jpeg)$/, loaders: [ 'url-loader', 'image-webpack?bypassOnDebug'] },
            { test: /\.(eot|woff|ttf|woff2)$/, loader: "file?name=[name].[ext]" }


        ]
    }

answered Jun 13, 2017 at 9:39

Anaïs Saez

1,3396 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sisir Over a year ago

does adding this fixed your problem? Please add more details on your answer so other can get help form this.

js_248 · Accepted Answer · 2017-06-13 09:52:12Z

1

You have to include babel in webpack config as

loaders: [
      {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
      { test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader' }]

As you are using

onError = (e) => {
    logger.logError(e, 'error in file-viewer');
 }

which is es6 syntax.To make it browser compatible you have to add

{test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']}

edited Jun 13, 2017 at 9:52

answered Jun 13, 2017 at 9:01

js_248

2,1224 gold badges29 silver badges38 bronze badges

5 Comments

js_248 Over a year ago

can you post webpack config also?

js_248 Over a year ago

you are using es6 function so you have to add {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']} also

Anaïs Saez Over a year ago

thank you for your help, however if i add this line in my webpack, app crash and not build :( . In the console, i have "path is not defined" Must I import or define "path" ? And how ?

js_248 Over a year ago

use only { test: /\.js?$/, loaders: ['babel'] } for your case

Anaïs Saez Over a year ago

The app build, but I have the same error "You may need an appropriate loader to handle this file type""

Peter Tretiakov · Accepted Answer · 2017-10-29 17:13:04Z

1

Make sure you have installed the following presets and plugins, as listed in node-modules/react-file-viewer/.babelrc file:

{
  "presets": [
    "react",
    "es2015",
    "stage-0"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-es2015-classes",
    "transform-es2015-object-super",
    "transform-runtime"
  ]
}

Assuming you already have the react and es2015 in your project, the npm command will be:

npm install --save-dev babel-preset-stage-0 \
    babel-plugin-transform-class-properties \
    babel-plugin-transform-es2015-classes \
    babel-plugin-transform-es2015-object-super \
    babel-plugin-transform-runtime

edited Oct 29, 2017 at 17:13

Peter Tretiakov

3,4206 gold badges40 silver badges56 bronze badges

answered Oct 29, 2017 at 16:53

dk-na

1511 silver badge4 bronze badges

Comments

Hoang Subin · Accepted Answer · 2020-02-17 12:00:06Z

1

You need to import logger from Logging library, something like this:

import logger from 'logging-Lib';

see more: https://www.npmjs.com/package/react-file-viewer

edited Feb 17, 2020 at 12:00

Hoang Subin

7,5608 gold badges42 silver badges58 bronze badges

answered Feb 17, 2020 at 10:18

Harsha Pk

111 bronze badge

Comments

Mohammad Atiour Islam · Accepted Answer · 2021-05-20 06:46:17Z

1

You need to import the file using require.

// import FileViewer from "react-file-viewer";
const FileViewer = require('react-file-viewer');

After that if you are getting any error like Module not found: Can't resolve 'console'. you can run

npm install console

answered May 20, 2021 at 6:46

Mohammad Atiour Islam

5,7783 gold badges46 silver badges49 bronze badges

Collectives™ on Stack Overflow

Using React-file-viewer

5 Answers 5

1 Comment

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related