Image not loading in the browser when using URL from CSS file

[coryell1287]

I am building a React application and just upgraded to use Webpack 2. Unfortunately, I am having issues with the new configurations. I want to use background: url(../assets/[some-image].png) to retrieve an image and load it into the browser. However, so far, I have been unsuccessful because the app will not load given my current configurations.

Below is how my webpack configuration looks.

webpack.config.dev.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/index.jsx',
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      actions: path.join(__dirname, 'src/actions/'),
      reducers: path.join(__dirname, 'src/reducers/'),
      store: path.join(__dirname, 'src/store/'),
      router: path.join(__dirname, 'src/router/'),
      components: path.join(__dirname, 'src/components/'),
      containers: path.join(__dirname, 'src/containers/'),
      api: path.join(__dirname, 'src/api/'),
      devTools: path.join(__dirname, 'src/devTools/'),
      assets: path.join(__dirname, 'src/assets/')
    },
  },
  module: {
    rules: [{
      use: 'babel-loader',
      test: /\.jsx?$/
    }, {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        loader: 'css-loader'
      }),
    },{
      test: /\.(jpe?g|png|gif|svg)$/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: 40000,
          name: 'images/[name].[ext]',
          context: './images'
        }
      },
        'image-webpack-loader?{}'
      ]
    }]
  },
  plugins: [
    new ExtractTextPlugin('css/styles.css'),
  ]
};

Below is how my devServer file looks.

devServer.js

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const config = require('./webpack.config.dev');

const app = express();
const port = process.env.PORT || 4000;
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(port, 'localhost', (err) => {
  if (err) {
    console.log(err);
    return;
  }

  console.log(`Listening at http://localhost:${port}`);
});

The image can be viewed when navigating directly to it. But the rest of the app doesn't load. What could be the issue?

Below are the errors from the console.

