Question

我试图使用React-file-viewer。 Npm教程在这里但我在控制台中出错：＆＃34;您可能需要一个合适的加载程序来处理此文件类型＆＃34; 这是我的代码：

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}/>

我指定，我有babel-preset-es2015并且我使用它

我该怎么办？谢谢

Answer 1

您必须在webpack配置中包含babel

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

正在使用

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

这是es6语法。为了使浏览器兼容，你必须添加

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

Answer 2

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


        ]
    }

Answer 3

确保您已安装以下预设和插件，如node-modules/react-file-viewer/.babelrc文件中所列：

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

假设您的项目中已有react和es2015，npm命令将为：

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

Answer 4

您需要使用 require 导入文件。

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

之后，如果您遇到任何错误，例如找不到模块：无法解析“控制台”。你可以运行

npm install console

使用React-file-viewer

4 个答案: