模塊在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配置

回答

相關問題