Poi blocked on HtmlWebpackPlugin phase

[throrin19]

Do you want to request a feature or report a bug?

a bug

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

I've tested the poi version 10.0.0-rc6 and I'm blocked in the final phase : HtmlWebpackPlugin

This is my poi.config.js :

const path              = require('path');
const webpack           = require('webpack');
const PwaManifest       = require('webpack-pwa-manifest');
const pkg               = require('./package');
const config            = require('./src/config/all');

module.exports = {
    // points d'entree du projet pour le build
    entry : ['node_modules/@babel/polyfill', 'src/polyfills.js', 'src/index.js'],
    // config d'index.ejs
    html  : {
        title       : config.title,
        template    : path.join(__dirname, 'index.ejs'),
        favicon     : `./static/assets/images/logos/favicons/${config.theme.favicon}`,
    },
    filename : {
        js      : 'js/[name].[hash].js',
        css     : 'css/[name].[hash].css',
        chunk   : 'js/[name].chunk.[hash].js',
    },
    // permet d'extraire le css du js final
    extractCSS   : true,
    // rend compatible le css "normalement" avec ie9 est les 3 dernieres versions de chaque navigateur
    autoprefixer : {
        browsers : ['ie > 9', 'last 3 versions'],
    },
    // // only used for unit testing
    karma : {
        // files       : ['test/unit/**/*.test.js'],
        frameworks  : ['mocha', 'chai'],
    },
    webpack(cfg) {
        cfg.plugins.push(new webpack.ContextReplacementPlugin(/vee-validate[\/\\]dist[\/\\]locale$/, /fr|en/));
        cfg.plugins.push(new PwaManifest({
            filename            : 'manifest.json',
            name                : config.title,
            short_name          : config.title,
            display             : 'standalone',
            'background-color'  : '#ffffff',
            theme_color         : config.theme.secondary,
            start_url           : '/',
            icons               : [
                {
                    src         : path.resolve(`./src/assets/imgs/pwa/${config.theme.pwa}`),
                    sizes       : [96, 128, 192, 256, 384, 512],
                    destination : path.join('assets', 'images', 'icons'),
                },
            ],
        }));
        // config.plugins.push(new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /fr|en/));

        return cfg;
    },
    // on etend les configs webpack : ici on met juste la partie des alias et d'utiliser le sourcemap pour le debug
    extendWebpack(config) {
        config.merge({
            resolve : {
                alias : {
                    styles     : path.resolve(__dirname, './src/stylesheets'),
                    plugins    : path.resolve(__dirname, './src/plugins'),
                    mixins     : path.resolve(__dirname, './src/mixins'),
                    libs       : path.resolve(__dirname, './src/libs'),
                    config     : path.resolve(__dirname, './src/config'),
                    components : path.resolve(__dirname, './src/components'),
                    assets     : path.resolve(__dirname, './src/assets'),
                    pages      : path.resolve(__dirname, './src/pages'),
                    store      : path.resolve(__dirname, './src/store'),
                    mocks      : path.resolve(__dirname, './src/mocks'),
                    mc         : path.resolve(__dirname, './src/mc'),
                    // external libs aliases
                    'chart.js' : 'chart.js/dist/Chart.js', // @todo change when chart.js migrate entirelly on es6 modules
                },
            },
            devtool : process.env.ENVIRONMENT === 'local' ? 'source-map' : '',
        });

        config.module.rule('vuetify')
            .test(/vuetify.es5.*?js$/)
            .use('babel-loader')
            .loader('babel-loader');
    },
    // on charge des presets propres a POI
    presets : [
        // a la fin du build, affiche un rapport sur la taille utilisee par chaque lib
        require('@poi/plugin-bundle-report')(),
        // reglages propres aux PWA et au mode offline
        // @todo : voir exactement fonctionnement et utilite
        require('@poi/plugin-offline')({
            pwa           : './src/pwa.js', // Path to pwa runtime entry
            pluginOptions : {
                autoUpdate : true,
            },
        }),
        // reglages propres au test d'eslint au build des fichiers
        require('@poi/plugin-eslint')({
            loaderOptions : {
                configFile  : path.resolve(__dirname, './.eslintrc.json'),
                useEslintrc : true,
            },
            mode : '*',
        }),
        require('@poi/plugin-karma')(),
    ],
    // variables d'environnement utilisees par la suite via `process.env`
    env : {
        ENVIRONMENT : process.env.ENVIRONMENT || 'development',
    },
};

I've tested on remove polyfills, presets, ... and the result is already the same. I'm blocked in the last phase.

[throrin19]

it's possible to show details from poi on this part ? (show raw processing steps)

[throrin19]

The cause may be parts of webpack config updates ? extendWebpack() and webpack() ?

If I read the documentation, they are two new methods : chainWebpack() and configureWebpack()

[egoist]

the old methods are still available.

[throrin19]

ok, the problem is with htmlWebpackPlugin. I try to use the default template to see if it's my template the problem. But it fix nothing.

[egoist]

what if you set html: false?

[throrin19]

with html : false it works on compilation but launch crash with a 404 (normal if we have not any html).

The basic error is like a callback not called

[throrin19]

I try poi --debug to see if I have more informations, this is the result :

