I passed last few days on searching the answer to my problem but nothing helps. I deployed my SPA made in Vite/Vue on GH Pages. Locally all works fine, on the deployed page there is an error: Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
Deployment by GH Actions. Here is my page: https://pauladanthu.github.io/my-visit-card/
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" />
<link rel="stylesheet" type="text/html" href="style.css">
<title>Paula Danthu Frontend Dev</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
index.js:
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue'
const routes = [
{path: '/my-visit-card/', name: 'HomePage', component: HomePage}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
alias:{
'@' : path.resolve(__dirname, '.src')
},
base: '/my-visit-card/',
plugins: [vue()]
})
Please help! :)
I didn't try many things because all I found was mostly for react application or vue cli, nothing for vite. I tried adding in index.html this:
<script type="importmap">
{ "imports":
{ "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" }
}
</script>
The initial error disapeared, but new errors occured:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.
GET https://pauladanthu.github.io/my-visit-card/src/router/ net::ERR_ABORTED 404
When I moved the repository to my personal domain, not the one of GitHub, the error disappeared. When I move it back to GitHub domain it comes back. I suppose it’s a problem with paths, but I tried already all possible options (relative, not relative) and it keeps going on. So my solution is to move the repository to the personal domain but it’s not really a solution.