Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using React-file-viewer

Tags:

reactjs

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

like image 256
Anaïs Saez Avatar asked Nov 19 '22 18:11

Anaïs Saez


1 Answers

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]" }


        ]
    }
like image 161
Anaïs Saez Avatar answered Mar 28 '23 04:03

Anaïs Saez