command  develop
 env  { NODE_ENV: 'development' }
 poi config path  /project/poi.config.js
 HTML template file  /project/index.ejs
 babel config location  /project/package.json
 poi options  { entry:
   { main:
      [ '/project/node_modules/@babel/polyfill',
        '/project/src/polyfills.js',
        '/project/src/index.js' ] },
  cwd: '/project',
  vue: {},
  css:
   { minimize: false,
     extract: false,
     extractLoader: undefined,
     sourceMap: true,
     postcss: { plugins: [] },
     cssModules: undefined,
     styleLoader: 'vue-style-loader',
     filename: 'css/[name].[hash].css',
     chunkFilename: 'js/[name].chunk.[hash].css' },
  hash: false,
  html:
   [ { minify: { collapseWhitespace: false, minifyCSS: false, minifyJS: false },
       env: { NODE_ENV: 'development' },
       pkg:
        { private: true,
          name: 'manager-app',
          productName: 'Manager',
          description: 'Data entry interface by users. But not only...',
          version: '1.0.2',
          scripts:
           { dev: 'poi',
             build: 'poi build',
             report: 'poi build --bundle-report',
             serve: 'serve dist --single',
             translate: 'node i18n/translate.js',
             eslint: 'eslint --ext .js,.vue src/**',
             'eslint-fix': 'eslint --fix --ext .js,.vue src/**',
             test: 'ENVIRONMENT=test poi test' },
          babel: { presets: [ 'poi' ] },
          author: { name: 'xxxx', email: 'xxxxx@xxxx.com' },
          dependencies:
           { '@babel/polyfill': '7.0.0-beta.44',
             axios: '0.18.0',
             'chart.js': '2.7.2',
             'color-hash': '1.0.3',
             'core-js': '2.5.5',
             'es6-symbol': '3.1.1',
             fecha: '2.3.3',
             'js-cookie': '2.2.0',
             lodash: '4.17.5',
             'normalize.css': '8.0.0',
             'object-assign': '4.1.1',
             'offline-plugin': '4.9.0',
             'promise-polyfill': '7.1.2',
             tinycolor2: '1.4.1',
             'vee-validate': '2.0.6',
             'vue-analytics': '5.10.2',
             'vue-chartjs': '3.3.1',
             'vue-head': '2.0.12',
             'vue-i18n': '7.6.0',
             'vue-mc': '0.2.4',
             'vue-media': '1.1.1',
             'vue-router': '3.0.1',
             'vue-scrollto': '2.11.0',
             vuetify: '1.0.14',
             vuex: '3.0.1',
             'vuex-persistedstate': '2.5.2' },
          devDependencies:
           { '@babel/core': '7.0.0-beta.44',
             '@poi/plugin-bundle-report': '10.0.0',
             '@poi/plugin-eslint': '10.0.0',
             '@poi/plugin-karma': '10.0.2',
             '@poi/plugin-offline': '10.0.0',
             '@vue/test-utils': '1.0.0-beta.13',
             'babel-eslint': '8.2.2',
             'babel-preset-poi': '10.0.0',
             chai: '4.1.2',
             eslint: '4.19.1',
             'eslint-config-throrinstudio': '1.3.0',
             'eslint-loader': '2.0.0',
             'eslint-plugin-import': '2.10.0',
             'eslint-plugin-vue': '4.4.0',
             'karma-chai': '0.1.0',
             poi: '10.0.3',
             'prettier-eslint': '8.8.1',
             serve: '6.5.5',
             sinon: '4.5.0',
             stylus: '0.54.5',
             'stylus-loader': '3.0.2',
             'vue-eslint-parser': '2.0.3',
             'webpack-pwa-manifest': '3.6.2',
             xlsx: '0.12.8' } },
       title: 'test',
       description: 'test',
       template: '/project/index.ejs',
       favicon: './static/assets/images/logos/favicons/default.png' } ],
  filename:
   { js: 'js/[name].[hash].js',
     css: 'css/[name].[hash].css',
     image: 'assets/images/[name].[hash:8].[ext]',
     font: 'assets/fonts/[name].[ext]',
     chunk: 'js/[name].chunk.[hash].js' },
  extractCSS: true,
  autoprefixer: { browsers: [ 'ie > 9', 'last 3 versions' ] },
  karma: { frameworks: [ 'mocha', 'chai' ] },
  webpack: [Function: webpack],
  extendWebpack: [Function: extendWebpack],
  plugins: [ [Function], [Function], [Function], [Function] ],
  env: { ENVIRONMENT: 'development' },
  debug: true,
  '--': [],
  flags: { debug: true, '--': [] },
  devServer: { host: '0.0.0.0', port: 4000 },
  babel:
   { jsx: 'react',
     config:
      { babelrc: false,
        extends: '/project/package.json',
        cacheDirectory: true } },
  outDir: '/project/dist',
  publicPath: '/',
  hotReload: true,
  hotEntry: [ 'main' ],
  minimize: false,
  sourceMap: 'eval-source-map',
  externals: [],
  postcss: { plugins: [] } }
 Use chainWebpack defined in your config file
 Use configureWebpack defined in your config file

Edit :

I see I've this error if I cancel the build :

TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at visit (/project/node_modules/toposort/index.js:29:50)
    at visit (/project/node_modules/toposort/index.js:47:9)
    at visit (/project/node_modules/toposort/index.js:47:9)
    at Function.toposort [as array] (/project/node_modules/toposort/index.js:22:22)
    at Object.module.exports.dependency (/project/node_modules/html-webpack-plugin/lib/chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (/project/node_modules/html-webpack-plugin/index.js:364:35)
    at /project/node_modules/html-webpack-plugin/index.js:113:21
    at _err1 (eval at create (/project/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:30:1)
    at callback (/project/node_modules/copy-webpack-plugin/dist/index.js:77:17)
    at /project/node_modules/copy-webpack-plugin/dist/index.js:118:24
    at <anonymous>

After research, I've found this issue in HtmlWebpackPlugin module : jantimon/html-webpack-plugin#870

If i set the setting html.chunksSortMode to none, the build works fine (but I've many errors in my code due to env option).

With POI v9 it works fine

[github-actions]

This issue has been marked as Stale, it will be closed in a week if there's no furthur activity.