Error [ERR_REQUIRE_ESM]: require() of ES Module

[martingg88]

Any idea how to resolve this issue?

Error [ERR_REQUIRE_ESM]: require() of ES Module

[koficypher]

Kindly share what your webpack.mix.js and package.json file looks like

[GustavoBorges1]

I'm facing the same issue

Package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-mix": "^6.0.49",
        "laravel-vite-plugin": "^0.7.5",
        "vite": "^4.0.0"
    }
}

webpack.mix.js

const mix = require('laravel-mix');
mix.js('public/dist/js/survey_metrics.js', 'public/dist/js').sourceMaps().css('resources/css/survey_metrics.css', 'public/dist/css')

[GustavoBorges1]

I have solved this by changing the file name "webpack.mix.js" to "webpack.mix.cjs"

[zircuitz]

I get this same issue with a brand new Laravel project.

[koficypher]

@zircuitz also share your webpack.mix.js file and package.json file

[zircuitz]

@zircuitz also share your webpack.mix.js file and package.json file

It's literally a completely fresh Laravel project. So the webpack.mix.js and package.json file are the default ones, except the added package to install Laravel Mix of course. Just in-case: Here they are:

package.json

{
    "private": true,
    "type": "module",
    "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": {
        "axios": "^1.1.2",
        "laravel-mix": "^6.0.49"
    }
}

webpack.mix.js

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/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

In-case it is important, I followed this guide to migrate from the default Vite to Laravel Mix: Migrating from Vite to Laravel Mix

[koficypher]

Okay that's fine. Kindly update you package.json file by removinng the line this line "type": "module",

[zircuitz]

Okay that's fine. Kindly update you package.json file by removinng the line this line "type": "module",

That did the trick! Thank you so much 😁 👍