我正在尝试创建一个react.js项目，但在每个有关index.js文件的项目中都发生了相同的错误，如何解决此错误？

编程问答 2022-08-13

问题描述

./ src / index.js 9：2中的错误 模块解析失败：意外的令牌（9：2） 您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。参见https://webpack.js.org/concepts#loaders | | ReactDOM.render（

|

这是我的index.js文件代码 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import _ from 'lodash';

ReactDOM.render(
  <React.StrictMode>
    
    <App />
  </React.StrictMode>,document.getElementById('root')
);

serviceWorker.unregister();

这是我的webpack.config.js文件代码 

const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
const path = require( 'path' );
module.exports = {
   mode:"development",context: __dirname,entry: './src/index.js',output: {
      path: path.resolve( __dirname,'dist' ),filename: 'main.js',publicPath: '/',},devServer: {historyApiFallback: true },module: {
      rules: [
         {
            test: /\.js?$/,exclude:'/node_module/',use: 'babel-loader',{
            test: /\.css$/,use: ['style-loader','css-loader'],{
            test: /\.(png|j?g|svg|gif|jpg)?$/,use: 'file-loader'
         }
]
   },plugins: [
      new HtmlWebPackPlugin({template: path.resolve( __dirname,'public/index.html' ),filename: 'index.html'
      })
   ]
};

这是我的package.json文件 

{
  "name": "create-burger-builder","version": "0.1.0","private": true,"dependencies": {
    "@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.5.0","@testing-library/user-event": "^7.2.1","babel-preset-env": "^1.7.0","babelify": "^10.0.0","browserify": "^16.5.2","core-util-is": "^1.0.2","react": "^16.13.1","react-dom": "^16.13.1","react-scripts": "3.4.3"
  },"scripts": {
    "webpack-dev-server": "webpack-dev-server","dev": "webpack-dev-server --mode=development","prod": "webpack --mode=production"
  },"eslintConfig": {
    "extends": "react-app"
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  },"devDependencies": {
    "babel-cli": "^6.26.0","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","babel-preset-stage-2": "^6.24.1","css-loader": "^4.2.2","file-loader": "^6.0.0","style-loader": "^1.2.1","webpack": "^4.44.1","webpack-cli": "^3.3.12"
  }
}

这是我的.babelrc文件代码 

{
    "presets": [
    [ "@babel/preset-env",{
    "modules": false,"targets": {
    "browsers": [
    "last 2 Chrome versions","last 2 Firefox versions","last 2 Safari versions","last 2 iOS versions","last 1 Android version","last 1 ChromeAndroid version","ie 11"
    ]
    }
    } ],"@babel/preset-react"
    ],"plugins": [ "@babel/plugin-proposal-class-properties" ]
    }

这是我的index.html文件代码 

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <Meta name="viewport" content="width=device-width,initial-scale=1" />
    <Meta name="theme-color" content="#000000" />
    <Meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

*****这是我的App.js文件代码***** 

import React from 'react';
import Layout from './components/Layout/Layout';
import BurgerBuilder from './containers/burgerBuilder/BurgerBuilder';
import './App.css';

function App() {
  return (
    <div className="App">
  
    </div>
  );
}

export default App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babel-loaderreactjsreactjsreactjsreactjswebpackwebpackwebpack