ReactDOM.render() не работает — вам может понадобиться соответствующий загрузчик для обработки этого типа файла

Я прошел курс на Udemy.com и столкнулся с проблемой, которую не могу решить. У меня установлен webpack, а также babel, и я следовал инструкциям во второй раз, чтобы дважды проверить, не ошибся ли я.

При попытке запустить этот код в моем index.js:

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

ReactDOM.render(
  <div>HELLO!</div>, document.getElementById('root')
);

Я получаю сообщение об ошибке:

ОШИБКА в ./app/index.js Ошибка синтаксического анализа модуля: /Users/Kyle/Documents/React Native Workspace/es6Project/app/index.js Неожиданный токен (5:2). Для обработки файлов этого типа может потребоваться соответствующий загрузчик.

| 
| ReactDOM.render(
|   <div>HELLO!</div>, document.getElementById('root')
| );
| 
 @ multi (webpack)-dev-server/client?http://localhost:3000 ./app/index.js

Вот мой package.json:

{
  "name": "es6Project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "babel": {
    "presets": [
      "es2015",
      "es2016",
      "es2017",
      "react"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.3",
    "react-dom": "^16.0.0",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

Вот мой webpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: ['./app/index.js'],
  output: {
    path: __dirname + '.build',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        module: {
          loaders: [
            {
              loader: 'babel-loader',
              test: /\.jsx?$/,
              exclude: /node_modules/,
              query: {
                presets: ['es2015', 'react']
              }
            }
          ]
        }
      }
    })
  ],
  devServer: {
    port: 3000,
    contentBase: './build',
    inline: true
  }
}

javascript react-dom render ecmascript-6
person k.barnes775    schedule 29.09.2017    source источник
comment
Почему весь ваш конфиг забит в LoaderOptionsPlugin? Просто используйте обычную конфигурацию веб-пакета.   -  person loganfsmyth    schedule 29.09.2017

Ответы (2)


arrow_upward
2
arrow_downward

Ваша конфигурация веб-пакета неверна. Ошибка, которую вы получаете, связана с JSX, неспособностью быть проанализированы из-за неправильной конфигурации.

Кроме того, поскольку вы создаете новый проект, почему вы используете плагин? что его цель - перейти с версий webpack 1.x на 2.x?

Если вы используете веб-пакет версии 2.x, измените module.exports, чтобы он содержал:

module: {
    rules: [
        {
            test: /\.(js)$/,
            use:[{
                    loader: 'babel-loader',
                    query: {
                        compact: false,
                        presets: [["es2015", {"modules": false, "loose" : true}], 'react']

                    }
                }]
        }
    ]
}
person Sotiris Kiritsis    schedule 29.09.2017

arrow_upward
0
arrow_downward

проверьте свое приложение, где у вас есть рендеринг вашего приложения. проверьте свой html-файл. код, который у вас есть, это хорошо.

пожалуйста, прочтите учебник по ReactJS

https://www.tutorialspoint.com/reactjs/reactjs_overview.htm

person react-dev    schedule 29.09.2017