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

lpkobamn commented 4 weeks ago

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:

Created a new project using guide - https://tanstack.com/router/latest/docs/framework/react/start/getting-started.
Installed @gravity-ui/uikit via npm:
```
npm install @gravity-ui/uikit
```
Imported a component from @gravity-ui/uikit in the __root.tsx file:
```
import { Button } from '@gravity-ui/uikit';
```
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 commented 3 weeks ago

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

ValeraS commented 3 weeks ago

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

lpkobamn commented 3 weeks ago

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

Thank you for your help. There is a minor error in the "External" word in your response. Here is the complete configuration:

// app.config.ts
import { defineConfig } from "@tanstack/start/config";

export default defineConfig({
  server: {
    preset: "node-server",
  },
  vite: { ssr: { noExternal: ["@gravity-ui/*"] } },
});

Despite the fact that so far everything is working, an error is already appearing

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. Thi
s will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used 
in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at ThemeProvider (C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@gravity-ui/uikit/build/esm/components/theme/ThemePr
ovider.js:21:33)
    at div
    at body
    at Body (C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/start/dist/esm/client/Meta.js:201:17)
    at html
    at Html (C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/start/dist/esm/client/Meta.js:187:17)
    at RootDocument (C:/Users/noder/Desktop/tanstackstart-react-vite/app/routes/__root.tsx:44:25)
    at RootComponent
    at MatchInnerImpl (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/Match.js:75
:3)
    at SafeFragment (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/SafeFragment.
js:3:58)
    at SafeFragment (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/SafeFragment.
js:3:58)
    at SafeFragment (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/SafeFragment.
js:3:58)
    at MatchImpl (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/Match.js:18:3)  
    at CatchBoundaryImpl (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/CatchBou
ndary.js:24:5)
    at CatchBoundary (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/CatchBoundar
y.js:4:32)
    at renderHostElement (C:\Users\noder\Desktop\tanstackstart-react-vite\node_modules\react-dom\cjs\react-dom-server.node.development.
js:5708:3)
    at SafeFragment (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/SafeFragment.
js:3:58)
    at Matches (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/Matches.js:21:18) 
    at RouterContextProvider (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/Rout
erProvider.js:5:3)
    at RouterProvider (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/RouterProvi
der.js:24:27)
    at StartServer (C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/start/dist/esm/server/StartServer.js:16:9)  
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. Thi
s will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used 
in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at PrivateLayoutProvider (C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@gravity-ui/uikit/build/esm/components/layou
t/LayoutProvider/LayoutProvider.js:13:34)
    at ThemeProvider (C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@gravity-ui/uikit/build/esm/components/theme/ThemePr
ovider.js:21:33)
    at div
    at body
    at Body (C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/start/dist/esm/client/Meta.js:201:17)
    at html
    at Html (C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/start/dist/esm/client/Meta.js:187:17)
    at RootDocument (C:/Users/noder/Desktop/tanstackstart-react-vite/app/routes/__root.tsx:44:25)
    at RootComponent
    at MatchInnerImpl (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/Match.js:75
:3)
    at SafeFragment (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/SafeFragment.
js:3:58)
    at SafeFragment (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/SafeFragment.
js:3:58)
    at SafeFragment (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/SafeFragment.
js:3:58)
    at MatchImpl (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/Match.js:18:3)  
    at CatchBoundaryImpl (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/CatchBou
ndary.js:24:5)
    at CatchBoundary (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/CatchBoundar
y.js:4:32)
    at renderHostElement (C:\Users\noder\Desktop\tanstackstart-react-vite\node_modules\react-dom\cjs\react-dom-server.node.development.
js:5708:3)
    at SafeFragment (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/SafeFragment.
js:3:58)
    at Matches (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/Matches.js:21:18) 
    at RouterContextProvider (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/Rout
erProvider.js:5:3)
    at RouterProvider (file:///C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/react-router/dist/esm/RouterProvi
der.js:24:27)
    at StartServer (C:/Users/noder/Desktop/tanstackstart-react-vite/node_modules/@tanstack/start/dist/esm/server/StartServer.js:16:9)

lpkobamn commented 3 weeks ago

I checked with other @gravity-ui libraries, the config above will not work, you need to set each library separately.

// app.config.ts
import { defineConfig } from "@tanstack/start/config";

export default defineConfig({
  server: {
    preset: "node-server",
  },
  vite: {
    ssr: {
      noExternal: [
        "@gravity-ui/uikit",
        "@gravity-ui/components",
        "@gravity-ui/icons",
      ],
    },
  },
});

gravity-ui / uikit

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