Не удалось выполнить синтаксический анализ модуля: вам может потребоваться соответствующий загрузчик для обработки этого типа файлов, в настоящее время загрузчики не настроены для обработки этого файла. " - PullRequest
Новая
       3

Не удалось выполнить синтаксический анализ модуля: вам может потребоваться соответствующий загрузчик для обработки этого типа файлов, в настоящее время загрузчики не настроены для обработки этого файла. "

0 голосов
/ 17 апреля 2020

У меня ошибка ниже. Я пробовал все решения, упомянутые в другом посте, связанные с той же проблемой. Но не повезло. Пожалуйста, помогите.

Ошибка: - ** ОШИБКА в ./src/index.js 6:16 Ошибка синтаксического анализа модуля: неожиданный токен (6:16) Вам может потребоваться соответствующий загрузчик для обработки этого типа файла В настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack.js.org/concepts#loa rs | импортировать приложение из «./components/App»; |

ReactDOM.render (, document.getElementById ("app")); i? wdm ?: Не удалось скомпилировать. **

Структура проекта Изображение структуры проекта

Ниже приведены мои файлы.

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'),
    }),
  ]
};

.babelr c

{
  "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>

Приложение. 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 Ответ

0 голосов
/ 20 апреля 2020

Глядя на ваш пакет. json кажется, что версии babel вызвали ошибку. Если вы используете webpack 4.x, вы должны использовать babel-loader 8.x и babel 7.x, см. Веб-пакет - babel-loader

Попробуйте обновить babel- *, Вы можете взять список задач из Здесь

...