Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bundle doesn't rebuild if material-ui imported

See original GitHub issue

Operating System: Ubuntu 16.04
Node Version: 8.9.1
NPM Version: 5.5.1
webpack Version: 4.12.0
webpack-dev-server Version: 3.1.4

This is a bug
This is a modification request

Code

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

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

module.exports = {
  entry: './src/client/index.js',
  output: {
    path: path.resolve('build'),
    filename: 'bundle.[hash].js',
    publicPath: '/'
  },

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

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/client/index.html',
      inject: 'body'
    })
  ],

  devtool: 'inline-source-map',
  devServer: {
    contentBase: './build',
    historyApiFallback: true,
    hot: true,
    host: 'localhost',
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8000',
    },
  },
};

  // babelrc.
{
  "presets": [["env", { "modules": false }], "react", "stage-2"],
  "plugins": [
    "react-hot-loader/babel",
    ["transform-runtime",
      {
        "polyfill": false,
        "regenerator": true
      }],
    "emotion"
  ]
}

  // App
import React from "react";
import DeleteIcon from "@material-ui/icons/Delete";

class App extends React.Component {
  render() {
    return <div>hello text</div>;
  }
}

export default App;

// run command
webpack-dev-server --mode development --inline --hot

Expected Behavior

bundle will rebuild if App.js changed

Actual Behavior

bundle didn’t rebuild

For Bugs; How can we reproduce the behavior?

https://codesandbox.io/s/nn61v1vyw4 issue in material-ui

Use run command when “//import DeleteIcon from “@material-ui/icons/Delete”;” and change “hello text” - bundle rebuild.

Use run command when “import DeleteIcon from “@material-ui/icons/Delete”;” and change “hello text” - bundle didn’t rebuild.

Issue Analytics

State:
Created 5 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

Dozalexcommented, Sep 8, 2018

@ntbm yes, i run node process with wds and it works.

// server-hmr.js
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');

const config = require('./config/webpack.hmr.config');

const options = {
  noInfo: true,
  compress: true,
  contentBase: 'build',
  historyApiFallback: true,
  hot: true,
  port: PORT,
  host: HOST,
  proxy: {
    '/api/**': {
      target: `${apiPath}/api/`,
      secure: false,
      pathRewrite: { '^/api/': '' }
    }
  },
};

WebpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);

new WebpackDevServer(compiler, options).listen(PORT, HOST, (err) => {
  if (err) {
    console.error(err);
  }
});

Also, problem may be in https://stackoverflow.com/questions/51622851/webpack-dev-server-does-not-rebuild-bundle In general, I now don’t have this problem.

0reactions

ntbmcommented, Sep 10, 2018

@Dozalex Thank you, the Stackoverflow thing brought me to me solution. As I can’t change the file watches. I could work around with --watch-poll

https://stackoverflow.com/questions/42584315/webpack-dev-server-doesnt-watch-recompile-files-if-they-import-named-exports