Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Bihacsy's avatar

Vite bilde note resolve <script setup lang="ts">

Hello, I am building a frame assembled by myself, I did not use a starter kit. You need to know about the system that it is an inertiajs application built with a nwidarth module package. However, the build does not display and gives the following error. I don't know what I messed up or what I didn't look at. But I've already done a starter kit project and compared the two implementations, but I don't know why it doesn't solve it. Can someone help me with this?

D:\Project\Core git:[main] npm run build

build npm run type-check && vite build

type-check vue-tsc --noEmit

vite v5.3.1 building for production... ✓ 11 modules transformed. x Build failed in 177ms error during build: [vite:esbuild] Transform failed with 1 error: D:/Project/Core/Modules/Admin/resources/assets/js/Pages/index.vue?vue&type=script&setup=true&lang.ts:1:8: ERROR: Expected ">" but found "setup" file: D:/Project/Core/Modules/Admin/resources/assets/js/Pages/index.vue?vue&type=script&setup=true&lang.ts:1:8

Expected ">" but found "setup" 1 | | ^ 2 | import {defineComponent} from "vue"; 3 | import AdminLayout from "@AdminModule/Layouts/AdminLayout.vue";

at failureErrorWithLog (D:\Project\Core\node_modules\esbuild\lib\main.js:1472:15)
at D:\Project\Core\node_modules\esbuild\lib\main.js:755:50
at responseCallbacks.<computed> (D:\Project\Core\node_modules\esbuild\lib\main.js:622:9)
at handleIncomingPacket (D:\Project\Core\node_modules\esbuild\lib\main.js:677:12)
at Socket.readFromStdout (D:\Project\Core\node_modules\esbuild\lib\main.js:600:7)
at Socket.emit (node:events:514:28)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
0 likes
1 reply
LaryAI's avatar
Level 58

The error message you're encountering suggests that there is a syntax issue in your Vue component file, specifically in the <script setup lang="ts"> section. The error message "Expected '>' but found 'setup'" indicates that the parser is having trouble understanding the <script setup lang="ts"> syntax.

Here are a few steps to troubleshoot and resolve this issue:

  1. Check Vite and Vue Version Compatibility: Ensure that you are using compatible versions of Vite and Vue. The <script setup> syntax is supported in Vue 3.2 and above. Make sure your package.json has the correct versions:

    "dependencies": {
      "vue": "^3.2.0",
      "vite": "^2.0.0"
    }
    
  2. Correct Syntax in Vue Component: Ensure that your Vue component file uses the correct syntax for <script setup lang="ts">. Here is an example of how it should look:

    <template>
      <AdminLayout>
        <!-- Your template content -->
      </AdminLayout>
    </template>
    
    <script setup lang="ts">
    import { defineComponent } from 'vue';
    import AdminLayout from '@AdminModule/Layouts/AdminLayout.vue';
    
    // Your script content
    </script>
    
  3. Check Vite Configuration: Ensure that your Vite configuration is set up to handle Vue files correctly. Your vite.config.ts should include the Vue plugin:

    import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';
    
    export default defineConfig({
      plugins: [vue()],
      resolve: {
        alias: {
          '@AdminModule': '/path/to/your/admin/module'
        }
      }
    });
    
  4. TypeScript Configuration: Ensure that your tsconfig.json is correctly configured to support Vue files:

    {
      "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "baseUrl": ".",
        "paths": {
          "@AdminModule/*": ["path/to/your/admin/module/*"]
        }
      },
      "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
    }
    
  5. Reinstall Dependencies: Sometimes, issues can be resolved by reinstalling the dependencies. Run the following commands:

    rm -rf node_modules
    rm package-lock.json
    npm install
    
  6. Check for Typos: Ensure there are no typos in your import statements or file paths.

By following these steps, you should be able to resolve the syntax error and successfully build your project. If the issue persists, please provide more details about your project setup and configuration files.

Please or to participate in this conversation.