I created a new vue application by doing these operations (according to vue documentation)
npm init vue@latest
npm install
Then I tried to runnpm run dev
. And then this happened.
My environment is these
My package.json
{ "name": "vue-project", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview --port 4173" }, "dependencies": { "vue": "^3.2.37" }, "devDependencies": { "@vitejs/plugin-vue": "^3.0.1", "vite": "^3.0.4" } }
My vite.config.js
import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })
I've been searching for a while with no results. Thanks in advance.
I have the same problem here. It looks like the output is optimized for browser execution and modules such as "path, fs, etc." do not exist for the browser. This makes sense since it is part of Nodejs itself. It doesn't work in the browser. This is my assumption so far.
Look at the various solutions to understand why I made these assumptions.
https://github.com/vitejs/vite/discussions/6849https://github.com/vitejs/vite/issues/7821#issuecomment- 1142328698
https://github.com/marcofugaro/browserslist-to-esbuildhttps://esbuild.github.io/getting-started/
Given this information, I would prefer a simpler solution to prevent build failures using Vite as a bundler.
Configuration rollupOptions
I think the simplest solution is to define external.https://rollupjs.org/configuration-options/#external
Finally found a solution. The problem is caused bypackage.jsonfile conflict.Viteused an incorrectpackage.jsonfile located in the project's parent directory instead of the project's ownpackage.jsonfile. like this - p>
So delete the wrong files and the problem will be solved.
Thanks for the answer to this github questionpackage.json:1:0: Error: Unexpected end of file