Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
lpkobamn opened this issue Oct 27, 2024 · 7 comments
Closed

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

lpkobamn opened this issue Oct 27, 2024 · 7 comments
Labels
documentation Improvements or additions to documentation question Consultations and discussions

Comments

@lpkobamn
Copy link

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 (
   <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!
@lpkobamn
Copy link
Author

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

@ValeraS
Copy link
Collaborator

ValeraS commented Oct 29, 2024

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

@ValeraS ValeraS added documentation Improvements or additions to documentation question Consultations and discussions labels Oct 29, 2024
@lpkobamn
Copy link
Author

lpkobamn commented Nov 3, 2024 •
edited
Loading

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
Copy link
Author

lpkobamn commented Nov 3, 2024

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

@Maestr1
Copy link

Maestr1 commented Mar 18, 2025

This is not working for me
I am using @gravity-ui/uikit 7.5.1, vite 6.2.2 and react-router 7.3.0
When I try to run the project in dev mod I get an error:
TypeError: Unknown file extension ".css" for C:\Users\user\WebstormProjects\docsbox-frontend\node_modules\@gravity-ui\uikit\build\esm\components\ActionTooltip\ActionTooltip.css.
Here's my vite.config.js configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import { reactRouter } from "@react-router/dev/vite";


// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '192.168.18.105',
  },
  plugins: [svgr(), react(), reactRouter()],
  ssr: {
    noExternal: [
      "@gravity-ui/uikit",
      "@gravity-ui/components",
      "@gravity-ui/icons",
    ],
  },
  resolve: {
    alias: {
      '@': '/src',
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern',
        silenceDeprecations: ['legacy-js-api', 'import']
      },
    },
  },
});

@ValeraS
Copy link
Collaborator

ValeraS commented Mar 19, 2025

This is not working for me I am using @gravity-ui/uikit 7.5.1, vite 6.2.2 and react-router 7.3.0 When I try to run the project in dev mod I get an error: TypeError: Unknown file extension ".css" for C:\Users\user\WebstormProjects\docsbox-frontend\node_modules\@gravity-ui\uikit\build\esm\components\ActionTooltip\ActionTooltip.css. Here's my vite.config.js configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import { reactRouter } from "@react-router/dev/vite";


// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '192.168.18.105',
  },
  plugins: [svgr(), react(), reactRouter()],
  ssr: {
    noExternal: [
      "@gravity-ui/uikit",
      "@gravity-ui/components",
      "@gravity-ui/icons",
    ],
  },
  resolve: {
    alias: {
      '@': '/src',
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern',
        silenceDeprecations: ['legacy-js-api', 'import']
      },
    },
  },
});

Unable to reproduce. Could you please provide a reproduction?
What I have tried:

  • Created a new project with npx create-react-router@latest my-react-router-app
  • Added uikit npm install @gravity-ui/uikit
  • Added styles and ThemeProvider to app/root.tsx
  • Started the development server and got an error.
  • Added ssr: {noExternal: ["@gravity-ui/*"]} and after restarting the server there are no errors.

@Maestr1
Copy link

Maestr1 commented Mar 19, 2025

In this case, the problem doesn't appear.

Most likely the problem is that the react plugin and the react-router plugin are enabled at the same time in the vite configuration.

Thanks for the help

@lpkobamn lpkobamn closed this as completed Apr 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation question Consultations and discussions
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ValeraS @Maestr1 @lpkobamn