javascript - 尝试在 reactjs 中呈现时出现 webpack 问题

Question

您好，我是 React js 的新手，正在尝试构建一个测验应用程序。尝试这样做时，我在调用渲染时遇到错误。

下面是 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"
  }
}

我已经在这个网站上尝试了所有不同的网站和解决方案，但到目前为止，没有一个对我有帮助。错误来自 <在应用程序组件中调用 reactDOM.render

如果你们中的任何人都可以帮助我，我会很有帮助，因为我在这个问题上停留了很长时间并且没有得到任何解决方案..

非常感谢您的帮助。

Answer 1

尝试使用 babel-loader 而不是 jsx-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

• > babel-loader
• > babel-core
• > babel-preset-es2015
• > babel-preset-react

更新

您还可以将 presets 选项从 webpack.config 移动到 .babelrc

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