sapper webpack warning : 'mode' option has not been set

Question

I am not a webpack champion and when I use "npx export sapper" I have this warning

    WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

I tried to change the config according to documentation but nothing happens (or I get an error when I try to use CLI...

What should I change to switch to development mode instead of the default production mode ? Thanks a lot.

This is the webpack config file :

const webpack = require("webpack");
const path = require("path");
const config = require("sapper/config/webpack.js");
const pkg = require("./package.json");


// const mode = process.env.NODE_ENV;      <- Original line
const mode = "development";      //        <- my attempt
const dev = mode === "production";

const alias = { svelte: path.resolve("node_modules", "svelte") };
const extensions = [".mjs", ".js", ".json", ".svelte", ".html"];
const mainFields = ["svelte", "module", "browser", "main"];

module.exports = {
      client: {
            entry: config.client.entry(),
            output: config.client.output(),
            resolve: { alias, extensions, mainFields },
            module: {
                  rules: [
                        {
                              test: /\.(svelte|html)$/,
                              use: {
                                    loader: "svelte-loader",
                                    options: {
                                          dev,
                                          hydratable: true,
                                          hotReload: false, // pending https://github.com/sveltejs/svelte/issues/2377
                                    },
                              },
                        },
                  ],
            },
            mode,
            plugins: [
                  // pending https://github.com/sveltejs/svelte/issues/2377
                  // dev && new webpack.HotModuleReplacementPlugin(),
                  new webpack.DefinePlugin({
                        "process.browser": true,
                        "process.env.NODE_ENV": JSON.stringify(mode),
                  }),
            ].filter(Boolean),
            devtool: dev && "inline-source-map",
      },

      server: {
            entry: config.server.entry(),
            output: config.server.output(),
            target: "node",
            resolve: { alias, extensions, mainFields },
            externals: Object.keys(pkg.dependencies).concat("encoding"),
            module: {
                  rules: [
                        {
                              test: /\.(svelte|html)$/,
                              use: {
                                    loader: "svelte-loader",
                                    options: {
                                          css: false,
                                          generate: "ssr",
                                          dev,
                                    },
                              },
                        },
                  ],
            },
            mode: process.env.NODE_ENV,
            performance: {
                  hints: false, // it doesn't matter if server.js is large
            },
      },

      serviceworker: {
            entry: config.serviceworker.entry(),
            output: config.serviceworker.output(),
            mode: process.env.NODE_ENV,
      },
};

Answer 1

Short answer

In webpack.config.js, change all the occurrences of mode: process.env.NODE_ENV, for mode,. Then set const mode = 'development' as you're doing it.

Long answer

This is happening because mode is inconsistently used for the configurations of client, server and service worker. It is mode: mode for client but mode: process.env.NODE_ENV for server and service worker. Webpack is complaining that mode is not set because process.env.NODE_ENV is undefined.

Optional

You can also modify your export script in package.json to be something like

  "export": "NODE_ENV='development' sapper export"

And then run npm run export.