webpack 使用react-hot-loader获取“Aborted because 0 is not accepted”(由于0未被接受而中止)和全页重载

wwwo4jvm 于 2022-11-13 发布在 Webpack

关注(0)|答案(6)|浏览(305)

我正在尝试用react-hot-loader来设置webpack热重新加载。它 * 大部分 * 似乎都在工作。我正在一个现有的rails应用程序中使用webpack。
但这不是热重载，只是在每次我的react代码改变时触发重载，我得到的错误信息是：

[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在应用程序资产管道之外提供webpack文件，这是因为我的development.rb文件中有以下设置。

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

我已经试着让这个工作了几个小时了。任何帮助都将不胜感激。
谢谢你们！

webpack

来源：https://stackoverflow.com/questions/35811809/getting-aborted-because-0-is-not-accepted-and-full-page-reload-with-react-hot

6条答案

按热度按时间

vvppvyoh1#

好吧，我得到了同样的错误，但在尝试了一些东西后，我想通了：我的根组件是一个无状态的函数组件（纯函数）。我把它重构为一个类组件，然后砰！热重载又开始工作了。
之前：

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

之后：

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

赞(0）回复(0）举报 2022-11-13

hof1towb2#

我最近遇到了这个问题，我的解决方法是从entries数组中删除此问题：'webpack-dev-server/client?http://localhost:9000/', .
由于我还将--hot作为命令行参数运行，因此有两个webpack-dev-server示例进入了错误状态。

赞(0）回复(0）举报 2022-11-13

xeufq47z3#

我不知道这是否会对您的问题有所帮助，但我最近也遇到了这个错误-我通过向我试图使用hmr设置的模块添加.js扩展来修复它-这是我的代码

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

我使用webpack ^2.0.0-beta将其更新为getRoutes = require('app/Routes.js')，错误消失了。
如果我添加JS扩展作为hot accept的第一个参数，它也可以工作，如下所示：

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

所以现在它与webpack HMR page上的内容匹配

赞(0）回复(0）举报 2022-11-13

q35jwt9p4#

我遇到了一个类似的问题。经过两天的研究和尝试不同的东西，我发现了我的问题有史以来最简单的原因：在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

赞(0）回复(0）举报 2022-11-13

h22fl7wq5#

由于上面提供的答案在我这边仍然不起作用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"
  },

赞(0）回复(0）举报 2022-11-13

46scxncf6#

对于“网络包”：“^5.74.0”和“网络包开发服务器”：“^4.11.1”。我在webpack.config.js中设置了devServer.static =['./webpack-dev-server'，'./dist']。下面是我的配置：

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']
}

}

赞(0）回复(0）举报 2022-11-13

我来回答

webpack 使用react-hot-loader获取“Aborted because 0 is not accepted”(由于0未被接受而中止)和全页重载

6条答案

相关问题

热门标签

最新问答