0

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)

// https://vite.dev/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.

Improve this question
Related questions
1
How to resolve "Rollup failed to resolve import fsevents" during vite build
9
vue-cli 3.0 ./src/main.js in multi (webpack)-dev-server/client?http://10.0.68.112:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
393
Using eslint with typescript - Unable to resolve path to module
Load 4 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.