fix: compile error following upgrade.md's vite to mix guide

[AshboDev]

Include fix for postcss.config.js when compiling assets

When a user follows the guide in upgrade.md to revert back to mix from vite, and then tries to compile they will most likely get an error, this pull request fixes that.

[timacdonald]

@AshboDev the upgrade guide already mentions adding the "type": "module" to the package.json and also mentioned the postcss file changes that need to be made.

I don't think we want to recommend removing this or using module.export.

[AshboDev]

@AshboDev the upgrade guide already mentions adding the "type": "module" to the package.json and also mentioned the postcss file changes that need to be made.

I don't think we want to recommend removing this or using module.export.

Hi @timacdonald,

This is for the section of the guide to switch back from Vite to Mix - not for installing Vite itself. Following the guide on 2 new projects, both had the same error upon running npm run watch for these 2 files on both projects.

That's a new Laravel project, Jetstream install, then go from Vite to Mix, same error.

I'm replying from mobile but happy to add the error when at my desk at a more normal hour!

Cheers :)

[AshboDev]

Here's the one for postcss:

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
C:\Users\Ash\Sites\mysite\postcss.config.js:1
export default {

And package.json:

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Ash\Sites\mysite\webpack.mix.js from C:\Users\Ash\Sites\mysite\node_modules\laravel-mix\setup\webpack.config.js not supported.
webpack.mix.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename webpack.mix.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\Ash\Sites\mysite\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at module.exports (C:\Users\Ash\Sites\mysite\node_modules\laravel-mix\setup\webpack.config.js:11:5)
    at loadConfigByPath (C:\Users\Ash\Sites\mysite\node_modules\webpack-cli\lib\webpack-cli.js:1439:37)
    at async Promise.all (index 0)
    at async WebpackCLI.loadConfig (C:\Users\Ash\Sites\mysite\node_modules\webpack-cli\lib\webpack-cli.js:1454:35)
    at async WebpackCLI.createCompiler (C:\Users\Ash\Sites\mysite\node_modules\webpack-cli\lib\webpack-cli.js:1785:22)
    at async WebpackCLI.runWebpack (C:\Users\Ash\Sites\mysite\node_modules\webpack-cli\lib\webpack-cli.js:1890:20)
    at async Command.<anonymous> (C:\Users\Ash\Sites\mysite\node_modules\webpack-cli\lib\webpack-cli.js:912:21)
    at async Promise.all (index 1)
    at async Command.<anonymous> (C:\Users\Ash\Sites\mysite\node_modules\webpack-cli\lib\webpack-cli.js:1372:13) {
  code: 'ERR_REQUIRE_ESM'
}```

Setting the `type` to `commonjs` as mentioned in the error message done nothing and I get the exact same errors above with a fresh Laravel install (No jetstream or other packages). When I remove `type` from package.json, it all works (Providing you've updated `postcss.config.js` as I've done in my changes.

node 19.3.0
npm 9.7.2
mix 6.0.49

Happy to do more debugging if required.

Thanks
Ash

[jessarcher]

Thanks @AshboDev!

I've made a few changes to match the Mix->Vite instructions and included a dedicated section on Tailwind and PostCSS.

Can you confirm whether these changes still resolve the error for you?

[AshboDev]

Hey @jessarcher,

Thanks for the feedback and updating the PR. I've just run through this on a fresh install:

Laravel 10
PHP 8.1.2
Node 19.3.0
NPM 9.7.2

All seemed OK besides one thing - which I'm not sure is related to the steps followed in the guide (But will double check later as I've not got time right now):

ERROR in ./resources/js/bootstrap.js 7:0-26
Module not found: Error: Can't resolve 'axios' in 'C:\Users\Ash\Sites\test\resources\js'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json"]'?

bootstrap.js (Default from laravel new):

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

The above error is resolved when I install laravel/jestream with livewire, so it appears to be installed with that.

Apart from that above (I believe unrelated) error - all is good, following the guide step by step.

Thanks!
Ash

[jessarcher]

Thanks, @AshboDev!