Получение "Прервано, потому что 0 не принято" и полная перезагрузка страницы с реагирующим горячим загрузчиком

Question

Получение "Прервано, потому что 0 не принято" и полная перезагрузка страницы с реагирующим горячим загрузчиком

Я пытаюсь настроить горячую перезагрузку веб-пакета с реагирующим горячим загрузчиком. В основном это похоже на работу. Я использую webpack в существующем приложении rails.

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

[HMR] Cannot apply update. Need to do a full reload! - dev-server.js:18
[HMR] Error: Aborted because 0 is not accepted - dev-server.js:19
  at hotApply (http://localhost:8080/assets/webpack/bundle.js?body=1:380:31)
  at hotUpdateDownloaded (http://localhost:8080/assets/webpack/bundle.js?body=1:293:13)
  at hotAddUpdateChunk (http://localhost:8080/assets/webpack/bundle.js?body=1:273:13)
  at webpackHotUpdateCallback (http://localhost:8080/assets/webpack/bundle.js?body=1:5:12)
  at http://localhost:8080/assets/webpack0.bd89931b2fa8e2901794.hot-update.js:1:1

Navigated to http://lvh.me:3000/react_page

Вот мои настройки webpack.hot.config.js:

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

var config = module.exports = {

    // Set 'context' for Rails Asset Pipeline
    context: __dirname,

    entry: {
        App: [
            'webpack-dev-server/client?http://localhost:8080/', // WebpackDevServer host and port
            'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
            './app/frontend/javascripts/app.js' // Your appʼs entry point
        ],
        vendor: ['jquery', 'react', 'react-dom', 'react-redux', 'redux','redux-thunk']
    },

    devtool: 'inline-source-map',

    // Require the webpack and react-hot-loader plugins
    plugins: [
        //new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.CommonsChunkPlugin(
        {
            name: 'vendor',
            chunks: [''],
            filename: 'vendor.js',
            minChunks: Infinity
        }),
        new webpack.NoErrorsPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jquery': 'jquery'
        })
    ],
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: [
                    'react-hot',
                    'babel?presets[]=es2015&presets[]=react'
                ],
                cacheDirectory: true
            }
        ]
    },
    output: {
        path: path.join(__dirname, 'app', 'assets', 'javascripts', 'webpack'), // Save to Rails Asset Pipeline
        filename: 'bundle.js', // Will output App_wp_bundle.js
        publicPath: 'http://localhost:8080/assets/webpack',

        //publicPath: 'http://localhost:8080/assets/webpack' // Required for webpack-dev-server
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        modulesDirectories: ['node_modules'],
    },

};

И я запускаю код с

webpack-dev-server -d --config webpack.hot.config.js --hot --inline

Среда разработки rails обслуживает файлы веб-пакетов вне конвейера ресурсов приложения через webpack-dev-server из-за следующей настройки в моем файле development.rb.

config.action_controller.asset_host = Proc.new { |source|
  if source =~ /webpack\/bundle\.js$/i
    "http://localhost:8080"
  end
}

Я пытался заставить это работать часами. Любая помощь будет оценена.

Спасибо, парни!

11

javascript reactjs ruby-on-rails webpack react-hot-loader

Источник

user191440 05 мар '16 в 08:17

6 ответов

Другие вопросы по тегам javascript reactjs ruby-on-rails webpack react-hot-loader

user2192680 22 сен '16 в 15:11 2016-09-22 15:11 · Answer 1 · 2016-09-22 15:11

Хорошо, я получал ту же ошибку, но, попробовав кое-что, я понял: мой корневой компонент был функциональным компонентом без состояния (чистая функция). Я переделал его на компонент класса и BAM! горячая перезагрузка снова работает.

До:

const App = (props) => (
  <div>
    <Header links={headerLinks} logoSrc={logoSrc} />
    {props.children}
  </div>
);

После:

class App extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div>
        <Header links={headerLinks} logoSrc={logoSrc} />
        {this.props.children}
      </div>
    );
  }
}

