Error when building with Webpack v5

[vasartam]

Hi!

I'm using Webpack v5 in my project. While installing this library, encountered some errors:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: mypackage@0.2.0
npm ERR! Found: webpack@5.66.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.64.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.42.1" from @visto9259/php-webpack-plugin@1.0.1
npm ERR! node_modules/@visto9259/php-webpack-plugin
npm ERR!   dev @visto9259/php-webpack-plugin@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/myuser/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/myuser/.npm/_logs/2022-01-16T12_59_09_182Z-debug.log

(The name of my package is replaced with "mypackage", the name of my user is replaced with "myuser")

I'm guessing this problem comes from the fact that this plugin should be used with Webpack v4.

After installing the library with --legacy-peer-deps flag and continuing with installation instructions, this is what I met after invoking a build process:

[webpack-cli] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Object
    at new NodeError (node:internal/errors:371:5)
    at validateString (node:internal/validators:120:11)
    at Object.join (node:path:1172:7)
    at /var/www/mypackage.loc/wp-content/themes/mypackage/node_modules/@visto9259/php-webpack-plugin/index.js:32:38
    at Array.forEach (<anonymous>)
    at /var/www/mypackage.loc/wp-content/themes/mypackage/node_modules/@visto9259/php-webpack-plugin/index.js:31:24
    at Array.forEach (<anonymous>)
    at genPHPOutputAssocArray (/var/www/mypackage.loc/wp-content/themes/mypackage/node_modules/@visto9259/php-webpack-plugin/index.js:27:25)
    at /var/www/mypackage.loc/wp-content/themes/mypackage/node_modules/@visto9259/php-webpack-plugin/index.js:74:28
    at Hook.eval [as callAsync] (eval at create (/var/www/mypackage.loc/wp-content/themes/mypackage/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1) {
  code: 'ERR_INVALID_ARG_TYPE'
}

I just wanted to try out this library, but since it doesn't work, I guess I will search for alternatives. Would be nice if the compatibility with Webpack v5 would be fixed, if this project is maintained.

[visto9259]

Hi @vasartam,

Thanks for using the package. Let me check into it. I developed it using Webpack 4 so I need to make sure that it works for v5. I should have some time today or tomorrow.

[visto9259]

I added Webpack 5 as a peer dependency and fixed the issue reported. There was a change in the format of the stats from webpack 4 to webpack 5.

@vasartam Test it out if you can.

[vasartam]

@visto9259 Tested it, the problems above are now gone. Although in final scriptlist.php I see only *.css files under my entrypoints, no *.js:

<?php
return [
    'app' => [
        '143' =>  'style.min.css',
    ],
    'editor' => [
        '189' =>  'editor-style.min.css',
    ],
    'page-under-construction' => [
        '947' =>  'page-under-construction.min.css',
    ],
];

Could it be related to the current issue, or should I create a new one? I can share my full webpack config, if that makes a difference.

[visto9259]

@vasartam, please share your webpack config. Especially the module.rules section.

Seems to be a different issue and probably a config that the plugin was not expecting. I built it for my needs which are probably different than yours (Laminas-based website). I want to make sure that it is generic enough for others to use. My use case also includes using babel-loader for .js files, although this should not be the reason why the output only has css files.

[vasartam]

@visto925, here are the configs as well as relevant parts of my package.json.

webpack.common.js:

'use strict';
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PhpWebpackPlugin = require('@visto9259/php-webpack-plugin');

// noinspection JSValidateTypes
const loadersCss = [
    // Extracts CSS into a different file
    MiniCssExtractPlugin.loader,
    // Translates CSS into CommonJS
    "css-loader",
    // Adds prefixes
    {
        loader: "postcss-loader",
        options: {
            postcssOptions: {
                plugins: [
                    [
                        "postcss-preset-env",
                    ],
                    require('cssnano')({
                        preset: 'default',
                    }),
                ],
            },
        },
    },
];

module.exports = {
    entry: {
        app: './assets/js/index.js',
        editor: './assets/js/editor.js',
        "page-under-construction": './assets/js/page-under-construction.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '',
        filename: '[name].min.js',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    ...loadersCss,
                    // Compiles Sass to CSS
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                            implementation: require('sass'),
                            sassOptions: {
                                includePaths: ['./assets/css']
                            }
                        },
                    },
                ],
            },
            {
                test: /\.css$/i,
                use: loadersCss,
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[name].[hash][ext][query]'
                },
            },
            {
                test: /\.(png|jpe?g)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'img/[name].[hash][ext][query]'
                },
            },
            {
                test: /\.svg$/,
                type: 'asset/inline',
            },
        ]
    },
    resolve: {
        extensions: ['.js'],
    },
    performance: {
        maxAssetSize: 400 * 1024,
        maxEntrypointSize: 500 * 1024,
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                // Rename default 'vendors' chunk to have static name instead of chunk ID
                defaultVendors: {
                    name: 'vendors',
                },
            },
        },
    },
    plugins: [
        new MiniCssExtractPlugin({
            // For appropriate filenames in dist folder
            filename: (pathInfo) => {
                let base;

                if (pathInfo.chunk.name === 'app') {
                    base = 'style';
                } else if (pathInfo.chunk.name === 'editor') {
                    base = 'editor-style';
                } else {
                    base = '[name]';
                }

                return base + '.min.css';
            },
        }),
        new CleanWebpackPlugin(),
        new PhpWebpackPlugin(),
    ],
};

webpack.dev.js:

'use strict';
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'source-map',
    devServer: {
        contentBase: './dist',
    },
});

webpack.prod.js:

'use strict';
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
    performance: {
        hints: "error",
    },
});

package.json:

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack --config webpack.dev.js --watch"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@nirazul/scss-mq": "^1.2.0",
    "@splidejs/splide": "^3.6.9",
    "body-scroll-lock": "^4.0.0-beta.0",
    "cleave.js": "^1.6.0",
    "colcade": "^0.2.0",
    "core-js": "^3.20.3",
    "jquery": "^3.5.1",
    "mdn-polyfills": "^5.20.0",
    "minireset.css": "^0.0.6",
    "normalize.css": "^8.0.1",
    "photoswipe": "github:dimsemenov/photoswipe#v5-beta",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "regenerator-runtime": "^0.13.9",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.5.1",
    "cssnano": "^5.0.15",
    "mini-css-extract-plugin": "^2.4.4",
    "postcss": "^8.4.4",
    "postcss-gap-properties": "^2.0.0",
    "postcss-loader": "^6.2.1",
    "postcss-media-query-optimizer": "^1.0.1",
    "postcss-preset-env": "^7.0.1",
    "sass": "^1.43.4",
    "sass-loader": "^12.3.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.64.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0",
    "webpack-merge": "^5.8.0"
  }
}

[visto9259]

@vasartam Thanks.

I will take a deeper look as I don't see anything obviously wrong.

The plugin uses compilation stats to create the scriptlist.php. If you have time and are willing to share some more info, can you run webpack with the --json=compilation-stats.json? Add that option to your script in pacakge.json such as:

"scripts": {
     "dev": "webpack --config config.js --json=compilation-stats.json"
}

then post or send me the compilation-stats.json to eric.richer@vistoconsulting.com Thanks

[vasartam]

@visto9259, sent you an email