prerender-loader
prerender-loader copied to clipboard
npm build with webpack hangs but the build is finished and successful
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
}
Hi, Did you check that there is no loop in your code such as setInterval
?
yes I did and there is no setInterval
in the code I mean at least in my code can't really account for dependencies 😉
Hi @grzegorz-jakubiak I have the same issue. Did you found a solution?