fix: fix NODE_ENV and webpack config (#818)

package.json

@@ -7,7 +7,7 @@
     "lint-fix": "standard --fix && standard --fix --plugin html 'src/routes/**/*.html'",
     "dev": "run-s build-svg build-inline-script serve-dev",
     "serve-dev": "run-p --race build-sass-watch sapper-dev",
-    "sapper-dev": "cross-env PORT=4002 sapper dev",
+    "sapper-dev": "cross-env NODE_ENV=development PORT=4002 sapper dev",
     "sapper-prod": "cross-env PORT=4002 node __sapper__/build",
     "build": "cross-env NODE_ENV=production npm run build-steps",
     "build-steps": "run-s build-sass build-svg build-inline-script sapper-build",

src/client.js

@@ -9,6 +9,8 @@ loadPolyfills().then(() => {
   sapper.start({ target: document.querySelector('#sapper') })
 })
 
+console.log('process.env.NODE_ENV', process.env.NODE_ENV)
+
 if (module.hot) {
   module.hot.accept()
 }

webpack/client.config.js

@@ -3,7 +3,7 @@ const config = require('sapper/config/webpack.js')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 const terser = require('./terser.config')
-const isDev = process.env.NODE_ENV === 'development'
+const { mode, dev } = require('./shared.config')
 
 module.exports = {
   entry: config.client.entry(),
@@ -12,7 +12,7 @@ module.exports = {
     extensions: ['.js', '.json', '.html'],
     mainFields: ['svelte', 'module', 'browser', 'main']
   },
-  mode: isDev ? 'development' : 'production',
+  mode,
   module: {
     rules: [
       {
@@ -20,10 +20,10 @@ module.exports = {
         use: {
           loader: 'svelte-loader',
           options: {
-            dev: isDev,
+            dev,
             hydratable: true,
             store: true,
-            hotReload: isDev
+            hotReload: dev
           }
         }
       }
@@ -32,7 +32,7 @@ module.exports = {
   node: {
     setImmediate: false
   },
-  optimization: isDev ? {} : {
+  optimization: dev ? {} : {
     minimizer: [
       terser()
     ],
@@ -51,14 +51,14 @@ module.exports = {
     new LodashModuleReplacementPlugin({
       paths: true
     })
-  ].concat(isDev ? [
+  ].concat(dev ? [
     new webpack.HotModuleReplacementPlugin({
       requestTimeout: 120000
     })
   ] : [
     new webpack.DefinePlugin({
       'process.browser': true,
-      'process.env.NODE_ENV': '"production"'
+      'process.env.NODE_ENV': JSON.stringify(mode)
     }),
     new BundleAnalyzerPlugin({ // generates report.html and stats.json
       analyzerMode: 'static',
@@ -71,5 +71,5 @@ module.exports = {
       logLevel: 'silent' // do not bother Webpacker, who runs with --json and parses stdout
     })
   ]),
-  devtool: isDev ? 'inline-source-map' : 'source-map'
+  devtool: dev ? 'inline-source-map' : 'source-map'
 }

webpack/server.config.js

@@ -1,7 +1,6 @@
 const config = require('sapper/config/webpack.js')
 const pkg = require('../package.json')
-
-const dev = process.env.NODE_ENV === 'development'
+const { mode, dev } = require('./shared.config')
 
 module.exports = {
   entry: config.server.entry(),
@@ -29,7 +28,7 @@ module.exports = {
       }
     ]
   },
-  mode: process.env.NODE_ENV,
+  mode,
   performance: {
     hints: false // it doesn't matter if server.js is large
   }

webpack/service-worker.config.js

@@ -1,18 +1,17 @@
 const config = require('sapper/config/webpack.js')
 const terser = require('./terser.config')
 const webpack = require('webpack')
-
-const isDev = config.dev
+const { mode, dev } = require('./shared.config')
 
 module.exports = {
   entry: config.serviceworker.entry(),
   output: config.serviceworker.output(),
-  mode: process.env.NODE_ENV,
-  devtool: isDev ? 'inline-source-map' : 'source-map',
+  mode,
+  devtool: dev ? 'inline-source-map' : 'source-map',
   plugins: [
     new webpack.DefinePlugin({
       'process.browser': true,
-      'process.env.NODE_ENV': '"production"',
+      'process.env.NODE_ENV': JSON.stringify(mode),
       'process.env.SAPPER_TIMESTAMP': process.env.SAPPER_TIMESTAMP || Date.now()
     }),
     terser()

webpack/shared.config.js

@@ -0,0 +1,7 @@
+const mode = process.env.NODE_ENV
+const dev = mode === 'development'
+
+module.exports = {
+  mode,
+  dev
+}