eaides's avatar

Laravel mox (with tailwindcss from breeze) produce different result in production than in dev

In my test environment (homestead) my app when I use the "npm run dev" produce different results than the "npm run prod"

The main difference seam to be in the grid (tailwind), wherein dev appear in 2 columns, for the same browser size, after recompile npm with the prod option, after refreshing the page, it appears in one column only

I have 2 captures to show the difference but I don't know if/how can I upload pictures

TIA

0 likes
8 replies
neilstee's avatar

@eaides can you do the following:

  • make sure you hard refresh your browser (old css/js might be cache)
  • try to remove node_modules, and do an npm install again then try npm run dev or npm run prod if it still shows different outputs.
eaides's avatar

I am always checked by control F5 (refresh)

Already try removing all node_modules and the same occurs

and the browse is loading the new generated JS/CSS in each case (I test it by open in source the generated JS; in the prod the JS is minified and in dev is plain JS)

Meanwhile I leave it as "dev" but is strange

eaides's avatar

No problem for me, but I did not see where I can attach a file

lemmon's avatar

Copy and paste the package.json file into the thread using three backticks before and after on their own seperate line

1 like
eaides's avatar
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.12.13",
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^10.1.0",
        "axios": "^0.21",
        "bootstrap": "^4.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.2.1",
        "postcss-import": "^12.0.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "tailwindcss": "^2.0.2"
    },
    "dependencies": {
        "jquery-modal": "^0.9.2"
    }
}
neilstee's avatar

@eaides looks good to me though.

Can you share the webpack.mix.js file as well?

eaides's avatar

here it is:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/controllers/populateFilesIntoTablesByAjax.js', 'public/js/controllers/populateFilesIntoTablesByAjax.js');
mix.js('resources/js/controllers/welcome.js', 'public/js/controllers/welcome.js');
mix.js('./node_modules/jquery-modal/jquery.modal.js','public/js/jquery-modal.js');

mix.js('resources/js/app.js','public/js')
    .react()
    .extract([
        'lodash',
        'popper',
        'jquery',
        'bootstrap',
        'react'
    ])
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

mix.copy('node_modules/jquery-modal/jquery.modal.css','public/css/jquery-modal.css');

Please or to participate in this conversation.