Level 14
I've run into the same issue. I've downgraded my dependencies as below and it works:
{
"laravel-vite-plugin": "^0.8.1",
"vite": "^4.5.1"
}
I would very much consider this a workaround to get going rather than a solution.
2 likes
Jan 2, 2024
6
Level 2
"laravel-vite-plugin" resolved to an ESM file
This is what I am using
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:
- Downgrading laravel-vite-plugin to v 1.0.0
- 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
Level 2
Thanks for the reply @chrispage1
For those who are looking for a solution.
I managed to make it work with vite 5.0.0^ and laravel-vite-plugin ^1.0.0
Solution
- In my package.json I added type: module
"type": "module",
- I renamed all the config files (tailwind.config.js) that uses common js format something like below
const x = require('x')
to .cjs. So tailwind.config.js became tailwind.config.cjs
- Then I cleared all the cache
php artisan view:clear
php artisan cache:clear
php artisan config:clear
php artisan route:clear
- Finally any .vue files that match with HTML tags, for instance, Title.vue matches with
<title></title>I renamed them to some other name.
Everything works fine now.
19 likes
Level 1
@adityar15 Thanks for sharing! In my case it was enough to add "type": "module" to my package.json
5 likes
Level 18
See this thread about the same issue https://github.com/laravel/vite-plugin/issues/279
Which links to the upgrade guide which tells you to add the module bit to package.json.
4 likes
Level 14
Glad you got it sorted @adityar15 ! Thanks for providing a solution :)
1 like
Level 1
use npm pkg set type=module
Please or to participate in this conversation.