无论我尝试什么，Webpack 都不会解析 JSX

Question

已经研究了几天...

尝试使用 Webpack 延迟加载 React 模块，app-shell 首先在服务器上呈现，然后在客户端注入 Router。使用 gulp 时编译正常，但使用 Webpack 时，我得到了臭名昭著的：

错误../server/components/routes/AppRouter.jsx 模块解析失败：/web/sites/react-lazy/server/components/routes/AppRouter.jsx 意外令牌 (11:6) 您可能需要一个合适的加载器来处理这种文件类型。

AppRouter.jsx:

import React from 'react';
import { Router, Route, IndexRoute } from 'react-router';
import routes from './AppRoute.jsx';
import createMemoryHistory from 'history/lib/createMemoryHistory';

if (typeof require.ensure !== 'function') require.ensure = (d, c) => c(require)

export default class AppRouter extends React.Component {
  render() {
    return (
      <Router routes={routes} history={createMemoryHistory()} /> // < -- errors here
    ); 
  }
}

我的webpack.config.js:

var path = require('path')

module.exports = {
  context: __dirname + "/src",
  entry: './js/app.es6.js',
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [ 
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, 'src/js'),
        exclude: /(node_modules)/,
        query: {
          presets: ["es2015", "stage-0", "react"],
        }
      }
    ]
  },

  output: {
    path: __dirname + '/build',
    publicPath: '/build',
    filename: 'app.js',
    chunkFilename: '[id].chunk.js',
  }
}

我的目录结构：

  /
    webpack.config.js
    .babelrc
    /src
       /js
          app.es6.js
          .babelrc // <-- also put a .babelrc here in case

我的package.json:

  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.14.0", 
    "webpack": "^1.13.2",
    ...
 }

我试过：

正在将 .babelrc 文件复制到主目录和入口点目录中，不确定哪个是必要的。

正在注册 babel-register: 在 app.es6.js:

require('babel-register')({
  presets: [ 'es2015', 'stage-0', 'react' ]
});

使用“--config webpack.config.js”参数运行 webpack

如果我将 babel、babel-core 和 babel-loader 版本降级到 5.*（从 6.*），会出现不同的错误：

ERROR in ./js/app.es6.js
Module build failed: ReferenceError: [BABEL] /web/sites/react-lazy/src/js/app.es6.js: Unknown option: direct.presets

我应该说，我对 React 和 webpack 还很陌生。有人知道其他技巧吗？

解法：

webpack 配置的 'include' 属性必须包含您需要通过加载程序的所有目录

Answer 1

您的条目文件使用位于此处的组件：

/web/sites/react-lazy/server/components/

但是，您的 include 配置只允许将低于 /web/sites/react-lazy/src/js/ 的文件传递给加载程序（include 表示："any files that should be passed to this loader must be located in this directory"）。

因此，要么删除 include 配置，要么使其成为一个数组，其中还包含可以找到 .jsx 文件的其他位置。

无论我尝试什么，Webpack 都不会解析 JSX

Webpack won't parse JSX no matter what I try

jsx

reactjs

webpack