"laravel-vite-plugin" resolved to an ESM file

[adityar15]

Vite Plugin Version

1.0.1

Laravel Version

10.39.0

Node Version

21.2.0

NPM Version

10.2.3

Operating System

macOS

OS Version

14.2.1

Web browser and version

Google Chrome Latest Version

Running in Sail?

No

Description

It was all running well until I updated my npm packages.

Previously I was using

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "serve": "npx concurrently \"npm run dev\" \"php artisan serve\"",
        "build": "vite build",
    },
    "devDependencies": {
        "autoprefixer": "^10.4.14",
        "postcss": "^8.4.25",
        "tailwindcss": "^3.3.2",
        "vue-loader": "^17.2.2"
    },
    "dependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@fullhuman/postcss-purgecss": "^5.0.0",
        "@headlessui/vue": "^1.7.14",
        "@heroicons/vue": "^2.0.18",
        "@inertiajs/vue3": "^1.0.9",
        "@vitejs/plugin-vue": "^4.2.3",
        "@vue/compiler-sfc": "^3.3.4",
        "axios": "^1.4.0",
        "laravel-vite-plugin": "^0.7.8",
        "vite": "^4.4.2",
        "vue": "^3.3.4",
    }
}

When I ran

npx npm-check-updates -u

It updated all my packages to the below versions

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "serve": "npx concurrently \"npm run dev\" \"php artisan serve\"",
        "build": "vite build",
    },
    "devDependencies": {
        "autoprefixer": "^10.4.16",
        "postcss": "^8.4.32",
        "tailwindcss": "^3.4.0",
        "vue-loader": "^17.4.2"
    },
    "dependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@fullhuman/postcss-purgecss": "^5.0.0",
        "@headlessui/vue": "^1.7.16",
        "@heroicons/vue": "^2.1.1",
        "@inertiajs/vue3": "^1.0.14",
        "@vitejs/plugin-vue": "^5.0.2",
        "@vue/compiler-sfc": "^3.4.3",
        "axios": "^1.6.3",
        "laravel-vite-plugin": "^1.0.0",
        "vite": "^5.0.10",
        "vue": "^3.4.3",
    }
}

Whenever I run npm run serve Or npm run build

I am getting this error

[0] 
[0] > dev
[0] > vite
[0] 
[0] ✘ [ERROR] "laravel-vite-plugin" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]
[0] 
[0]     node_modules/esbuild/lib/main.js:1374:27:
[0]       1374 │         let result = await callback({
[0]            ╵                            ^
[0] 
[0]     at file:///Users/adityakadam/Documents/work/project/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:67972:35
[0]     at requestCallbacks.on-resolve (/Users/adityakadam/Documents/work/project/node_modules/esbuild/lib/main.js:1374:28)

What I have tried that didn't work:

1. Downgrading laravel-vite-plugin to v 1.0.0
2. Tried renaming vite.config.js to vite.config.mjs This removes the error but doesn't render the HTML in .vue files correctly.

Any help will be massively appreciated :D

Steps To Reproduce

Upgraded packages in package.json using npm-check-updates

[driesvints]

Hey there,

Can you first please try one of the support channels below? If you can actually identify this as a bug, feel free to open up a new issue with a link to the original one and we'll gladly help you out.

• Laracasts Forums
• Laravel.io Forums
• StackOverflow
• Discord
• Larachat
• IRC

Thanks!

[nickturrietta]

I was getting the same error. The solution for me was:

1. Add "type": "module" to package.json
2. Rename tailwind.config.js to tailwind.config.cjs
3. Rename postcss.config.js to postcss.config.cjs

[timacdonald]

You've upgraded to a new major version that has breaking changes.

Please see the upgrade guide: https://github.com/laravel/vite-plugin/blob/1.x/UPGRADE.md

[adityar15]

@timacdonald thanks for the link. I tried the upgrade guide. The error goes off after renaming postcss and tailwind.config.js to .cjs extensions and adding type:"module" in package.json But the problem now is Vue templates are not rendered correctly in terms of slots. The slot renders plain HTML string rather than the content itself.

[timacdonald]

@adityar15 I can see you also updated the @vitejs/plugin-vue version. Make sure to check their breaking changes: https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/CHANGELOG.md

Are you using require syntax in your vite.config.js? Can you share you config?

[bcorcoran]

Ran into this as well.

Not using require anywhere. All I did was upgrade to vite ^5.0.0 (alongside @vitejs/plugin-vue ^5.0.0 and laravel-vite-plugin ^1.0.1)

I added "type": "module", to my package.json which would have been the end of it, but then got errors from tailwindcss/postcss configs. Instead of renaming to .cjs which seems like delaying the inevitable, I just replaced module.exports = { in both files with export default { so that they were valid ESM configs. Problem solved.

[timacdonald]

@bcorcoran think we have that all covered in the upgrade guide.

I'll close this one as I don't think it is related to the plugin itself. If you have any other insights, @adityar15, let us know.

[steven-maina]

1. "type": "module"

worked for me too