Invalid HMR message: {"action":"sync","time":9919,"hash":"92c64541c6e875bb4831","warnings":[],"errors":[],"modules":{"0":"./~/process/browser.js","1":"./~/fbjs/lib/invariant.js","2":"./~/fbjs/lib/warning.js","3":"./~/react-dom/lib/reactProdInvariant.js","4":"./~/object-assign/index.js","5":"./~/react/react.js","6":"./~/react-dom/lib/ReactDOMComponentTree.js","7":"./~/fbjs/lib/ExecutionEnvironment.js","8":"./~/react-router/es/index.js","9":"./~/react/lib/ReactComponentTreeHook.js","10":"./~/fbjs/lib/emptyFunction.js","11":"./~/react-dom/lib/ReactInstrumentation.js","12":"./~/prop-types/index.js","13":"./~/react-dom/lib/ReactUpdates.js","14":"./~/react/lib/ReactCurrentOwner.js","15":"./~/react-dom/lib/SyntheticEvent.js","16":"./~/react-dom/lib/DOMProperty.js","17":"./~/react-dom/lib/PooledClass.js","18":"./~/react/lib/ReactElement.js","19":"./~/react/lib/reactProdInvariant.js","20":"./~/warning/browser.js","21":"./~/react-dom/lib/DOMLazyTree.js","22":"./~/react-dom/lib/ReactReconciler.js","23":"./~/react/lib/React.js","24":"./~/fbjs/lib/emptyObject.js","25":"./~/history/PathUtils.js","26":"./~/invariant/browser.js","27":"./~/react-dom/lib/EventPluginHub.js","28":"./~/react-dom/lib/EventPropagators.js","29":"./~/react-dom/lib/ReactInstanceMap.js","30":"./~/react-dom/lib/SyntheticUIEvent.js","31":"./~/react-dom/lib/EventPluginRegistry.js","32":"./~/react-dom/lib/ReactBrowserEventEmitter.js","33":"./~/react-dom/lib/SyntheticMouseEvent.js","34":"./~/react-dom/lib/Transaction.js","35":"./~/react-dom/lib/escapeTextContentForBrowser.js","36":"./~/react-dom/lib/setInnerHTML.js","37":"./~/react/lib/canDefineProperty.js","38":"./~/fbjs/lib/shallowEqual.js","39":"./~/history/LocationUtils.js","40":"./~/history/createTransitionManager.js","41":"./~/lodash-es/isPlainObject.js","42":"./~/react-dom/lib/DOMChildrenOperations.js","43":"./~/react-dom/lib/DOMNamespaces.js","44":"./~/react-dom/lib/EventPluginUtils.js","45":"./~/react-dom/lib/KeyEscapeUtils.js","46":"./~/react-dom/lib/LinkedValueUtils.js","47":"./~/react-dom/lib/ReactComponentEnvironment.js","48":"./~/react-dom/lib/ReactErrorUtils.js","49":"./~/react-dom/lib/ReactUpdateQueue.js","50":"./~/react-dom/lib/createMicrosoftUnsafeLocalFunction.js","51":"./~/react-dom/lib/getEventCharCode.js","52":"./~/react-dom/lib/getEventModifierState.js","53":"./~/react-dom/lib/getEventTarget.js","54":"./~/react-dom/lib/isEventSupported.js","55":"./~/react-dom/lib/shouldUpdateReactComponent.js","56":"./~/react-dom/lib/validateDOMNesting.js","57":"./~/react-redux/es/utils/warning.js","58":"./~/react-router/es/Router.js","59":"./~/react-router/es/matchPath.js","60":"./~/react/lib/ReactComponent.js","61":"./~/react/lib/ReactNoopUpdateQueue.js","62":"./~/redux/es/index.js","63":"(webpack)/buildin/global.js","64":"(webpack)/buildin/module.js","65":"./~/fbjs/lib/EventListener.js","66":"./~/fbjs/lib/focusNode.js","67":"./~/fbjs/lib/getActiveElement.js","68":"./~/history/DOMUtils.js","69":"./~/history/createBrowserHistory.js","70":"./~/hoist-non-react-statics/index.js","71":"./~/html-entities/lib/html5-entities.js","72":"./~/lodash-es/_Symbol.js","73":"./~/prop-types/factory.js","74":"./~/prop-types/factoryWithTypeCheckers.js","75":"./~/prop-types/lib/ReactPropTypesSecret.js","76":"./~/react-dom/lib/CSSProperty.js","77":"./~/react-dom/lib/CallbackQueue.js","78":"./~/react-dom/lib/DOMPropertyOperations.js","79":"./~/react-dom/lib/ReactDOMComponentFlags.js","80":"./~/react-dom/lib/ReactDOMSelect.js","81":"./~/react-dom/lib/ReactEmptyComponent.js","82":"./~/react-dom/lib/ReactFeatureFlags.js","83":"./~/react-dom/lib/ReactHostComponent.js","84":"./~/react-dom/lib/ReactInputSelection.js","85":"./~/react-dom/lib/ReactMount.js","86":"./~/react-dom/lib/ReactNodeTypes.js","87":"./~/react-dom/lib/ReactPropTypesSecret.js","88":"./~/react-dom/lib/ViewportMetrics.js","89":"./~/react-dom/lib/accumulateInto.js","90":"./~/react-dom/lib/forEachAccumulated.js","91":"./~/react-dom/lib/getHostComponentFromComposite.js","92":"./~/react-dom/lib/getTextContentAccessor.js","93":"./~/react-dom/lib/instantiateReactComponent.js","94":"./~/react-dom/lib/isTextInputElement.js","95":"./~/react-dom/lib/setTextContent.js","96":"./~/react-dom/lib/traverseAllChildren.js","97":"./~/react-redux/es/components/connectAdvanced.js","98":"./~/react-redux/es/connect/wrapMapToProps.js","99":"./~/react-redux/es/index.js","100":"./~/react-redux/es/utils/PropTypes.js","101":"./~/react-redux/es/utils/verifyPlainObject.js","102":"./~/react-router-dom/es/Link.js","103":"./~/react-router-redux/es/actions.js","104":"./~/react-router-redux/es/reducer.js","105":"./~/react-router/es/Route.js","106":"./~/react/lib/ReactElementSymbol.js","107":"./~/react/lib/ReactElementValidator.js","108":"./~/react/lib/ReactPropTypeLocationNames.js","109":"./~/react/lib/getIteratorFn.js","110":"./~/redux-logger/lib/helpers.js","111":"./~/redux/es/compose.js","112":"./~/redux/es/createStore.js","113":"./~/redux/es/utils/warning.js","114":"./src/actions/index.jsx","115":"./src/store/configureStore.jsx","116":"(webpack)-hot-middleware/client.js","117":"./src/index.jsx","118":"./~/ansi-html/index.js","119":"./~/ansi-regex/index.js","120":"./~/deep-diff/index.js","121":"./~/fbjs/lib/camelize.js","122":"./~/fbjs/lib/camelizeStyleName.js","123":"./~/fbjs/lib/containsNode.js","124":"./~/fbjs/lib/createArrayFromMixed.js","125":"./~/fbjs/lib/createNodesFromMarkup.js","126":"./~/fbjs/lib/getMarkupWrap.js","127":"./~/fbjs/lib/getUnboundedScrollPosition.js","128":"./~/fbjs/lib/hyphenate.js","129":"./~/fbjs/lib/hyphenateStyleName.js","130":"./~/fbjs/lib/isNode.js","131":"./~/fbjs/lib/isTextNode.js","132":"./~/fbjs/lib/memoizeStringOnly.js","133":"./~/fbjs/lib/performance.js","134":"./~/fbjs/lib/performanceNow.js","135":"./~/history/createHashHistory.js","136":"./~/history/createMemoryHistory.js","137":"./~/html-entities/index.js","138":"./~/html-entities/lib/html4-entities.js","139":"./~/html-entities/lib/xml-entities.js","140":"./~/isarray/index.js","141":"./~/lodash-es/_baseGetTag.js","142":"./~/lodash-es/_freeGlobal.js","143":"./~/lodash-es/_getPrototype.js","144":"./~/lodash-es/_getRawTag.js","145":"./~/lodash-es/_objectToString.js","146":"./~/lodash-es/_overArg.js","147":"./~/lodash-es/_root.js","148":"./~/lodash-es/isObjectLike.js","149":"./~/path-to-regexp/index.js","150":"./~/prop-types/checkPropTypes.js","151":"./~/prop-types/factoryWithThrowingShims.js","152":"./~/react-dom/index.js","153":"./~/react-dom/lib/ARIADOMPropertyConfig.js","154":"./~/react-dom/lib/AutoFocusUtils.js","155":"./~/react-dom/lib/BeforeInputEventPlugin.js","156":"./~/react-dom/lib/CSSPropertyOperations.js","157":"./~/react-dom/lib/ChangeEventPlugin.js","158":"./~/react-dom/lib/Danger.js","159":"./~/react-dom/lib/DefaultEventPluginOrder.js","160":"./~/react-dom/lib/EnterLeaveEventPlugin.js","161":"./~/react-dom/lib/FallbackCompositionState.js","162":"./~/react-dom/lib/HTMLDOMPropertyConfig.js","163":"./~/react-dom/lib/ReactChildReconciler.js","164":"./~/react-dom/lib/ReactComponentBrowserEnvironment.js","165":"./~/react-dom/lib/ReactCompositeComponent.js","166":"./~/react-dom/lib/ReactDOM.js","167":"./~/react-dom/lib/ReactDOMComponent.js","168":"./~/react-dom/lib/ReactDOMContainerInfo.js","169":"./~/react-dom/lib/ReactDOMEmptyComponent.js","170":"./~/react-dom/lib/ReactDOMFeatureFlags.js","171":"./~/react-dom/lib/ReactDOMIDOperations.js","172":"./~/react-dom/lib/ReactDOMInput.js","173":"./~/react-dom/lib/ReactDOMInvalidARIAHook.js","174":"./~/react-dom/lib/ReactDOMNullInputValuePropHook.js","175":"./~/react-dom/lib/ReactDOMOption.js","176":"./~/react-dom/lib/ReactDOMSelection.js","177":"./~/react-dom/lib/ReactDOMTextComponent.js","178":"./~/react-dom/lib/ReactDOMTextarea.js","179":"./~/react-dom/lib/ReactDOMTreeTraversal.js","180":"./~/react-dom/lib/ReactDOMUnknownPropertyHook.js","181":"./~/react-dom/lib/ReactDebugTool.js","182":"./~/react-dom/lib/ReactDefaultBatchingStrategy.js","183":"./~/react-dom/lib/ReactDefaultInjection.js","184":"./~/react-dom/lib/ReactElementSymbol.js","185":"./~/react-dom/lib/ReactEventEmitterMixin.js","186":"./~/react-dom/lib/ReactEventListener.js","187":"./~/react-dom/lib/ReactHostOperationHistoryHook.js","188":"./~/react-dom/lib/ReactInjection.js","189":"./~/react-dom/lib/ReactInvalidSetStateWarningHook.js","190":"./~/react-dom/lib/ReactMarkupChecksum.js","191":"./~/react-dom/lib/ReactMultiChild.js","192":"./~/react-dom/lib/ReactOwner.js","193":"./~/react-dom/lib/ReactPropTypeLocationNames.js","194":"./~/react-dom/lib/ReactReconcileTransaction.js","195":"./~/react-dom/lib/ReactRef.js","196":"./~/react-dom/lib/ReactServerRenderingTransaction.js","197":"./~/react-dom/lib/ReactServerUpdateQueue.js","198":"./~/react-dom/lib/ReactVersion.js","199":"./~/react-dom/lib/SVGDOMPropertyConfig.js","200":"./~/react-dom/lib/SelectEventPlugin.js","201":"./~/react-dom/lib/SimpleEventPlugin.js","202":"./~/react-dom/lib/SyntheticAnimationEvent.js","203":"./~/react-dom/lib/SyntheticClipboardEvent.js","204":"./~/react-dom/lib/SyntheticCompositionEvent.js","205":"./~/react-dom/lib/SyntheticDragEvent.js","206":"./~/react-dom/lib/SyntheticFocusEvent.js","207":"./~/react-dom/lib/SyntheticInputEvent.js","208":"./~/react-dom/lib/SyntheticKeyboardEvent.js","209":"./~/react-dom/lib/SyntheticTouchEvent.js","210":"./~/react-dom/lib/SyntheticTransitionEvent.js","211":"./~/react-dom/lib/SyntheticWheelEvent.js","212":"./~/react-dom/lib/adler32.js","213":"./~/react-dom/lib/checkReactTypeSpec.js","214":"./~/react-dom/lib/dangerousStyleValue.js","215":"./~/react-dom/lib/findDOMNode.js","216":"./~/react-dom/lib/flattenChildren.js","217":"./~/react-dom/lib/getEventKey.js","218":"./~/react-dom/lib/getIteratorFn.js","219":"./~/react-dom/lib/getNodeForCharacterOffset.js","220":"./~/react-dom/lib/getVendorPrefixedEventName.js","221":"./~/react-dom/lib/quoteAttributeValueForBrowser.js","222":"./~/react-dom/lib/renderSubtreeIntoContainer.js","223":"./~/react-redux/es/components/Provider.js","224":"./~/react-redux/es/connect/connect.js","225":"./~/react-redux/es/connect/mapDispatchToProps.js","226":"./~/react-redux/es/connect/mapStateToProps.js","227":"./~/react-redux/es/connect/mergeProps.js","228":"./~/react-redux/es/connect/selectorFactory.js","229":"./~/react-redux/es/connect/verifySubselectors.js","230":"./~/react-redux/es/utils/Subscription.js","231":"./~/react-redux/es/utils/shallowEqual.js","232":"./~/react-router-dom/es/BrowserRouter.js","233":"./~/react-router-dom/es/HashRouter.js","234":"./~/react-router-dom/es/MemoryRouter.js","235":"./~/react-router-dom/es/NavLink.js","236":"./~/react-router-dom/es/Prompt.js","237":"./~/react-router-dom/es/Redirect.js","238":"./~/react-router-dom/es/Route.js","239":"./~/react-router-dom/es/Router.js","240":"./~/react-router-dom/es/StaticRouter.js","241":"./~/react-router-dom/es/Switch.js","242":"./~/react-router-dom/es/index.js","243":"./~/react-router-dom/es/matchPath.js","244":"./~/react-router-dom/es/withRouter.js","245":"./~/react-router-redux/es/ConnectedRouter.js","246":"./~/react-router-redux/es/index.js","247":"./~/react-router-redux/es/middleware.js","248":"./~/react-router/es/MemoryRouter.js","249":"./~/react-router/es/Prompt.js","250":"./~/react-router/es/Redirect.js","251":"./~/react-router/es/StaticRouter.js","252":"./~/react-router/es/Switch.js","253":"./~/react-router/es/withRouter.js","254":"./~/react/lib/KeyEscapeUtils.js","255":"./~/react/lib/PooledClass.js","256":"./~/react/lib/ReactChildren.js","257":"./~/react/lib/ReactClass.js","258":"./~/react/lib/ReactDOMFactories.js","259":"./~/react/lib/ReactPropTypes.js","260":"./~/react/lib/ReactPropTypesSecret.js","261":"./~/react/lib/ReactPureComponent.js","262":"./~/react/lib/ReactVersion.js","263":"./~/react/lib/checkReactTypeSpec.js","264":"./~/react/lib/getNextDebugID.js","265":"./~/react/lib/onlyChild.js","266":"./~/react/lib/traverseAllChildren.js","267":"./~/redux-logger/lib/core.js","268":"./~/redux-logger/lib/defaults.js","269":"./~/redux-logger/lib/diff.js","270":"./~/redux-logger/lib/index.js","271":"./~/redux-thunk/lib/index.js","272":"./~/redux/es/applyMiddleware.js","273":"./~/redux/es/bindActionCreators.js","274":"./~/redux/es/combineReducers.js","275":"./~/resolve-pathname/index.js","276":"./~/strip-ansi/index.js","277":"./~/symbol-observable/index.js","278":"./~/symbol-observable/lib/index.js","279":"./~/symbol-observable/lib/ponyfill.js","280":"./~/value-equal/index.js","281":"(webpack)-hot-middleware/client-overlay.js","282":"(webpack)-hot-middleware/process-update.js","283":"./src/components/Picker.jsx","284":"./src/components/Posts.jsx","285":"./src/containers/Application.jsx","286":"./src/reducers/index.jsx","287":"./src/router/router.jsx","288":"./src/containers/Picker.css","289":"multi webpack-hot-middleware/client ./src/index.jsx","290":"./~/base64-js/index.js","291":"./~/buffer/index.js","292":"./~/buffer/~/isarray/index.js","293":"./~/css-loader/lib/css-base.js","294":"./~/ieee754/index.js","295":"./src/assets/cakes.jpg"}}
TypeError: processUpdate is not a function

[st0ffern]

@coryell1287 did you solve this? i have the same problem: processUpdate is not a function

[darronz]

Sorry to dig up such an old ticket. But I landed here with the same issue.

You'd get this error if the HotModuleReplacementPlugin is not loaded.

// in webpack.config.dev.js
plugins: [
    new ExtractTextPlugin('css/styles.css'),
    new webpack.HotModuleReplacementPlugin() // this was missing
]