可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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
回答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]" } ] }
回答2:
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']}
回答3:
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
