Dropdown not rendering

[dattakugve]

Hi TreeSelect is not rendering properly despite importing all the styles. Below is my code

import 'rc-tree-select/assets/index.less'; import TreeSelect from 'rc-tree-select';

function App() {

  const data = [{
    label: 'search me',
    value: 'searchme',

  }]
  return (

    <div>
      Tree select demo
      <TreeSelect treeData={data} style={{ width: '300px' }} placeholder="select" />
    </div>
  );
}

export default App;

Dropdown is not rendering correctly as can be seen from the attached screenshot. Am I missing something here or is it a bug. Please let me know

[dattakugve]

Do I need to install some compiler to compile .less files? Please let me know

[mohamadmulhem]

The same thing happens for me, not rendering!

[mohamadmulhem]

Internally it is loading the index.css but not rendering!

[roomay04]

I have same problem. I try the codesandbox and it won't rendered too. show like this

[Hidekih]

I solve this issue, but my project is in NextJs 13 (without app folder).

Yes, we need a less compiler. This issue helped me #225

install next-with-less as a dependencie and import it on next.config.js

// next.config.js
const withLess = require("next-with-less");

/** @type {import('next').NextConfig} */
const nextConfig = {
  // ...your configs
}

module.exports = withLess(nextConfig);

on _app.tsx import rc-tree-select/assets/index.less

// _app.tsx
import "rc-tree-select/assets/index.less";
...