I'm trying to host Vue 3 in SSR-mode, but node is being extra hard-headed about it.
This is probably because it's unable to resolve the alias - but even if I directly reference the output of .ts files (.js) - it eventually has hard time resolving files with '.vue' extension.
I've verified the structure prior to posting here, even if I CTRL + LMB on the import - it opens the correct file.
Here's the code:
server.ts
import express from 'express';
import { renderToString } from 'vue/server-renderer';
import { createApp } from '@/main';
const server = express();
server.get('/', async (_, response) =>
{
const app = createApp();
const html = await renderToString(app);
response.send(html);
});
server.listen(3000, () => console.log('Listening on http://localhost:3000'));
main.ts
import { createSSRApp } from 'vue';
import App from '@/app/App.vue';
import router from '@/app/router';
export function createApp()
{
return createSSRApp(App)
.use(router);
}
package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
...
},
"devDependencies": {
...
}
}
tsconfig.js
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"outDir": "dist/src",
"strict": true,
"jsx": "preserve",
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"exclude": [
"node_modules",
"dist"
]
}
... and finally, the command I run:
tsc && node ./dist/src/server.js
... and the error I'm getting:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@/main' imported from E:\repos\oc\app\dist\src\server.js
at new NodeError (node:internal/errors:393:5)
at packageResolve (node:internal/modules/esm/resolve:810:9)
at moduleResolve (node:internal/modules/esm/resolve:859:20)
at defaultResolve (node:internal/modules/esm/resolve:1074:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:425:18)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
}