为什么babel预设反应无法解析我的JSX?

马克·泰布鲁(MarkThëBrouch)

运行时出现以下错误webpack

Error in ./src/index.jsx
Module parse failed: .../src/index.jsx Unexpected token (10:18)
You may need an appropriate loader to handle this file type.

我相信我已经安装了所有正确的装载机,请告诉我是否错过了什么。

package.json:

"dependencies": {
  "isomorphic-fetch": "^2.2.1",
  "koa": "^1.2.4",
  "koa-ejs": "^3.0.0",
  "koa-route": "^2.4.2",
  "koa-router": "^5.4.0",
  "koa-static": "^2.0.0",
  "koa-webpack-dev-middleware": "^1.2.2",
  "node-sass": "^3.10.1",
  "react": "^15.3.2",
  "react-dom": "^15.3.2",
  "react-hot-loader": "^1.3.0",
  "react-redux": "^4.4.5",
  "react-router": "^2.8.1",
  "redux": "^3.6.0",
  "redux-thunk": "^2.1.0",
  "sass-loader": "^4.0.2",
  "style-loader": "^0.13.1",
  "webpack": "^1.13.2"
},
"devDependencies": {
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.6",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.25.0",
    "eslint": "^3.7.1",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-react": "^6.4.1",
    "koa-webpack-hot-middleware": "^1.0.3",
    "react-hot-loader": "^1.3.0",
    "redux-devtools": "^3.3.1",
    "webpack-dev-server": "^1.16.2"
  }

webpack.config.js:

const webpack = require('webpack');

const path = require('path');

const ROOT_PATH = path.resolve(__dirname);

module.exports = {
  devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
  entry: [
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
    path.resolve(ROOT_PATH, 'src/index.jsx')
  ],
  module: {
    preLoaders: [{
      test: /\.jsx?$/,
      loaders: process.env.NODE_ENV === 'production' ? [] : ['eslint'],
      include: path.resolve(ROOT_PATH, 'src/index.jsx')
    }],
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'stage-0', 'react'],
        cacheDirectory: true,
        env: {
          development: {
            presets: ['react-hmre']
          }
        }
      },
      include: './src'
    },
    {
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass']
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  output: {
    path: process.env.NODE_ENV === 'production'
      ? path.resolve(ROOT_PATH, 'dist')
      : path.resolve(ROOT_PATH, 'build'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(ROOT_PATH, 'build'),
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

src / index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

const main = () => {
  const app = document.createElement('div');

  document.body.appendChild(app);

  ReactDOM.render(<App />, app);
};

main();

我也尝试使用.babelrc文件在没有任何预设的情况下进行尝试:

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

运行babel src/index.jsx确实按预期工作,所以我认为这是webpack配置的问题。

马克·泰布鲁(MarkThëBrouch)

include的js(x)加载程序路径错误。固定使用

include: path.resolve(ROOT_PATH, './src')

代替

include: './src'

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

`无法解析引用`带有反应预设的eslint警告

来自分类Dev

React,Babel,Webpack无法解析jsx代码

来自分类Dev

为什么我的宏变量无法解析?

来自分类Dev

为什么我无法解析符号“ R”?

来自分类Dev

为什么我的反应状态无法正确更新?

来自分类Dev

为什么我的班级样式无法被识别?反应

来自分类Dev

反应为什么我的clearInterval无法停止setInterval?

来自分类Dev

为什么我们需要使用导入“ babel-polyfill”;在反应成分?

来自分类Dev

React,Babel,Webpack无法解析jsx,意外的令牌错误

来自分类Dev

React,Babel,Webpack无法解析jsx,意外的令牌错误

来自分类Dev

为什么Elasticsearch批量API无法解析我的JSON?

来自分类Dev

为什么我的标签助手无法正确解析?

来自分类Dev

为什么我的bash函数无法解析可选参数?

来自分类Dev

为什么无法使用域名前缀“ www”解析我的网站?

来自分类Dev

为什么我的Swift中的JSON代码无法解析?

来自分类Dev

为什么angularjs无法正确解析我的对象?

来自分类Dev

为什么我无法将SingularValueDecomposition解析为类型?

来自分类Dev

为什么我的browserify要求路径无法在Windows中解析?

来自分类Dev

为什么我的本地服务器都无法解析?

来自分类Dev

为什么我的解析任务有时无法完成?

来自分类Dev

为什么firefox无法打开以在vim中解析我的php?

来自分类Dev

为什么我的迭代器的方法无法解析?

来自分类Dev

为什么我无法使用 Apache CLI 解析选项

来自分类Dev

为什么我无法在chrome控制台中看到我的对象的反应?

来自分类Dev

为什么WindsorDependencyResolver无法解析?

来自分类Dev

为什么无法解析setTypeFace()?

来自分类Dev

为什么WebClient无法解析?

来自分类Dev

为什么DNS无法解析?

来自分类Dev

为什么无法解析名称?

Related 相关文章

  1. 1

    `无法解析引用`带有反应预设的eslint警告

  2. 2

    React,Babel,Webpack无法解析jsx代码

  3. 3

    为什么我的宏变量无法解析?

  4. 4

    为什么我无法解析符号“ R”?

  5. 5

    为什么我的反应状态无法正确更新?

  6. 6

    为什么我的班级样式无法被识别?反应

  7. 7

    反应为什么我的clearInterval无法停止setInterval?

  8. 8

    为什么我们需要使用导入“ babel-polyfill”;在反应成分?

  9. 9

    React,Babel,Webpack无法解析jsx,意外的令牌错误

  10. 10

    React,Babel,Webpack无法解析jsx,意外的令牌错误

  11. 11

    为什么Elasticsearch批量API无法解析我的JSON?

  12. 12

    为什么我的标签助手无法正确解析?

  13. 13

    为什么我的bash函数无法解析可选参数?

  14. 14

    为什么无法使用域名前缀“ www”解析我的网站?

  15. 15

    为什么我的Swift中的JSON代码无法解析?

  16. 16

    为什么angularjs无法正确解析我的对象?

  17. 17

    为什么我无法将SingularValueDecomposition解析为类型?

  18. 18

    为什么我的browserify要求路径无法在Windows中解析?

  19. 19

    为什么我的本地服务器都无法解析?

  20. 20

    为什么我的解析任务有时无法完成?

  21. 21

    为什么firefox无法打开以在vim中解析我的php?

  22. 22

    为什么我的迭代器的方法无法解析?

  23. 23

    为什么我无法使用 Apache CLI 解析选项

  24. 24

    为什么我无法在chrome控制台中看到我的对象的反应?

  25. 25

    为什么WindsorDependencyResolver无法解析?

  26. 26

    为什么无法解析setTypeFace()?

  27. 27

    为什么WebClient无法解析?

  28. 28

    为什么DNS无法解析?

  29. 29

    为什么无法解析名称?

热门标签

归档