模块在JSX解析失败，在webpack中找不到错误，babel配置

我已经浏览了这个设置的详细信息很多次了，它曾经是一次次的唤醒，现在有一个错误...模块在JSX解析失败，在webpack中找不到错误，babel配置

ERROR in ./src/index.js 
Module parse failed: /Users/Jeff/javascript/testbuildwords/src/index.js Unexpected token (5:11) 
You may need an appropriate loader to handle this file type. 
| class MyComponent extends React.Component { 
| render() { 
|  return <div>This is my component</div>; 
| } 
| }

我觉得，误差必须在这些文件中的某个地方，但我看着他们，他们相比与其他1000次，我无法找到错误

webpack.config.js

const path = require("path"); 

module.exports = { 
    entry: "./src/index.js", 
    output: { 
    path: path.resolve(__dirname, "build"), 
    filename: "index.js", 
    libraryTarget: "commonjs2" 
    }, 
    module: { 
    rules: [ 
     { 
     test: /.js$/, 
     include: path.resolve(__dirname, "src"), 
     exclude: /(node_modules|bower_components|build)/, 
     use: "babel-loader" 
     }, 
     { 
     test: /.css$/, 
     use: ["style-loader", "css-loader"] 
     }, 
     { 
     test: /.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/, 
     use: [ 
      { 
      loader: "file-loader", 
      options: {} 
      } 
     ] 
     } 
    ] 
    }, 
    externals: { 
    react: "commonjs react" 
    } 
};

.babelrc

{ 
    "presets": ["env"], 
    "plugins": [ 
    "transform-object-rest-spread", 
    "transform-react-jsx", 
    "transform-class-properties" 
    ] 
}

的package.json

{ 
    "name": "testbuildwords", 
    "version": "0.1.0", 
    "main": "build/index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "webpack --watch", 
    "build": "webpack" 
    }, 
    "author": "", 
    "license": "ISC", 
    "description": "", 
    "dependencies": { 
    "css-loader": "^0.28.7", 
    "file-loader": "^1.1.5", 
    "prop-types": "^15.6.0", 
    "react": "^16.0.0", 
    "react-dom": "^16.0.0", 
    "style-loader": "^0.19.0", 
    "webpack": "^3.6.0" 
    }, 
    "devDependencies": { 
    "babel-cli": "^6.26.0", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-plugin-transform-class-properties": "^6.24.1", 
    "babel-plugin-transform-object-rest-spread": "^6.26.0", 
    "babel-plugin-transform-react-jsx": "^6.24.1", 
    "babel-preset-env": "^1.6.0", 
    "eslint-plugin-class-property": "^1.0.6" 
    } 
}

./src/index.js

import React from "react"; 

class MyComponent extends React.Component { 
    render() { 
    return <div>This is my component</div>; 
    } 
} 
export default MyComponent;

来源

2017-10-11 deltaskelta

你的日志后说，在SRC/index.js错误你能粘贴呢？ – Gautam

@Gautam ...添加到帖子 – deltaskelta

试试我的答案在下面，它应该工作。 – Gautam

尝试添加babel react-preset。

{ 
    "presets": ["env", "react"] 
}

来源

2017-10-11 15:41:15

不幸的是没有工作 – deltaskelta

我认为Webpack无法隐式地解析.jsx文件。如果你添加应该被解析到webpack.config.js文件？：扩展

resolve: { 
    extensions: ['', '.js', '.jsx'] 
}

来源

2017-10-11 15:50:07 elbecita

再添加一个规则与预置解决JSX扩展

test: /.jsx$/, 
include: path.resolve(__dirname, "src"), 
exclude: /(node_modules|bower_components|build)/, 
use: { 
    loader: 'babel-loader', 
    options: { 
     presets: ['es2015', 'react', 'babel-preset-stage-0'] 
    } 
}

而在决心块添加JSX像

resolve: { 
    extensions: ['', '.jsx', '.js'] 
}

来源

2017-10-11 16:11:14

-1

没有任何答案对我有帮助。我最终加入webpack到dependencies而不是devDependencies因为大多数其他的事情，的WebPack使用被列在那里，这个问题澄清了这

来源

2017-10-11 16:47:50 deltaskelta

模块在JSX解析失败，在webpack中找不到错误，babel配置

回答

相关问题