vue.js - vue3+typescript+vite cannot deploy to Heroku (vue install deploy vite Failed to resolve module specifier 'vue&a

Generated by vite simple codes cannot deploy to Heroku. Build is finished but I deploy it, Browser massages "vue install deploy vite Failed to resolve module specifier 'vue'" with white screen.

I asked this issue to Heroku, that support team said this issue is out of platform problem.

Generated codes by vite (and some updates with Heroku support) is following,

package.json (package-lock.json exist, omit to upload)

{
  "name": "front-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview",
    "start": "node index.js"
  },
  "dependencies": {
    "@types/node": "^22.13.10",
    "express": "^4.21.2",
    "serve-static": "^1.16.2",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/tsconfig": "^0.7.0",
    "typescript": "~5.7.2",
    "vite": "^6.2.0",
    "vue-tsc": "^2.2.4"
  }
}

index.js

import express from 'express'
import path from 'path'
import { fileURLToPath } from 'url'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const app = express()

app.use(express.static(__dirname))

import serveStatic from 'serve-static'
app.use(serveStatic(__dirname + "/dist"))
const port = process.env.PORT || 5000
app.listen(port)
console.log('server started '+ port)

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { resolve } from 'path'

const root = resolve(__dirname)

// /config/
export default defineConfig({
  base: './',
  server: {
    port: Number(process.env.PORT) || 5000,
    host: true // Ensures the server binds to 0.0.0.0
  },
  plugins: [vue(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  build: {
    rollupOptions: {
      external: ['vue'],
    },
    outDir: resolve(root, './dist'),
  }
})

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

static.json

{
  "root": "./dist"
}

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"]
    },

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

tsconfig.node.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

src/vite-env.d.ts

/// <reference types="vite/client" />

src/main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

(and src/ has style.css, components/HelloWorld.vue, and assets/vue.svg, omit to upload)

I solved 2 errors,

1st: 503 Error. It fixed setup some libraries (express), update package.json for start.

2nd: Browser cannot load .ts files (Expected a JavaScript module script but the server responded with a MIME type of "video/mp2t". Strict MIME type checking is enforced for module scripts per HTML spec.) It fixed Update main.ts to main.js for src.

Now, I cannot solve, Cannot load "vue" (Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".)

Actually my original codes have same issue. So I generated pure setup codes from vite, it made same problem.

vite+vue3+typescript cannot deploy set? I cannot find expected answers from other comments on StackOverflow.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

vue.js - vue3+typescript+vite cannot deploy to Heroku (vue install deploy vite Failed to resolve module specifier 'vue&a

与本文相关的文章

评论列表(0)