Ошибка "Ymaps3 is not defined" в приложении Vite React SSR

Question

У меня есть приложение на React, собранное через Vite и с поддержкой SSR. Одна из используемых библиотек работает через алиасы путей из tsconfig.json.

Когда я пытаюсь импортировать и использовать эту библиотеку в компонентах React, возникает ошибка.

Похоже, проблема в tsconfig - по какой-то причине заданные там пути не разрешаются корректно в компонентах React, хотя в index.html все работает нормально.

Например, в index.html все ок:

<script>
  console.log(ymaps3)
</script>

Но в компоненте React при любом импорте ymaps3 выдается:

ymaps3 is not defined.

Мой tsconfig.json:

"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "node",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true,
/*Ymap*/
"typeRoots": [
  "./types",
  "./node_modules/@types",
  "./node_modules/@yandex/ymaps3-types"
],
"paths": {
  "ymaps3": [
    "./node_modules/@yandex/ymaps3-types"
  ],
}

},

А также код сервера server.js:

/* eslint-disable no-undef */
import fs from "fs";
import path from "path";
import express from "express";
import { createServer as createViteServer } from "vite";


const isProduction = process.env.NODE_ENV === "production";
const Port = process.env.PORT || 3000;
const Base = process.env.BASE || "/";

const templateHtml = isProduction
? fs.readFileSync("./dist/client/index.html", {encoding: "utf-8"})
: "";

const ssrManifest = isProduction
? fs.readFile("./dist/client/.vite/ssr-manifest.json", { encoding: "utf-8" }, err => {
  if (err) {
    console.log(err.message);
    
    throw err;
  }
})
: undefined;

const app = express();
let vite;

// ? Add vite or respective production middlewares
if (!isProduction) {
  vite = await createViteServer({
    server: { middlewareMode: true },
    appType: "custom",
  });
  
  app.use(vite.middlewares);
} else {
  const sirv = (await import("sirv")).default;
  const compression = (await import("compression")).default;
  app.use(compression());
  app.use(
    Base,
    sirv("./dist/client", {
      extensions: [],
      gzip: true,
    })
  );
}

app.use("*", async (req, res, next) => {
  // ! Favicon Fix
  if (req.originalUrl === "/favicon.ico") {
    return res.sendFile(path.resolve("./public/vite.svg"));
  }

  // ! SSR Render - Do not Edit if you don't know what heare whats going on
  let template, render;

  try {
    if (!isProduction) {
      template = fs.readFileSync(path.resolve("./index.html"), {encoding: "utf-8"});
      template = await vite.transformIndexHtml(req.originalUrl, template);
      render = (await vite.ssrLoadModule("/src/server/entry-server.tsx")).render;
    } else {
      template = templateHtml;
      render = (await import("./dist/server/entry-server.js")).render;
    }

    const rendered = await render({ path: req.originalUrl }, ssrManifest);
    const html = template.replace(`<!--app-html-->`, rendered ?? "");

    res.status(200).setHeader("Content-Type", "text/html").end(html);
  } catch (error) {
    vite.ssrFixStacktrace(error);
    next(error);
  }
});

// ? Start http server
app.listen(Port, () => {
  console.log(`Server running on http://localhost:${Port}`);
});

Буду благодарен за помощь в решении проблемы.

Я пробовал:

Импортировать через относительный путь
Импортировать через алиас из tsconfig
Перезапускать dev сервер
Импортировать tsconfigPaths в vite config

БЛОГ НА HUSL

Ошибка "Ymaps3 is not defined" в приложении Vite React SSR

Ответы (0 шт):