user3568831 14 май '22 в 13:14 2022-05-14 13:14 · Answer 2 · 2022-05-14 13:14

Поскольку приведенные выше ответы все еще не работают на моей стороне с webpack 5, вот рабочая конфигурация из webpack

В webpack.config.js

      devServer: {
    .
    .
    .
    hot: true,
  }

В точку входа webpack index.js добавьте

      if (module.hot) {
    module.hot.accept();
}

В package.json стартовый скрипт

      "scripts": {
    .
    .
    "start": "webpack serve --config /webpack.config.js"
  },

user4052381 14 окт '16 в 19:49 2016-10-14 19:49 · Answer 3 · 2016-10-14 19:49

Я недавно столкнулся с этой проблемой, исправление для меня было удаление этого из entries массив: 'webpack-dev-server/client?http://localhost:9000/',,

Как я тоже бегал --hot в качестве аргумента командной строки, было два экземпляра webpack-dev-server попасть в плохое состояние.

2

Источник

user4052381 14 окт '16 в 19:49

user7449739 17 окт '18 в 09:53 2018-10-17 09:53 · Answer 4 · 2018-10-17 09:53

Я столкнулся с подобной проблемой. После 2 дней исследований и проб разных вещей я обнаружил самую простую причину моей проблемы: в webpack.config.js у меня был включен сервер разработки HRM. И у меня также был сервер HMR, запущенный из командной строки. Благодаря подсказке от Tyler Kelley (см. Выше), просто удалив --hot из командной строки, теперь он работает нормально.

текущий webpack.config.js

devtool: "inline-source-map",
devServer: {
    publicPath: '/dist/',
    contentBase: path.join(__dirname, 'public'),
    port: 9000,
    hot: true
},

С этой конфигурацией не делайте этого:

npx webpack-dev-server --hot --inline

Сделай это:

npx webpack-dev-server

user1426788 26 май '16 в 19:22 2016-05-26 19:22 · Answer 5 · 2016-05-26 19:22

Я не знаю, поможет ли это конкретно вашей проблеме, но я недавно столкнулся с этой ошибкой - я исправил ее, добавив .js расширение модуля, которое я пытался настроить с помощью hmr - вот мой код

if (module.hot) {
  module.hot.accept('app/Routes', () => (
    getRoutes = require('app/Routes')
  ))
}

Я обновил его до getRoutes = require('app/Routes.js') и ошибка исчезла, используя webpack ^2.0.0-beta,

это также работает, если я добавлю расширение JS в качестве первого аргумента горячего подтверждения следующим образом:

if (module.hot) {
  module.hot.accept('app/Routes.js', () => (
    getRoutes = require('app/Routes')
  ))
}

так что теперь это соответствует тому, что на странице HMR веб-пакета

user17126488 06 окт '22 в 12:45 2022-10-06 12:45 · Answer 6 · 2022-10-06 12:45

Для "webpack": "^5.74.0" и "webpack-dev-server": "^4.11.1". Я установил devServer.static = ['./webpack-dev-server', './dist'], в webpack.config.js. Есть мой конфиг:

      module.exports = {
devtool: 'inline-source-map',
devServer: {
    open: true,
    static: ['./webpack-dev-server', './dist']
},
entry: path.join(__dirname, 'src', 'index.ts'),
module: {
    rules: [
        {
            test: /\.(ttf|png|svg|jpg|jpeg)$/i,
            type: 'asset/resource',
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.ts$/,
            loader: 'ts-loader',
            options: {
                configFile: path.join(__dirname, 'tsconfig.json')
            }
        }
    ]
},
mode: 'development',
output: {
    filename: '[name][contenthash].js',
    path: path.join(__dirname, 'dist'),
    clean: true,
},
plugins: [
    new HtmlWebpackPlugin({
        template: path.join(__dirname, 'src', 'index.html'),
        inject: 'body'
    })
],
resolve: {
    extensions: ['.js', '.ts']
}

}