Webpack 4 и Babel 7 «импортируют» Uncaught SyntaxError: неожиданный идентификатор в React

Я пытался настроить Webpack 4 и Babel 7 для работы с «импортом» ES6 в React. Я продолжаю получать "Uncaught SyntaxError: Unexpected identifier" при "import React from 'react';" в Chrome 71. Он работал в Webpack 3 и Babel 6, поэтому я думаю, что я что-то делаю не так с настройкой Babel.

Это мои зависимости от разработчиков:

"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.6",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-loader": "^8.0.4",
"webpack": "^4.26.0",
"webpack-dev-server": "^3.1.10"

Мой .babelrc выглядит так:

{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/syntax-dynamic-import"]
]
}

Я тоже пробовал babel.config.js, но безуспешно.

Мой файл webpack-config.js:

const HTMLWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/src/index.html',
    filename: 'index.html',
    injext: 'body'
})

module.exports = {
    entry: ["babel-polyfill", __dirname + '/src/index.js'],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css-loader!sass-loader')
            },
        ]
    },

    output: {
        filename: 'transformed.js',
        path: __dirname + 'build'
    },
    devServer: {
      contentBase: './src/',
      historyApiFallback: true,
      hot: true,
      port: 8000,
      publicPath: "/src/public",
      noInfo: false
    },
    plugins: [
        HTMLWebpackPluginConfig,
        new ExtractTextPlugin('public/css/style.css', {
            allChunks: true
        }),

        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
        }),
    ]}

Webpack действительно что-нибудь связывает? Можете ли вы показать скомпилированный скрипт, который читает браузер?

Sammy Taylor 20.11.2018 15:30

Я думаю, что столкнулся с той же проблемой в прошлом году, я понизил свой веб-пакет до "webpack": "3.10.0",. Посмотрим, поможет ли это. Также мой .babelrc использует "presets": ["react"]. Насчет babel/preset-react я не уверен. Обрежьте и ваш файл .webpack-config.js, возможно, чего-то не хватает?

Nikko Khresna 20.11.2018 15:31

@SammyTaylor Спасибо! Я вижу, что пакета нет, так что, наверное, многое объясняет. Я добавлю свою конфигурацию webpack как правку выше. Пожалуйста, дайте мне знать, если вам понадобится дополнительная информация! Спасибо

Loerpert 20.11.2018 15:46

@NikkoKhresna Да, babel / preset-response - это синтаксис babel v4. :) Я действительно предпочитаю не возвращаться к Webpack 3. Я добавил свою конфигурацию webpack как правку выше.

Loerpert 20.11.2018 15:46

Я уверен, что это не синтаксис webpack4 injext: 'body'? Хотя я не уверен, что проблема в этом ... Лемм, проверяю еще раз

Nikko Khresna 20.11.2018 16:01

Спасибо, посмотрю, изменится ли что-нибудь.

Loerpert 20.11.2018 16:04

К сожалению, это ничего не меняет.

Loerpert 20.11.2018 16:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
7
1 146
1

Ответы 1

Хорошо, похоже, я исправил проблему после того, как пропустил конфигурацию моего веб-пакета. Проблема была вызвана следующим:

devServer: {
  contentBase: './src/',
  historyApiFallback: true,
  hot: true,
  port: 8000,
  publicPath: "/src/public",
  noInfo: false
},

Я посмотрю, смогу ли я найти, что именно заставляет Webpack не связываться с этим. В любом случае спасибо за помощь!

Другие вопросы по теме