时间戳

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

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

问题描述

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

错误：- ** ./src/index.js 中的错误 6:16 模块解析失败：意外令牌 (6:16) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loa rs | 从'./components/App'导入应用程序；|

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

项目结构 项目结构图片

以下是我的文件。

包.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"]
}

索引.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>

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

标签： reactjswebpackwebpack-4

解决方案

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

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

推荐阅读