[BUG] Configuration for usage with Astro js

[Rigel772]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Component

any

Semi Version

"@douyinfe/semi-ui": "^2.31.0"

Current Behavior

Please see: https://stackblitz.com/edit/github-abxdmr-dkqrpd?file=src%2Fcomponents%2FSemi.jsx,package.json On local astro instalation the error is more verbose:

Unexpected token '{'

/node_modules/.pnpm/@douyinfe+semi-ui@2.31.0_biqbaboplfbrettd7655fr4n2y/node_modules/@douyinfe/semi-ui/lib/cjs/_base/base.css:4
body {
     ^

SyntaxError: Unexpected token '{'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1166:20)
    at Module._compile (node:internal/modules/cjs/loader:1210:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1300:10)
    at Module.load (node:internal/modules/cjs/loader:1103:32)
    at Module._load (node:internal/modules/cjs/loader:942:12)
    at Module.require (node:internal/modules/cjs/loader:1127:19)
    at require (node:internal/modules/helpers:112:18)
    at Object.<anonymous> (/mnt/storage/PROJECTS/drherbio/gitlab/herbio_active/node_modules/.pnpm/@douyinfe+semi-ui@2.31.0_biqbaboplfbrettd7655fr4n2y/node_modules/@douyinfe/semi-ui/lib/cjs/index.js:565:1)
    at Module._compile (node:internal/modules/cjs/loader:1246:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1300:10)
    at Module.load (node:internal/modules/cjs/loader:1103:32)
    at Module._load (node:internal/modules/cjs/loader:942:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

Expected Behavior

To see button rendered:

Steps To Reproduce

import React from "react";
import { Button, Toast } from "@douyinfe/semi-ui";

function Semi() {
  return (
    <div>
      Semi
      <Button
        style={{ borderRadius: "50%" }}
        onClick={() => Toast.warning({ content: "welcome" })}
      >
        Hello Semi
      </Button>
    </div>
  );
}

export default Semi;

ReproducibleCode

https://stackblitz.com/edit/github-abxdmr-dkqrpd?file=src%2Fcomponents%2FSemi.jsx,package.json

Environment

- OS: linux manjaro
- browser: any

Anything else?

No response

[pointhalo]

It seems that there is no suitable loader to handle css. I am not familiar with astro js. Maybe there is a corresponding switch to enable or customize related compilation configuration. You can look for their official website documents or issue documents with similar problems. .

[Rigel772]

Thank you for your response @pointhalo Could you tell me how the css should be loaded? I can see in their documentation: Astro supports CSS preprocessors such as Sass, Stylus, and Less through Vite I would understand if the styles would NOT loading... but why the error? Can you point me in the right direction, please?

[pointhalo]

Honestly, I don't know how to configure it either. I took a look at the docs of astro js and found that they don't seem to expose this kind of configuration.

I guess that it does not support the js file under node_modules to import css by itself

The code structure of semi is as follows

-- component
   - button
      - button.js
      - button.css

The js file of each component will be responsible for importing its own css, which is similar to the component module you write yourself

// button.js
import './button.css';
class Button extend React. Component {xxx}

In the react projects of webpack, vite, and create-react-app, they can run directly without any configuration.

Remix and nextjs have sideeffect css import restrictions by default, but there are configurations for users to exempt.

At present, astro.js does not have such functions for the time being (I am still new to astro and am not familiar with it, please correct me if my conclusion is wrong)

[pointhalo]

From our point of view, astro should consider the scenario of importing css in js to be a more reasonable solution (similar to next and remix, and finally provide support from framework layer compilation) We have no plan to specialize the engineering solution of the component library in order to adapt to the astro framework. This issue will be closed.