reactjs - React-three-fiber - 导入 Canvas 和 useFrame 导致 webpack 出错

Question

我正在使用 react-three-fiber 从头构建一个应用程序。我添加了three.js 和react-three-fiber，但是当我将canvas 或useFrame 导入文件时，出现webpack 错误。

import { Canvas, useFrame } from 'react-three-fiber';

错误

ERROR in ./node_modules/react-three-fiber/web.js
Module parse failed: /Users/joshuafoxworth/Sites/jfReactThree/jfthree/node_modules/react-three-fiber/web.js Unexpected token (144:46)
You may need an appropriate loader to handle this file type.
| }
| let catalogue = {};
| const extend = objects => void (catalogue = { ...catalogue,
|   ...objects
| });
 @ ./src

我的 webpack 文件

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    historyApiFallback: true
  }
}