Issue with importing @gravity-ui/uikit: SyntaxError: Unexpected token 'export' Vinxi / Tanstack Start

[lpkobamn]

Hello,

I'm experiencing an import error when trying to use @gravity-ui/uikit in my project. Upon starting the dev server, I encounter the following errors:

(node:7648) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
13:58:57 [vite] Error when evaluating SSR module /app/routes/__root.tsx: failed to import "@gravity-ui/uikit"
|- C:\Users\noder\Desktop\start-vinxi-gravity-b2b\node_modules\@gravity-ui\uikit\build\esm\index.js:1
export * from './components';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    ...

Steps to Reproduce:

1. Created a new project using guide - https://tanstack.com/router/latest/docs/framework/react/start/getting-started.
2. Installed @gravity-ui/uikit via npm:

   npm install @gravity-ui/uikit

3. Imported a component from @gravity-ui/uikit in the __root.tsx file:

   import { Button } from '@gravity-ui/uikit';

4. Started the dev server with the command:

   vinxi dev

Expected Behavior:

The dev server starts without errors, and components from @gravity-ui/uikit are successfully imported and used in the project.

Actual Behavior:

I receive a syntax error when importing the module, indicating Unexpected token 'export'. There's also a warning suggesting to set "type": "module" in package.json or to use the .mjs extension.

Additional Information:

• Node.js Version: v20.18.0
• vinxi Version: v0.4.3
• Operating System: Windows 10

• package.json File:

  {
  "name": "start-vinxi-gravity-b2b",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "private": true,
  "scripts": {
  "dev": "vinxi dev",
  "build": "vinxi build",
  "start": "vinxi start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
  "@gravity-ui/icons": "^2.11.0",
  "@gravity-ui/navigation": "^2.28.0",
  "@gravity-ui/uikit": "^6.34.0",
  "@tanstack/react-router": "^1.77.0",
  "@tanstack/start": "^1.77.1",
  "@vitejs/plugin-react": "^4.3.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "vinxi": "^0.4.3"
  },
  "devDependencies": {
  "@types/react": "^18.3.12",
  "@types/react-dom": "^18.3.1",
  "eslint": "^9.13.0",
  "eslint-plugin-react-hooks": "^5.1.0-rc.0",
  "eslint-plugin-react-refresh": "^0.4.14",
  "typescript": "^5.6.3"
  }
  }

  • **/routes/__root.tsx

    
    // app/routes/__root.tsx
    import { createRootRoute } from "@tanstack/react-router";
    import { Outlet, ScrollRestoration } from "@tanstack/react-router";
    import { Body, Head, Html, Meta, Scripts } from "@tanstack/start";
    import * as React from "react";
    import "@gravity-ui/uikit/styles/fonts.css";
    import "@gravity-ui/uikit/styles/styles.css";
    import { ThemeProvider } from "@gravity-ui/uikit";
    import { configure } from "@gravity-ui/uikit";

import "../index.css";

export const Route = createRootRoute({ meta: () => [ { charSet: "utf-8", }, { name: "viewport", content: "width=device-width, initial-scale=1", }, { title: "TanStack Start Starter", }, ], component: RootComponent, });

function RootComponent() { return (

); }

function RootDocument({ children }: { children: React.ReactNode }) { return (

{children}

); }

function RootProvider({ children }: { children: React.ReactNode }) { return {children}; }

Thank you in advance for your assistance!

[lpkobamn]

Same with remix-run npx create-remix@latest try to import ThemeProvider

[ValeraS]

For both project you need to pass {ssr: {noExtrenal: ['@gravity-ui/*']}} to vite config. Note that Start supports this option since version 1.77.6