npm build with webpack hangs but the build is finished and successful

[grzegorz-jakubiak]

After adding prerender-loader to my production build npm run build hangs after the job is finished(and the build is successful with prerendering done) and requires manual ctrl+c whereas without it builds and returns the prompt. Below package.json, webpack.config.js and terminal output.

Package.json

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server --mode development",
    "build": "NODE_ENV=production webpack --mode production",
    "lint-fix": "standard --fix"
  },
  "standard": {
    "parser": "babel-eslint",
    "globals": [
      "React",
      "ReactDOM"
    ]
  },
  "author": "Grzegorz Jakubiak",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^1.0.1",
    "file-loader": "^4.3.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.5",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "prerender-loader": "^1.3.0",
    "standard": "^14.3.3",
    "standard-loader": "^7.0.0",
    "style-loader": "^0.23.1",
    "terser-webpack-plugin": "^2.3.5",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "@rmwc/card": "^5.7.2",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.2.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-icons": "^3.9.0",
    "react-responsive-carousel": "^3.1.57"
  }

Console output

Entrypoint main = src/css/main.css src/js/main.js
 [7] ./src/pages/home/index.jsx 1.14 KiB {0} [built]
[13] ./src/assets/images/banners/mechanik/banner_1.jpg 76 bytes {0} [built]
[14] ./src/assets/images/banners/mechanik/banner_2.jpg 76 bytes {0} [built]
[15] ./src/assets/images/banners/mechanik/banner_3.jpg 76 bytes {0} [built]
[16] ./src/assets/images/banners/mechanik/banner_1x800.jpg 80 bytes {0} [built]
[17] ./src/assets/images/banners/mechanik/banner_2x800.jpg 80 bytes {0} [built]
[18] ./src/assets/images/banners/mechanik/banner_3x800.jpg 80 bytes {0} [built]
[19] ./src/assets/images/banners/mechanik/banner_1.webp 77 bytes {0} [built]
[20] ./src/assets/images/banners/mechanik/banner_2.webp 77 bytes {0} [built]
[21] ./src/assets/images/banners/mechanik/banner_3.webp 77 bytes {0} [built]
[30] ./src/data/tills.js 4.8 KiB {0} [built]
[43] ./src/components/till/card/index.jsx + 23 modules 105 KiB {0} [built]
     |    24 modules
[45] ./src/components/scroll-button/index.jsx + 5 modules 1.28 MiB {0} [built]
     |    6 modules
[48] ./src/index.js 254 bytes {0} [built]
[69] ./src/assets/css/main.css 39 bytes {0} [built]
    + 76 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [0] ./node_modules/prerender-loader/dist/prerender-loader.js?string!./public/index.html 13.1 KiB {0} [built]
    Child prerender:
         29 assets
        Entrypoint main = src/css/main.css ssr-bundle.js
         [7] ./src/pages/home/index.jsx 1.14 KiB {0} [built]
        [13] ./src/assets/images/banners/mechanik/banner_1.jpg 76 bytes {0} [built]
        [14] ./src/assets/images/banners/mechanik/banner_2.jpg 76 bytes {0} [built]
        [15] ./src/assets/images/banners/mechanik/banner_3.jpg 76 bytes {0} [built]
        [16] ./src/assets/images/banners/mechanik/banner_1x800.jpg 80 bytes {0} [built]
        [17] ./src/assets/images/banners/mechanik/banner_2x800.jpg 80 bytes {0} [built]
        [18] ./src/assets/images/banners/mechanik/banner_3x800.jpg 80 bytes {0} [built]
        [19] ./src/assets/images/banners/mechanik/banner_1.webp 77 bytes {0} [built]
        [20] ./src/assets/images/banners/mechanik/banner_2.webp 77 bytes {0} [built]
        [21] ./src/assets/images/banners/mechanik/banner_3.webp 77 bytes {0} [built]
        [30] ./src/data/tills.js 4.8 KiB {0} [built]
        [43] ./src/components/till/card/index.jsx + 23 modules 105 KiB {0} [built]
             |    24 modules
        [45] ./src/components/scroll-button/index.jsx + 5 modules 1.28 MiB {0} [built]
             |    6 modules
        [48] ./src/index.js 254 bytes {0} [built]
        [69] ./src/assets/css/main.css 39 bytes {0} [built]
            + 76 hidden modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/@material/button/dist/mdc.button.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/@material/card/dist/mdc.card.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/@material/icon-button/dist/mdc.icon-button.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/react-responsive-carousel/lib/styles/carousel.min.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!src/assets/css/main.css:
            Entrypoint mini-css-extract-plugin = *
            [0] ./node_modules/css-loader!./src/assets/css/main.css 336 bytes {0} [built]
                + 1 hidden module
        Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/carousel/style.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/footer/style.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/header/navbar/style.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/header/style.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/scroll-button/style.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/till/card/style.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
        Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/till/online/style.css:
            Entrypoint mini-css-extract-plugin = *
               2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/@material/button/dist/mdc.button.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/@material/card/dist/mdc.card.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/@material/icon-button/dist/mdc.icon-button.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/react-responsive-carousel/lib/styles/carousel.min.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/assets/css/main.css:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader!./src/assets/css/main.css 336 bytes {0} [built]
        + 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/carousel/style.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/footer/style.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/header/navbar/style.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/header/style.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/scroll-button/style.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/till/card/style.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/components/till/online/style.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules

webpack config

'use strict'

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = (env, { mode }) => {
  const isProduction = mode === 'production'
  const importReact = new webpack.ProvidePlugin({
    React: 'react',
    ReactDOM: 'react-dom'
  })

  const config = {
    resolve: {
      extensions: ['.js', '.jsx'],
      alias: {
        src: path.resolve(__dirname, 'src/')
      }
    },
    mode: mode,
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'src/js/[name].js'
    },
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.(js|jsx)?$/,
          exclude: /node_modules/,
          use: {
            loader: 'standard-loader',
            options: {
              parser: 'babel-eslint'
            }
          }
        },
        {
          test: /\.(js|jsx)?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        },
        {
          test: /\.(png|jp(e*)g|svg|webp)$/,
          use: [{
            loader: 'file-loader',
            options: {
              name: 'src/assets/images/[name].[ext]'
            }
          }]
        }
      ]
    },
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin(),
        new OptimizeCSSAssetsPlugin({})
      ]
    },
    plugins: [
      importReact,
      new CopyPlugin([
        { from: 'src/pages/errors', to: './' },
        { from: '.htaccess', to: './' },
        { from: 'sitemap.xml', to: './' },
        { from: 'robots.txt', to: './' },
        { from: 'public/favicon.ico', to: './' }
      ]),
      new MiniCssExtractPlugin({
        filename: 'src/css/[name].css'
      }),
      new HtmlWebpackPlugin({
        template: isProduction ? '!!prerender-loader?string!./public/index.html' : './public/index.html',
        filename: './index.html'
      })
    ]
  }

  return config
}

[FabienGreard]

Hi, Did you check that there is no loop in your code such as setInterval?

[grzegorz-jakubiak]

yes I did and there is no setInterval in the code I mean at least in my code can't really account for dependencies 😉

[absamo]

Hi @grzegorz-jakubiak I have the same issue. Did you found a solution?