Error aborted because is not accepted

I am trying to set up webpack hot reloading with react-hot-loader. It mostly seems to be working. I am using webpack in an existing rails app.

But it isn’t hot-reloading. It is simply triggering a reload every time my react code is changed. The error messages I get are:

[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

Here is my webpack.hot.config.js settings:

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

};

And I run the code with

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

The rails development environment serves the webpack files outside the application asset pipeline via the webpack-dev-server because of the following setting in my development.rb file.

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

I have been trying to get this working for hours. Any help would be appreciated.

Thanks guys!

When trying to hot-update React components with webpack-hot-middleware, I receive the following error every time:

Uncaught (in promise) Error: Aborted because ./SomeComponent.js is not accepted

I’m not exactly sure why that happens… But I’ve noticed that:

I can hot-update anything else (manually replacing my redux-reducer using module.hot.accept, reload css using style-loader, etc.).

Stepping through with the debugger, I can see that in file process-update.js line 32, The callback function given to module.hot.check is never called. It seems the hotCheck() function assigns its apply parameter (the callback) to a global hotApplyOnUpdate. This function is then given to hotApply() which expects to receive an options object, and not a callback.

Searching for all usages of hotApplyOnUpdate yields:

• Initially defined as true;
• Assigned to be the given apply parameter every time hotCheck() is called.
• Given as an argument to hotApply() inside hotUpdateDownloaded().

So, is it a problem with webpack’s HMR plugin?

I’m using:

webpack@2.0.5-beta
webpack-dev-middleware@1.5.1
webpack-hot-middleware@2.6.4

The app is not accepting the update and throws a warning Error: Aborted because ... is not accepted

webpack.config

module.exports = {
  "entry": ["whatwg-fetch", "babel-polyfill", "./app/app.js"],

  "stats": {
      "colors": false,
      "modules": true,
      "reasons": true
  },

  "failOnError": true, 

  "resolve": {
    "extensions": ['.js', '.jsx', '.json']
  },

  "module": {
    "loaders": [
      {
        "test": /.jsx?$/,
        "exclude": /node_modules/,
        "loaders": ["babel-loader"]
      }
    ]
  },
}

grunt config

  {
      "webpack": _.extend(_.clone(webpackConfig), {
        "output": {
            "path": __dirname,
            "filename": "abc.js",
            "publicPath": "http://localhost:8080/",
        }
      }),

      "contentBase": __dirname + "/../../app",
      "filename": "abc.js",
      "inline": true,
      "hot": true,
    }

Expected Behavior

The app should update only selective components based on the HMR update.

Current Behavior

It reloads after throwing the above mentioned warning.

Your Environment

In my sentry.common.config.js am i defining the beforeSend and beforeSendTransaction hook to be used for the client and server config.

E.g.

/**
 * beforeSend Hook with data scrubbing
 * @param {Event} event Sentry Event object available in the beforeSend hook
 * @returns {Event} Modified event with scrubbed data
 */
export const beforeSend = (event) => {
    const exception = scrubData(event.exception, keyBlacklist, scrubCallback);

    // breadcrumbs only uses sentry properties, not dynamic properties from our codebase.No need to apply a list of blacklisted properties
    const breadcrumbs = scrubData(event.breadcrumbs, null, scrubCallback);
    const request = scrubData(event.request, keyBlacklist, scrubCallback);

    return {
        ...event,
        exception,
        breadcrumbs,
        request,
    };
};

/**
 * beforeSendTransaction Hook with data scrubbing
 * @param {Event} event Sentry Event object available in the beforeSend hook
 * @returns {Event} Modified event with scrubbed data
 */
export const beforeSendTransaction = (event) => {
    // spans contain performance data which may include raw urls.
    // Here, we must lookout for url values, e.g. "/password-reset?email=john@example.com" or "/phone-number/reserve/9281929" and remove personal information
    const spans = scrubData(event.spans, null, scrubCallback);
    const breadcrumbs = scrubData(event.breadcrumbs, null, scrubCallback); // breadcrumbs only uses sentry properties, no need to apply a list of blacklisted properties
    const request = scrubData(event.request, keyBlacklist, scrubCallback);
    return {
        ...event,
        spans,
        breadcrumbs,
        request,
    };
};

Where scrubData is a method that traverses through all nested objects/array elements, and looks for blacklisted key names or applies data scrubbing on the primitive value.

Hi,

There’s not enough information to debug. Any chance you could include a full project?

I think I see now. You have to implement the client interface somehow. I have a small write-up here.

@bebraw thanks a lot, its working now 👍

@bebraw , hello, I have implemented the client interface, but console still outputs:

log.js:25 Ignored an update to unaccepted module ./src/print.js -> 1
log.js:25 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
log.js:25 [HMR]  - ./src/print.js

the whole console message is:

log.js:23 [HMR] Waiting for update signal from WDS...
log.js:23 [HMR] Waiting for update signal from WDS...
client?cd17:64 [WDS] Hot Module Replacement enabled.
client?cd17:64 [WDS] Hot Module Replacement enabled.
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:193 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
client?cd17:193 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:25 Ignored an update to unaccepted module ./src/print.js -> 1
./node_modules/webpack/hot/log.js.module.exports @ log.js:25
onUnaccepted @ only-dev-server.js:25
hotApply @ bootstrap e5893b5…:437
(anonymous) @ only-dev-server.js:20
log.js:25 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
./node_modules/webpack/hot/log.js.module.exports @ log.js:25
./node_modules/webpack/hot/log-apply-result.js.module.exports @ log-apply-result.js:12
(anonymous) @ only-dev-server.js:39
log.js:25 [HMR]  - ./src/print.js
./node_modules/webpack/hot/log.js.module.exports @ log.js:25
(anonymous) @ log-apply-result.js:14
./node_modules/webpack/hot/log-apply-result.js.module.exports @ log-apply-result.js:13
(anonymous) @ only-dev-server.js:39
log.js:23 [HMR] Nothing hot updated.
log.js:23 [HMR] App is up to date.
index.js:8 Accepting the updated printMe module!
log.js:23 [HMR] Updated modules:
log.js:23 [HMR]  - ./src/print.js
log.js:23 [HMR] App is up to date.

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hotOnly: true,
  },
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hot Module Replacement',
      filename: 'index.html',
    }),
    new CleanWebpackPlugin(['dist']),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ],
};

