Skip to main content

[mobx] you are running a minified build, but 'process.env.NODE_ENV' was not set to 'production' in your bundler. This results in an unnecessarily large and slow bundle

mobx@4.15.3またはmobx@5.15.3を使わない​

warningを出力する手前の条件分岐がmobx@4.15.3では固定値となり、常にwarningが表示されるようになります。

以下に抜粋した問題のコードを残しておきます。

// mobx4.15.3@lib/mobx.es6.js#4336-4345
(() => {
    function testCodeMinification() { }
    if (testCodeMinification.name !== "testCodeMinification" &&
        "development" !== "production" && // ここが間違い
        process.env.IGNORE_MOBX_MINIFY_WARNING !== "true") {
        // trick so it doesn't get replaced
        const varName = ["process", "env", "NODE_ENV"].join(".");
        console.warn(`[mobx] you are running a minified build, but '${varName}' was not set to 'production' in your bundler. This results in an unnecessarily large and slow bundle`);
    }
})();

正しくはこちらです。

// mobx4.15.4@lib/mobx.es6.js#4382-4391
(() => {
    function testCodeMinification() { }
    if (testCodeMinification.name !== "testCodeMinification" &&
        process.env.NODE_ENV !== "production" &&
        typeof process !== 'undefined' && process.env.IGNORE_MOBX_MINIFY_WARNING !== "true") {
        // trick so it doesn't get replaced
        const varName = ["process", "env", "NODE_ENV"].join(".");
        console.warn(`[mobx] you are running a minified build, but '${varName}' was not set to 'production' in your bundler. This results in an unnecessarily large and slow bundle`);
    }
})();

参考​

webpack.DefinePluginもしくはwebpack.EnvironmentPlugin​

webpackでprocess.env.NODE_ENVを置換しましょう。

const config: webpack.Configuration = {
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "production"),
      // "process.env.NODE_ENV": process.env.NODE_ENV // これは間違い
    }),
  }
}

もしくは、

const config: webpack.Configuration = {
  plugins: [
    new webpack.EnvironmentPlugin(['NODE_ENV', process.env.NODE_ENV]),
  }
}