当前位置: 首页 > 知识库问答 >
问题:

模块分析失败:。您可能需要一个适当的加载程序来处理此文件类型,当前没有配置任何加载程序来处理此文件。“

陆宏壮
2023-03-14

我正面临下面的错误。我尝试了所有的解决方案在其他文章中提到的相同的问题。但没有运气。请帮帮忙。

下面是我的档案。

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'),
    }),
  ]
};
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
<!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>

应用程序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"));

共有1个答案

堵茂勋
2023-03-14

查看您的package.json,似乎是babel版本导致了错误。如果使用webpack4.x,则应使用babel-loader8.x和babel7.x,请参阅webpack-babel-loader

尝试升级babel-*,您可以从这里获取待办事项列表

 类似资料: