Cannot build for production - works in watch mode

[leny]

Hi,

I have some struggle with your plugin. Strangely, when I use webpack in development mode, with webpack-dev-server (the watch mode), everything's fine.

But when I try to compile for production, I got this error:

> @becode/rivyoo@0.0.1 build /Users/leny/Works/becode/rivyoo
> npx webpack -p --progress --profile --colors

  0% compiling

  (…)

 93% after chunk asset optimization google-fonts-pluginUnhandled rejection TypeError: Cannot read property 'files' of undefined
    at /Users/leny/Works/becode/rivyoo/node_modules/google-fonts-plugin/dist/index.js:237:17
    at SyncHook.eval [as call] (eval at create (/Users/leny/Works/becode/rivyoo/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:16:1)
    at SyncHook.lazyCompileHook (/Users/leny/Works/becode/rivyoo/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/leny/Works/becode/rivyoo/node_modules/webpack/lib/Compilation.js:1319:42
    at eval (eval at create (/Users/leny/Works/becode/rivyoo/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /Users/leny/Works/becode/rivyoo/node_modules/terser-webpack-plugin/dist/index.js:319:9
    at step (/Users/leny/Works/becode/rivyoo/node_modules/terser-webpack-plugin/dist/TaskRunner.js:87:9)
    at done (/Users/leny/Works/becode/rivyoo/node_modules/terser-webpack-plugin/dist/TaskRunner.js:98:30)
    at tryCatcher (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:517:31)
    at Promise._settlePromise (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:574:18)
    at Promise._settlePromise0 (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:619:10)
    at Promise._settlePromises (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:699:18)
    at Promise._fulfill (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:643:18)
    at Promise._resolveCallback (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:437:57)
    at Promise._settlePromiseFromHandler (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:529:17)
    at Promise._settlePromise (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:574:18)
    at Promise._settlePromise0 (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:619:10)
    at Promise._settlePromises (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:699:18)
    at Promise._fulfill (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:643:18)
    at Promise._resolveCallback (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:437:57)
    at Promise._settlePromiseFromHandler (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:529:17)
    at Promise._settlePromise (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:574:18)
    at Promise._settlePromise0 (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:619:10)
    at Promise._settlePromises (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:699:18)
    at Promise._fulfill (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:643:18)
    at Promise._settlePromise (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:587:21)
    at Promise._settlePromise0 (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:619:10)
    at Promise._settlePromises (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:699:18)
    at Promise._fulfill (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:643:18)
    at Promise._resolveCallback (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:459:14)
    at Promise._settlePromiseFromHandler (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:529:17)
    at Promise._settlePromise (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:574:18)
    at Promise._settlePromise0 (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:619:10)
    at Promise._settlePromises (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:699:18)
    at Promise._fulfill (/Users/leny/Works/becode/rivyoo/node_modules/bluebird/js/release/promise.js:643:18)

Here's my relevant devDependencies:

  {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.4",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "@becode/eslint-config": "^0.4.0",
    "@emotion/babel-preset-css-prop": "^10.0.9",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.2",
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-unicorn": "^8.0.2",
    "file-loader": "^3.0.1",
    "google-fonts-plugin": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^2.3.0",
    "lint-staged": "^8.1.7",
    "prettier": "^1.17.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  }

Here's my webpack config file, if needed:

const webpack = require("webpack");
const {resolve} = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const GoogleFontsPlugin = require("google-fonts-plugin");

const envVars=require("./env/webpack.env.json");

module.exports = (env = "prod") => {
    const plugins = [
        new GoogleFontsPlugin({
            fonts: [
                {family: "Montserrat", variants: ["400", "700"]},
                {family: "Source Sans Pro", variants: ["400", "700"]},
            ],
            formats: ["woff", "woff2"],
        }),
        new webpack.EnvironmentPlugin({
            NODE_ENV: env !== "prod" ? "development" : "production",
            VERSION: require("./package.json").version,
            BUILD_TIME: Date.now(),
            ...envVars[env],
        }),
        new HtmlWebpackPlugin({
            template: resolve(__dirname, "./src/app/index.html"),
            path: "../",
        }),
    ];

    let optimization = {};

    if (env !== "dev") {
        optimization = {
            runtimeChunk: "single",
            splitChunks: {
                chunks: "all",
                maxInitialRequests: Infinity,
                minSize: 0,
                maxSize: 20000,
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name(module) {
                            const packageName = module.context.match(
                                /[\\/]node_modules[\\/](.*?)([\\/]|$)/,
                            )[1];

                            return `npm.${packageName.replace("@", "")}`;
                        },
                    },
                },
            },
        };
    }

    return {
        mode: env === "dev" ? "development" : "production",
        devtool:
            env === "dev"
                ? "cheap-module-eval-source-map"
                : "hidden-source-map",
        context: resolve(__dirname, "./src/app"),
        entry: ["./app.js"],
        module: {
            rules: [
                {
                    test: /\.(png|jpg|gif)$/,
                    use: [
                        {
                            loader: "file-loader",
                            options: {
                                name: "[path][name].[ext]",
                            },
                        },
                    ],
                },
                {
                    test: /\.js$/,
                    exclude: [/node_modules/],
                    use: [
                        {
                            loader: "babel-loader",
                            options: {
                                cacheDirectory: env === "dev",
                            },
                        },
                    ],
                },
            ],
        },
        plugins,
        optimization,
        performance: {hints: false},
        output: {
            path: resolve(__dirname, "./bin/app"),
            filename: env === "dev" ? "js/bundle.js" : "js/[chunkhash].js",
        },
        watch: env === "dev",
    };
};

I don't really know the webpack plugin dev env, so I can't really dig deep onto it.

But if you can point me in a general direction to help you, don't hesitate to do so.

Thanks!

[SirPole]

Hey! This issue is now resolved in version 5.0.0! 🚀 See release notes and readme for more information.