1.1.0 webpack config section is ignored when starting sails in production mode

[alexanderdevm]

Sails version: 1.1.0 Node version: 8.10.0 NPM version: 3.5.2 DB adapter name: N/A DB adapter version: N/A Operating system: Ubuntu 18.04 WSL

---

Using https://github.com/sailshq/sails-webpack-seed, I have create a base for my project. Added react 16 and updated webpack to 3.10.0 and then build whole project.

Starting the project in dev mode, has no issues.

However when I start the project in production mode using: NODE_ENV=production sails lift or export NODE_ENV='production' && sudo node app.js --prod I am running into an issue where webpack config is not applied from config/env/production.js Sample: https://github.com/sailshq/sails-webpack-seed/blob/master/config/env/production.js

Steps to reproduce:

1. Clone https://github.com/sailshq/sails-webpack-seed

2. Update webpack section in /config/env/production.js to

   webpack: {
     plugins: [
   
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify('production')
       }),
       new webpack.optimize.UglifyJsPlugin()
     ]
   }

3. sudo NODE_ENV=production sails lift

Additional Details:

• Looking into sails production documentation, I was not able to find any traces of regarding webpack configuration setting for config/env/production.js

Full copy of production.js:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  datastores: {
    default: {
      adapter: require('sails-mysql'),
      url: 'mysql://****:****@localhost:3306/****'
    }
  },

  models: {
    migrate: 'safe',
    datastore: 'default'
  },

  blueprints: {
    shortcuts: false
  },

  security: {
    cors: {
    }
  },

  session: {
    cookie: {
      secure: true,
    },
    secret: '123498f7g09sd7gf908sd70fg9s7d09f'
  },

  sockets: {
    onlyAllowOrigins: [
      'https://localhost'
    ]
  },

  log: {
    level: 'debug'
  },

  http: {
    middleware: {
    },
    port: 443,

    custom: {
    },
    webpack: {
      plugins: [

        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new webpack.optimize.UglifyJsPlugin()
      ]
    }
  }
};

[sailsbot]

@alexanderdevm Thanks for posting, we'll take a look as soon as possible.

---

For help with questions about Sails, click here. If you’re interested in hiring @sailsbot and her minions in Austin, click here.

[rachaelshaw]

@alexanderdevm looking at your production.js file, it looks like custom and webpack ended up inside your http config (looks like a closing bracket ended up in the wrong place). Would you try fixing that to see if it solves it?

Should look more like:

http: {
    middleware: {
    },
    port: 443,
},

custom: {
},

webpack: {
    plugins: [

      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production')
      }),
      new webpack.optimize.UglifyJsPlugin()
    ]
}

[alexanderdevm]

@rachaelshaw I have updated production.js file to make sure http does not wrap, webpack, however the issue is still persistent.

[rachaelshaw]

@alexanderdevm would you mind creating an example repo reproducing the issue? That might help to diagnose what's going on

[alexanderdevm]

@rachelshaw Sure, I will try to create a minified version of the project.

[mikermcneil]

Hey @alexanderdevm, just to clarify, you don't have to use your real-world code here (I'm sure it'd be preferable not to have to worry about any potential perceived business issues related to sharing it, etc.)

Instead, would you take a stab at reproducing the issue for us in an empty, boilerplate Sails app w/ as few changes as possible? Besides saving you from having to mess w/ minification etc, it'll also make it easier for us to see what's going on.

Thank you!

[alexanderdevm]

Hey @mikermcneil @rachaelshaw , thank you for following up.

I have updated one of my initial sails+webpack+react prototype projects: https://github.com/alexanderdevm/sails-1-auth-react with production.js, webpack.js and package.js configuration from my current project and updated it to use sails-disk instead.

git clone https://github.com/alexanderdevm/sails-1-auth-react.git
cd sails-1-auth-react
npm install
npm run prod

While testing sails-1-auth-react project, the execution results puzzled me: the production webpack configuration is ignored in my current project yet works with sails-1-auth-react

I have also noticed, that config/local.js file setting would be applied no matter what even if the file was renamed to something else.

[mikermcneil]

@alexanderdevm Thank you for setting that up! This is especially relevant, since we're considering saying goodbye to Grunt very soon, as much as I hate to spend the time to do that. We'll look more closely when we can.

@lukeheath I know you guys have done a lot with webpack on top of sails relatively recently. If you have a moment, would you take a glance and let me know if anything jumps out?

[rachaelshaw]

Since we don't have a repro yet, I'm going to stick that label back on. @alexanderdevm please keep us updated if you're able to reproduce the issue in a new project, or if you figure out what was going on in the original

[alexanderdevm]

@rachaelshaw sure, I am presently working on it

[alexanderdevm]

After going though webpack documentation and issues that users encountered, I have discovered that the issue with with webpack 3.x. When webpack is using bable to package react app, 3.x version is not able to package all elements which causes the react to still show up as dev env.

The fix for the issue was to update webpack to 4.x, update supporting libraries and/or find replacement ones to be used in conjunction with webpack 4.x and specify env as production in production webpack config.