webpack問題當試圖呈現在reactjs

嗨，我是一個新手在反應js，並試圖建立一個測驗應用程序。當試圖這樣做時，我得到一個錯誤，當渲染正在調用..webpack問題當試圖呈現在reactjs

下面是webpack.config文件： -

module.exports = { 
    entry: { 
    app: './src/index.js' 
    }, 

    // Add resolve.extensions. 
    // '' is needed to allow imports without an extension. 
    // Note the .'s before extensions as it will fail to match without!!! 
    resolve: { 
    extensions: ['', '.js', '.jsx', '.es6.js'] 
    }, 

    output: { 
    path: __dirname, 
    filename: 'app/js/main.js' 
    }, 
    module: { 
    loader: [ 
//  { 
//  test: /\.css$/, 
//  loaders: ['style', 'css'], 
//  // include: PATHS.app 
// 
//  }, 
     // Set up jsx. This accepts js too thanks to RegExp 
    { 
    test: /\.jsx?$/, 
    exclude: /(node_modules|bower_components)/, 
presets:['es2015','react'], 
    loader: 'jsx-loader' 
// query: { 
// presets: ['react'] 
//  } 
    } 
    ] 
    } 
};

以下是我的index.js文件： -

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

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

//React.createElement(People, {})

，以下是我App.jsx： -

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 

class App extends Component{ 
    render(){ 
     return(
     <div>Appppppoihj</div> 
     ) 
    } 

} 

export default App

最有趣的部分是當我試圖調用renderDOM.render，我讓我的index.js文件中的錯誤..

我得到的問題是： -

ERROR in ./src/index.js 
Module parse failed: C:\Users\Th\Desktop\ReactJs_Master\src\index.js Unexpected token (6:4) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (6:4)

以下是我的package.json： -

{ 
    "name": "react_quiz", 
    "version": "1.0.0", 
    "description": "quiz with the help of reactjs", 
    "main": "script.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Pratham", 
    "license": "ISC", 
    "devDependencies":{ 
     "babel-core":"5.8.*", 
     "babel-loader":"5.3.*", 
     "webpack":"1.12.*" 
    }, 
    "dependencies":{ 
     "react":"15.0.1", 
     "react-dom":"15.0.1" 
    } 
}

我已經嘗試了這個網站上的所有不同的網站和解決方案，但他們都不是helpi ng我到目前爲止..錯誤是在應用程序組件中的<來電時reactDOM.render

如果你們中的任何人都可以幫助我，因爲我長時間卡在這個，而沒有得到任何形式的解決方案..

非常感謝您的幫助。

來源

2016-04-26 Catmandu

的我得到這個的原因之一，是因爲故宮的我之前安裝的模塊，如@al exander指出我刪除了npm模塊，並使用了他在下面推薦的命令和代碼更改。它爲我解決了這個問題 – Catmandu

而不是jsx-loader嘗試使用babel-loader

module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel', 
     query: { presets: ['es2015', 'react'] } 
    }] 
    }

注意 - 確保您已經安裝了這些程序包

npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

更新

你也可以擺脫webpack.configpresets選項.babelrc

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

來源

2016-04-26 14:09:09

webpack問題當試圖呈現在reactjs

回答

相關問題