0

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'
}
JTinkers
  • 1,631
  • 9
  • 18
  • There seems to be a problem with the aliases, that are defined in typescript, which do not work in js anymore. Maybe this one helps you: https://stackoverflow.com/questions/59179787/tsc-doesnt-compile-alias-paths – Leif Marcus Feb 26 '23 at 19:51

0 Answers0