Vue3 "npm run build" fails using vite

585 views Asked by At

I have a Vue3 project which runs correctly on development: npm run dev.
Running npm run build fails:

C:\projects-intellij\myapp> npm run build

> [email protected] build
> run-p type-check build-only


> [email protected] type-check
> vue-tsc --noEmit -p tsconfig.app.json --composite false


> [email protected] build-only
> vite build

vue defineConfig params: build production false
import.meta.url file:///C:/projects-intellij/myapp/vite.config.ts
vite v4.4.9 building for production...
✓ 5 modules transformed.
✓ built in 121ms
[vite:build-import-analysis] Parse error @:3:10
file: C:/projects-intellij/myapp/src/App.vue:3:9
1: <script lang="ts" setup>
2: console.log('OK');
3: </script>
            ^
4: <template>
5:   hello
error during build:
Error: Parse error @:3:10
    at parse$e (file:///C:/projects-intellij/myapp/node_modules/vite/dist/node/chunks/dep-df561101.js:16472:355)
    at Object.transform (file:///C:/projects-intellij/myapp/node_modules/vite/dist/node/chunks/dep-df561101.js:46579:27)
ERROR: "build-only" exited with 1.

Here I just inserted a very blank template file App.vue:

<script lang="ts" setup>
console.log('OK');
</script>

<template>
  hello
</template>

<style>
body {
  color: red;
}
</style>

As mentioned using development I get 'OK' printed in the console and a red 'hello' appears in the browser.

Since I do not find anything smart in the internet; I expect the error to be in front of the screen. Could anyone help me here?

Note on @EstusFlask comment: Thx for your response. I some how fixed the issue with vue-tsc the log now seems to come further and now it breaks with [vite:build-import-analysis]...

Heading sounds like this but the setup is little different:
npm run build failing on Vue 3 project using vite

1

There are 1 answers

0
Dirk Schumacher On

As I learned on the way. It is good to rerun npm install which re-setups the package.json and package-lock.json files.

Besides that if it failes due to validation caused on typescript it is a way either to use typescript correct ;-) or to preset lines like // @ts-ignore which ignores the following line regarding typescript when packaging a project.