ReactJS – use react-file-viewer

I am trying to use React-file-viewer. The Npm tutorial is here
but I have an error in the console: “You may need a suitable 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');
}

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

I specify, I have babel-preset-es2015, I use it< /p>

What can I do?
Thank you

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


]
}

Me I am trying to use React-file-viewer. The Npm tutorial is here
but I have an error in the console: “You may need a suitable loader to handle this file type”
This is my code: < p>

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');
}

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

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

How can I Do?
Thank you

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


]
}

Leave a Comment

Your email address will not be published.