Webpack/React：下面的egghead.io教程，但出現錯誤：您可能需要一個合適的加載程序來處理此文件類型

我剛剛開始遵循this教程。Webpack/React：下面的egghead.io教程，但出現錯誤：您可能需要一個合適的加載程序來處理此文件類型

我已經通過了第一個視頻三到四次了。當我嘗試運行應用程序，我得到以下錯誤在控制檯：

ERROR in ./main.js 
Module parse failed: /Users/newuser/projects/js101/react-egghead/main.js Unexpected token (5:16) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (5:16) 
    at Parser.pp.raise (/Users/newuser/projects/js101/react-egghead/node_modules/acorn/dist/acorn.js:920:13) 
...

我看了上如此相似的問題，但沒有人可以對我有一個答案。

這是我的webpack.config.js文件：

module.exports = { 
    entry: './main.js', 
    output: { 
     path: './', 
     filename: 'index.js' 
    }, 
    devServer: { 
     inline: true, 
     port: 3333 
    }, 
    moudle: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    } 
}

這是的package.json樣子：

{ 
    "name": "react-egghead", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.0.2", 
    "react-dom": "^15.0.2" 
    }, 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.9.0", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.5.0", 
    "webpack": "^1.13.0", 
    "webpack-dev-server": "^1.14.1" 
    } 
}

而且，雖然它沒有在視頻中提到的，我已經添加一個.babelrc文件：（我現在已經移除）

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

這是解析失敗（第5行）：

import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './App.js' 

ReactDOM.render(<App />, document.getElementById('app'))

我真的不知道接下來要做什麼。這是我的環境設置問題，還是與main.js中的代碼有關？

任何幫助，將不勝感激。

來源

2016-05-19 user3574603

您正在使用階段0預設，但您尚未安裝它，這可能是問題。 – QoP

錯誤列指向'''''''JSX標記，所以它看起來像jsx是問題，也許正是@QoP說的原因。 ES6導入似乎正確解析。此外，如果您使用babelrc文件，我會避免將查詢參數傳遞給加載器，因爲它可能會造成混淆，一個地方會從另一個地方覆蓋配置。 –

我已經從.babelrc中刪除了stage-0。我也嘗試指定'babel-loader'作爲加載器而不是'babel'。問題依然存在。 – user3574603

你的webpack配置中有一個錯字。而不是module您鍵入moudle，所以您的加載程序配置實際上被webpack忽略:)

來源

2016-05-19 12:54:26

Webpack/React：下面的egghead.io教程，但出現錯誤：您可能需要一個合適的加載程序來處理此文件類型

回答

相關問題