gravity-ui / uikit

https://gravity-ui.com
MIT License
603 stars 90 forks source link

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

Open lpkobamn opened 3 days ago

lpkobamn commented 3 days 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:

  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:

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 2 days ago

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

ValeraS commented 1 day 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