Webpack錯誤解釋React模塊/文件

目前我有兩個文件在我的webpack腳本構建中，script.js和contact-menu.js。如果我在主文件script.js上創建反應組件，則它會轉換成正常。如果創建反應的組分在接觸menu.js，並嘗試導出導入它提供了以下錯誤：Webpack錯誤解釋React模塊/文件

> ERROR in ./babel/contact-menu.js Module parse failed: 
> /Applications/MAMP/htdocs/mcdonalds excavation/themes/mcdonalds/babel/contact-menu.js 
> Unexpected token (7:3) You may need an appropriate loader to handle 
> this file type. |  render(){ |   return(|   <div 
> id="contact-menu-container"> |    <div id="contact-menu-btn"> | 
>     Close @ ./babel/script.js 11:19-47

我試圖從爵士到JSX重命名文件，藏漢作爲改變對我的WebPack配置的入口點

的WebPack配置

var path = require('path'); 
var debug = process.env.NODE_ENV !== 'production'; 
var webpack = require('webpack'); 


module.exports = { 
    context: __dirname, 
    devtool: debug ? 'inline-sourcemap' : null, 
    entry: './babel/script.js', 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'script.js' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.js?$/, 
      exclude: /(node_modules|bower_components)/, 
      include: [path.resolve(__dirname, 'babel/script.js')], 
      loader: 'babel-loader', 
      query: { 
       presets: ['react', 'es2015', 'stage-3'], 
       plugins: ['transform-react-jsx'] 
      } 
     }, { 
      test: /\.scss$/, 
      include: [path.resolve(__dirname, 'sass')], 
      loaders: ['style-loader', 'css-loader', 'sass-loader'] 
     }, { 
      test: /\.(jpe?g|png|gif|svg)$/i, 
      loader: "file-loader" 
     }] 
    }, 
    plugins: debug ? [] : [ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
      mangle: false, 
      sourcemap: false 
     }), 
    ], 
};

的package.json

{ 
     "name": "react-kit", 
     "version": "3.0.0", 
     "description": "React Build Kit With Webpack.", 
     "main": "webpack.config.js", 
     "dependencies": { 
     "react": "^15.4.2", 
     "react-dom": "^15.4.2" 
     }, 
     "devDependencies": { 
     "axios": "^0.15.3", 
     "babel-cli": "^6.18.0", 
     "babel-core": "^6.21.0", 
     "babel-loader": "^6.2.10", 
     "babel-plugin-transform-react-jsx": "^6.8.0", 
     "babel-preset-es2015": "^6.18.0", 
     "babel-preset-react": "^6.16.0", 
     "babel-preset-stage-3": "^6.5.0", 
     "css-loader": "^0.26.1", 
     "fetch-jsonp": "^1.0.6", 
     "history": "^1.17.0", 
     "node-sass": "^4.5.0", 
     "react-router": "^3.0.1", 
     "sass-loader": "^5.0.1", 
     "style-loader": "^0.13.1", 
     "webpack": "^2.2.1", 
     "webpack-dev-server": "^1.14.1" 
     }, 

    "author": "", 
    "license": "MIT" 
}

script.jsx

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

ReactDOM.render(
    <ContactMenu />, 
    document.getElementById('contact-menu') 
)

接觸menu.jsx

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

export default class ContactMenu extends React.Component{ 
    render(){ 
     return(
      <div id="contact-menu-container"> 
       <div id="contact-menu-btn"> 
        Close 
       </div> 
       <div id="contact-menu"> 

       </div> 
      </div> 
     ) 
    } 
}

來源

2017-02-10 NicholasByDesign

我們可以看看'contact-menu.js'嗎？ – csm

@csm我已經更新了這個問題！ – NicholasByDesign

我相信你的WebPack配置這條線的問題是：

include: [path.resolve(__dirname, 'babel/script.js')],

webpack documentation相當稀疏，但是如果指定include，則似乎只有加載器將轉換路徑。如果省略該選項，全部通過test且未在exclude中列出的路徑應由裝載程序進行轉換，包括contact-menu.js。

來源

2017-02-10 22:04:46 csm

Webpack錯誤解釋React模塊/文件

回答

相關問題