React 和 Webpack 模块解析失败：/testimonials.js Unexpected token (6:4)

Question

当我尝试通过 webpack 运行 React 时，有人可以帮我解决这个错误吗？以下是我得到的错误。

控制台错误：

ERROR in ./testimonials.js
Module parse fai,led: src/js/testimonials.js Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
| const HelloWorld = () => {
    |   return (
        |     <div className='hello-world'>
        |       <h1>Hello World</h1>
        |       <p>Welcome to my world</p>

这是 webpack.config.js 文件

'use strict'

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: __dirname + "/src/js",
  devtool: 'source-map',
  entry: {
    'global': './global/app.js',
    'legal': './legal.js',
    'blogagg': './blog-agg.js',
    'newsagg': './news-agg.js',
    'events' : './events.js',
    'updates': './product-updates.js',
    'signup': './signup.js',
    'contact': './contact.js',
    'testimonialsjs': './testimonials.js'
  },
  output: {
    path: __dirname + "/_site/js",
    filename: "[name].min.js"
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ],
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.optimize.UglifyJsPlugin({
      parallel: true
    })
  ]
}

这是 testimonials.js 文件

import React from 'react'
import ReactDOM from 'react-dom'

const HelloWorld = () => {
  return (
    <div className='hello-world'>
      <h1>Hello World</h1>
      <p>Welcome to my world</p>
    </div>
  )
}

ReactDOM.render(<HelloWorld />, document.getElementById('app'))

这是 testimonials.html 文件。注意：我在这个网站上使用 Jekyll 和 Liquid 模板：这个页面通过asset_namespace读取js文件。我的 react id="app" div 组件在这个文件中。

---
layout: base-layout
title: Testimonials
has_js_app: true
asset_namespace: testimonialsjs
has_breadcrumbs: false
title: Testimonials
---

<main class="testimonials">
  <div class="blog section">
    <div class="grid-container">
      <div id='app'></div>
      <h2>5 Star Service and Support</h2>
      <div class="grid-x grid-margin-y align-center card-grid">
        {% for testimonials in page.testimonials %}
        <div class="cell testimonial-card" data-number="{{forloop.index}}">
          <p>{{testimonials.testimonial_text}}</p>
          <p class="author-name">{{testimonials.author_name}}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</main>

这是我的 package.json 文件中的依赖项

"devDependencies": {
    "a11y": "^0.5.0",
    "autoprefixer": "^6.7.7",
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "browser-sync": "^2.18.13",
    "css-loader": "^0.28.7",
    "html-loader": "^0.5.1",
    "json-loader": "^0.5.4",
    "node-sass": "^4.6.1",
    "parallelshell": "^3.0.1",
    "path": "^0.12.7",
    "postcss": "^6.0.2",
    "postcss-cli": "^4.1.0",
    "postcss-flexbugs-fixes": "^3.0.0",
    "psi": "^3.0.0",
    "style-loader": "^0.19.0",
    "webpack": "^2.7.0",
    "webpack-dev-server": "^2.9.4",
    "webpack-stream": "^3.2.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.23.0",
    "babel-preset-stage-3": "^6.24.1",
    "foundation-sites": "6.4.3",
    "jquery": "3.1.1",
    "marketo-rest-api": "^0.2.0",
    "motion-ui": "^1.2.3",
    "node": "^9.2.0",
    "pug": "^2.0.0-rc.3",
    "pug-cli": "^1.0.0-alpha6",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "script-loader": "^0.7.0"
  }

Answer 1

根据 webpack v2 更新您的 webpack.config.js。请参阅Migrating Versions 了解更多信息。

• module.loaders 现在是 module.rules
• 在引用加载器时不能再省略 -loader 扩展
• 加载器配置是通过选项来实现的

更新后的webpack.config.js如下：

'use strict'

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: __dirname + "/src/js",
  devtool: 'source-map',
  entry: {
    'global': './global/app.js',
    'legal': './legal.js',
    'blogagg': './blog-agg.js',
    'newsagg': './news-agg.js',
    'events' : './events.js',
    'updates': './product-updates.js',
    'signup': './signup.js',
    'contact': './contact.js',
    'testimonialsjs': './testimonials.js'
  },
  output: {
    path: __dirname + "/_site/js",
    filename: "[name].min.js"
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'es2015']
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.optimize.UglifyJsPlugin({
      parallel: true
    })
  ]
}