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

lpkobamn · 2024-10-27T11:03:35Z

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 (
   <RootDocument>
     <Outlet />
   </RootDocument>
 );
}

function RootDocument({ children }: { children: React.ReactNode }) {
 return (
   <Html>
     <Head>
       <Meta />
     </Head>
     <Body>
       <RootProvider>{children}</RootProvider>
       <ScrollRestoration />
       <Scripts />
     </Body>
   </Html>
 );
}

function RootProvider({ children }: { children: React.ReactNode }) {
 return <ThemeProvider theme="light">{children}</ThemeProvider>;
}

Thank you in advance for your assistance!

The text was updated successfully, but these errors were encountered:

lpkobamn · 2024-10-27T14:59:41Z

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

ValeraS · 2024-10-29T08:53:11Z

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 · 2024-11-03T03:39:47Z

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 · 2024-11-03T05:02:41Z

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",
      ],
    },
  },
});

ValeraS added documentation Improvements or additions to documentation question Consultations and discussions labels Oct 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lpkobamn commented Oct 27, 2024

lpkobamn commented Oct 27, 2024

ValeraS commented Oct 29, 2024

lpkobamn commented Nov 3, 2024 •

edited

Loading

lpkobamn commented Nov 3, 2024

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

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

Comments

lpkobamn commented Oct 27, 2024

lpkobamn commented Oct 27, 2024

ValeraS commented Oct 29, 2024

lpkobamn commented Nov 3, 2024 • edited Loading

lpkobamn commented Nov 3, 2024

lpkobamn commented Nov 3, 2024 •

edited

Loading