./src/index.js:

import _ from 'lodash';
import printMe from './print.js';

if(module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');

    document.body.removeChild(element);
    element = component();
    document.body.appendChild(element);
  });
}

let element = component();

function component() {
  const element = document.createElement('div');
  const btn = document.createElement('button');

  element.innerHTML = _.join(['Hell', 'webpack'], ' ');

  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;

  element.appendChild(btn);

  return element;
}

document.body.appendChild(element);

./src/print.js:

export default function printMe() {
  //console.log('I get called from print.js!');
  console.log('Updating print.js...')
}

package.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [
    "webpack",
    "demo"
  ],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.4"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.16",
    "html-webpack-plugin": "^2.29.0",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

other environment:

• node v7.4.0
• npm 4.0.5
• macOS Sierra 10.12
• Chrome v59.0.3071.115

please give me help.

[Изменить] Github Test Repo, созданный для тестирования !!

У меня горячая перезагрузка без каких-либо проблем, но она перезагружает всю страницу всякий раз, когда я делаю одно изменение css. Я бы хотел, чтобы он вводил любые изменения css и в идеале делал то же самое с реагирующими компонентами, если полная перезагрузка действительно не требуется.

** Я получаю следующие журналы консоли **

[WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
client?cd17:41 [WDS] App hot update...
dev-server.js:33 [HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:33
dev-server.js:34 [HMR] Error: Aborted because ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css is not accepted
Update propagation: ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css -> ./src/components/shared/userPages/userPages.css -> ./src/components/Signin/index.js -> ./src/routes.js -> ./src/index.js -> 0
    at hotApply (http://localhost:8080/dist/main.js:430:30)
    at hotUpdateDownloaded (http://localhost:8080/dist/main.js:283:13)
    at hotAddUpdateChunk (http://localhost:8080/dist/main.js:263:13)
    at webpackHotUpdateCallback (http://localhost:8080/dist/main.js:8:12)
    at http://localhost:8080/dist/0.75f9c418ba8b1fdc9ad0.hot-update.js:1:1

конфигурация веб-пакета

/* eslint-disable */
const Config = require('webpack-config').default;
const webpack = require('webpack');
const DashboardPlugin = require('webpack-dashboard/plugin');
const {environment} = require('webpack-config');
const path = require('path');

environment.set('cssIdent', '[path]___[name]__[local]___[hash:base64:5]');

module.exports = new Config().extend('./webpack.base.config.js').merge({
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  devServer: {
    contentBase: [
      'demo/'
    ],
    hot: true,
    historyApiFallback: true,
    host: '0.0.0.0',
    publicPath: '/dist/'
  },
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  devtool: 'inline-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        BABEL_ENV: JSON.stringify('development')
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new DashboardPlugin()
  ],
  cache: true
});

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import { AppContainer } from 'react-hot-loader';
import { ConnectedRouter } from 'react-router-redux'
import injectTapEventPlugin from 'react-tap-event-plugin';
import nprogress from 'nprogress';
import store from './configureStore';
import Routes from './routes';
import './components/shared/main.css';
import createHashHistory from 'history/createHashHistory'
const history = createHashHistory({
  hashType: 'slash'
});

//Remove on screen tap delay
injectTapEventPlugin();

//Add progress bar
nprogress.configure({ minimum: 0.15, showSpinner: false, speed: 500 });

// Now you can dispatch navigation actions from anywhere!
// store.dispatch(push('/foo'))

ReactDOM.render(
  <AppContainer>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routes/>
      </ConnectedRouter>
    </Provider>
  </AppContainer>,
  document.getElementById('app')
);

< Сильный > Store.js

import { createStore, applyMiddleware, compose } from 'redux'
import { createLogger } from 'redux-logger'
import { routerMiddleware } from 'react-router-redux'
import reducers from './reducers';

const configureStore = function (history, preloadedState = {}) {
  // Build the middleware for intercepting and dispatching navigation actions
  const middlewareHistory = routerMiddleware(history);

  const store = createStore(
    reducers,
    preloadedState,
    compose(
      applyMiddleware(createLogger(), middlewareHistory)
    )
  );

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./reducers', () => {
      const nextReducer = require('./reducers').default;

      store.replaceReducer(nextReducer);
    });
  }

  return store;
};

export default configureStore(history);

Случайный компонент

import React from 'react';
import { NavLink } from 'react-router-dom'
import store from '../../configureStore';

import userStyles from '../shared/userPages/userPages.css';

class SignIn extends React.Component {
  render(){
    return (
      <div className={userStyles.home}>
      </div>
    );
  }
}

export default SignIn;

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-0",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ],
  "env": {
    "development/client": {
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true
        }]
      ]
    },
    "test": {
      "presets": ["es2015"],
      "plugins": [
        ["transform-runtime", {
          "helpers": false,
          "polyfill": false,
          "regenerator": true
        }]
      ]
    }
  }
}