模块解析失败:.您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。"答案

【问题标题】：Module parse failed:.You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."模块解析失败:.您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。"
【发布时间】：2020-07-30 08:36:10
【问题描述】：

我面临以下错误。我尝试了与同一问题相关的其他帖子中提到的所有解决方案。但没有运气。请帮忙。

错误：- **ERROR in ./src/index.js 6:16 Module parse failed: Unexpected token (6:16) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理这个文件。见https://webpack.js.org/concepts#loa rs |从'./components/App'导入应用程序； |

ReactDOM.render(,document.getElementById("app")); i ?wdm?: 编译失败。**

项目结构 Project structure image

以下是我的文件。

package.json

{
  "name": "reactapps",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "nivs",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bable-loader": "0.0.1-security",
    "html-webpack-plugin": "^4.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

webpack.conf.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './build',
    publicPath: '/dist/'
  },
  module: {
    rules: [{
      test: /\.js$|jsx/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./index.html'),
    }),
  ]
};

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>

</body>

</html>

App.js

import React,{Component}  from 'react';

class App extends Component{
  render() {
    return (
    <div><h1>Hello</h1></div>
  );

  }
};
export default App;

index.js

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

import App from './components/App';

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

【问题讨论】：

标签： reactjs webpack webpack-4

【解决方案1】：

查看您的 package.json 似乎是 babel 版本导致了错误。如果你使用webpack 4.x 你应该使用babel-loader 8.x 和babel 7.x， see webpack - babel-loader

尝试升级babel-*，可以从Here获取todo列表

【讨论】：