Importing less file issue in vite.

[igneous8k]

Hi, i have a issue setting up playground on a clean vite project. Upon Importing the boilerplate mentioned, im getting following issue.

✘ [ERROR] Could not resolve "./index.less"

node_modules/.pnpm/@cubejs-client+playground@0.32.24_dn3rz3awbwyhwzgv2r2xai7wnm/node_modules/@cubejs-client/playground/lib/playground/index.js:1:7:
  1 │ import './index.less';
    ╵        ~~~~~~~~~~~~~~

QueryBuilder.tsx

import { QueryBuilder } from "@cubejs-client/playground";
import { Layout, Divider, Empty, Select } from "antd";
import { find, propEq } from "ramda";
import cubejs from "@cubejs-client/core";
// import the antd styles from the `@cubejs-client/playground` package as it overrides some variables
import "antd/dist/reset.css";

import ChartRenderer from "./ChartRenderer";

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2ODEzODMwMDgsImV4cCI6MTY4MTQ2OTQwOH0.RHma0V3uzmGrCLvMo5-lSaVshHn568ycBizyLoAN0XY";
const apiUrl = "http://localhost:4000/cubejs-api/v1";
const query = {
  measures: ["GnxCompany.count"],
  timeDimensions: [
    {
      dimension: "GnxCompany.companyUpdatedDate",
      granularity: "day",
    },
  ],
  limit: 5000,
};

const cubejsApi = cubejs(token, { apiUrl });

export default function CQueryBuilder() {
  return (
    <QueryBuilder
      cubejsApi={cubejsApi}
      query={query}
      render={({ resultSet, measures, availableMeasures, updateMeasures }) => (
        <Layout.Content style={{ padding: "20px" }}>
          <Select
            mode="multiple"
            style={{ width: "100%" }}
            placeholder="Please select"
            onSelect={(m) => updateMeasures.add(find(propEq("name", m))(availableMeasures))}
            onDeselect={(m) => updateMeasures.remove(find(propEq("name", m))(availableMeasures))}
          >
            {availableMeasures.map((measure) => (
              <Select.Option key={measure.name} value={measure.name}>
                {measure.title}
              </Select.Option>
            ))}
          </Select>
          <Divider />
          {measures.length > 0 ? <ChartRenderer resultSet={resultSet} /> : <Empty description="Select a measure to get started" />}
        </Layout.Content>
      )}
    />
  );
}

[zhjuncai]

how did this get resolved? could you help here?

[igneous8k]

import { QueryBuilder } from "@cubejs-client/playground";

you have to import from @cubejs-client/react instead of playground. import { QueryBuilder } from "@cubejs-client/react";

[zhjuncai]

Thanks for the hint, trying...