Laravel-mix: npm run production would not run as production mode, keeps running on development mode

Created on 23 Jan 2018 · 7Comments · Source: JeffreyWay/laravel-mix

Laravel Mix Version: 1.7.2 (npm list --depth=0)
Node Version (node -v): 8.2.1
NPM Version (npm -v): 5.3.0
OS: lsb_release -a

Description:

Hi fellows,
Recently I just found to run "npm run production" would not make my site with production mode. It was working fine but all of sudden, (maybe last Dec), it runs always as development mode.

For example,

I changed my .env file to "production" as below:

APP_ENV=production
APP_KEY=xxxx
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=https://xxx.com

then

I run the command as npm run prod, instead of I am running always "npm run dev"
My package json file as below:

{
  "private": true,
  "dependencies": {
    "axios": "^0.15.3",
    "bootstrap": "^3.0.0",
    "bootstrap-sass": "^3.3.7",
    "casperjs": "^1.1.4",
    "chart.js": "^2.7.1",
    "cross-env": "^3.2.3",
    "emoji-mart-vue": "^1.0.4",
    "fullcalendar": "^3.7.0",
    "jquery": "^2.1.4",
    "js-cookie": "^2.2.0",
    "laravel-echo": "^1.3.2",
    "laravel-mix": "^1.7.2",
    "lodash": "^4.17.4",
    "moment": "^2.19.3",
    "promise": "^7.1.1",
    "pusher-js": "^4.2.1",
    "sweetalert": "^1.1.3",
    "underscore": "^1.8.3",
    "urijs": "^1.19.0",
    "vue": "^2.5.9",
    "vue-beautify": "^1.1.3",
    "vue-resource": "^1.3.4",
    "vue-sortable": "^0.1.3",
    "vue-template-compiler": "^2.5.9",
    "vue-touch": "^2.0.0-beta.4",
    "vuedraggable": "^2.15.0",
    "vueify": "^9.4.1",
    "vuetify": "^0.17.4",
    "vuex": "^2.5.0",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "babel-preset-stage-2": "^6.24.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.4",
    "vue-loader": "^13.5.0"
  }
}

and of course my "app.js" file is minified as production mode.

but, my chrome browser (I cleaned all caches manytimes and tried) shows always as follwing:

"You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html"

Did anyone has the same problem like me?

Steps To Reproduce:

I tried many times with new servers, new package.json, install all nodes as whole new, clean node modules's caches, non of them working.
Here is my index file that will render a site:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Information -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
    <script src="https://use.fontawesome.com/f2dff42039.js"></script>

    <!-- CSS -->
    <link href="/css/sweetalert.css" rel="stylesheet">
    <link href="/css/jquery.datetimepicker.min.css" rel="stylesheet">
    @if(app('env') == 'production')
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    @else
    <link href="/css/app.css" rel="stylesheet">
    @endif
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
    <link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet">
    <!-- Scripts -->
    @yield('scripts', '')

    <!-- Global Spark Object -->
    <script>
        window.Spark = <?php echo json_encode(array_merge(
            Spark::scriptVariables(), ['apiUserId' => session('api_user_id'), 'groupId' => session('groupId'), 'keypush' => config('broadcasting.connections.pusher.key')]
        )); ?>
    </script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body class="with-navbar" oncontextmenu="return false">
    <div id="preloader" class="preloader">
        <img src="/images/preloader.gif"></img>
    </div>
    @php $days = 0 @endphp
    @if ( Auth::check() && Auth::user()->email_verified == 0)
    @php $days = round((strtotime("+30 days", strtotime(Auth::user()->created_at)) - time()) / 86400) @endphp
        <div id="warningMsgs" class="warningMsgs" v-if="isShowWarning()">
            @if ($days > 0)
                <div class="expiringWarning">
                    <p>
                       <span class="hidden-xs">You are required to confirm your email.</span> You have {{ $days }} days remaining.
                       <button class="btn btn-primary confirm"><a href="/settings#/activate">confirm</a></button>
                    </p>
                </div>
            @else
                <div class="expiredWarning">
                    <p>
                        Your trial account has been expired, please verify an <a href="/auth/view/verify/email">email</a>
                    </p>
                </div>
            @endif
        </div>
    @endif
    @if ($days > 0)
        <div id="spark-app" class="with-warning" v-cloak :class="isWarning()">
    @else
        <div id="spark-app" class="fix-width-wrapper" v-cloak>
    @endif
        <!-- Navigation -->
        @if (Auth::check())
            @include('spark::nav.user')
        @else
            @include('spark::nav.guest')
        @endif

        <!-- Main Content -->
        @yield('content')

        <!-- Application Level Modals -->
        @if (Auth::check())
            @include('spark::modals.notifications')
            @include('spark::modals.support')
            @include('spark::modals.session-expired')
        @endif

    </div>

    <!-- JavaScript -->

    <script src="{{ mix('js/app.js') }}"></script>


    <script src="/js/sweetalert.min.js"></script>

    <script src="/js/jquery.datetimepicker.full.min.js"></script>


</body>

</html>

please note I am using laravel Spark 4.0+

And I tried to also change my laravel.mix.js file as below:

let mix = require('laravel-mix');
let path = require('path');

mix.less('resources/assets/less/app.less', 'public/css')
  .copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
  .copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css')
  .js('resources/assets/js/app.js', 'public/js')
  .webpackConfig({
        resolve: {
            modules: [
                path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js'),
                'node_modules',
            ],
            alias: {
                'vue$': 'vue/dist/vue.js'
               //  'vue$': 'vue/dist/vue.esm.js'
            },
        },

  });

Hope if anyone can give some idea to solve this problem.

Thanks in advance.

Source

haxoman

Most helpful comment

Had the same problem just now

Changed

'vue$': 'vue/dist/vue.js',

'vue$': mix.inProduction() ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js',

and problem gone

Not sure what are the implications of using vue.common.js here

vesper8 on 24 Jan 2018

👍11 🎉2 ❤1

All 7 comments

I just did a test. npm run dev displayed the "Vue development" message in the console. npm run production did not.

It might be a caching issue. Be sure to do a hard refresh.

JeffreyWay on 23 Jan 2018

Oh I fixed it, and it is not caching issue, I think here will be the best answer:
https://stackoverflow.com/questions/41431167/webpack-compiling-vue-with-node-env-production-still-results-in-dev-warning

I have replaced 'vue/dist/vue.js' with 'vue/dist/vue.common.js' then no more devlopment, hope it helps anyone who got the problem.

haxoman on 24 Jan 2018

Had the same problem just now

Changed

'vue$': 'vue/dist/vue.js',

'vue$': mix.inProduction() ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js',

and problem gone

Not sure what are the implications of using vue.common.js here

vesper8 on 24 Jan 2018

👍11 🎉2 ❤1

@vesper8 Yes I think your solution is more legit. thanks, I will apply it as ur recommendation.

haxoman on 25 Jan 2018

@vesper8 where did you make that change? I don't see that line in webpack.mix.js

connor11528 on 15 Jul 2018

@vesper8 , @haxoman where did you make the change ? I am having the same issue and I browse through webpack.mix.js, I don't know where to add the code. Thank you!