首页 文章

material-ui.dropzone：您可能需要一个合适的加载器来处理此文件类型

提问于
浏览 次
0

在我的React应用程序中集成material-ui-dropzone，我收到了这个错误：

./~/material-ui-dropzone/src/index.jsx模块解析失败：... \ client \ node_modules \ material -ui-dropzone \ src \ index.jsx意外的令牌（123：26）你可能需要一个适当的加载器来处理这种文件类型 . SyntaxError：意外的令牌（123：26）

这是我的webpack配置：

const Path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const Webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (options) => {   const ExtractSASS = new ExtractTextPlugin(`/styles/${options.cssFileName}`);

  const webpackConfig = {
    devtool: options.devtool,
    entry: [
      `webpack-dev-server/client?http://localhost:${+ options.port}`,
      'webpack/hot/dev-server',
      Path.join(__dirname, '../src/app/index'),
    ],
    output: {
      path: Path.join(__dirname, '../dist'),
      filename: `/scripts/${options.jsFileName}`,
    },
    resolve: {
      extensions: ['', '.js', '.jsx'],
    },
    module: {
      loaders: [{
        test: /.jsx?$/,
        include: Path.join(__dirname, '../src/app'),
        loader: 'babel',
      }],
    },
    plugins: [
      new Webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(options.isProduction ? 'production' : 'development'),
        },
        "global.GENTLY": false
      }),
      new HtmlWebpackPlugin({
        template: Path.join(__dirname, '../src/index.html'),
      }),
    ],
    node: {
      __dirname: true,
    },

  };

  if (options.isProduction) {
    webpackConfig.entry = [Path.join(__dirname, '../src/app/index')];

    webpackConfig.plugins.push(
      new Webpack.optimize.OccurenceOrderPlugin(),
      new Webpack.optimize.UglifyJsPlugin({
        compressor: {
          warnings: false,
        },
      }),
      ExtractSASS
    );

    webpackConfig.module.loaders.push({
      test: /\.scss$/,
      loader: ExtractSASS.extract(['css', 'sass']),
    });   } else {
    webpackConfig.plugins.push(
      new Webpack.HotModuleReplacementPlugin()
    );

    webpackConfig.module.loaders.push({
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass'],
    });

    webpackConfig.devServer = {
      contentBase: Path.join(__dirname, '../'),
      hot: true,
      port: options.port,
      inline: true,
      progress: true,
      historyApiFallback: true,
      stats: 'errors-only',
    };   }

  return webpackConfig; 

};

Babel配置文件是：

{
  "presets": ["react", "es2015", "stage-1"]
}

这是我唯一遇到问题的图书馆 . 知道问题可能在哪里？

reactjs webpack material-ui babel

1 回答

  • 1

    如果您使用的是webapck@3.x请尝试将您的babel装载机修改为

    module: {
  rules: [
    {
      test: /\.jsx?$/,
      include: Path.join(__dirname, '../src/app'),
      use: {
        loader: 'babel-loader',
        options: {
          presets: ["react", "es2015", "stage-1"],
        }
      }
    }
  ]
}

    你可以在这里参考https://webpack.js.org/loaders/babel-loader/

    注意到在你的loader配置中，写 babel-loader 而不是 babel . 还要确保你的devDependencies有 npm install 正确的babel npm包，这取决于你的webpack版本 .

    如果它没有解决您的问题，请粘贴您的package.json文件，以便我可以了解您的webpack版本 .

    干杯 .

    回复于

相关问题