Hi, I'm trying to load Gantt component in next.js 16 with turbopack. I'm loading the component dinamically.
The problem is that Styles are not loaded.
import dynamic from "next/dynamic";
import { Gantt } from '@svar-ui/react-gantt';
const sampleData = {
tasks: [
{
id: 20,
text: "New Task",
start: new Date(2024, 5, 11),
end: new Date(2024, 6, 12),
duration: 1,
progress: 2,
type: "task",
lazy: false,
},
...
const SvarGanttComponent = () => {
return (
<div style={{ height: '100%', width: '100%' }}>
<Gantt tasks={sampleData.tasks} links={sampleData.links} />
</div>
);
};
export const SvarGantt = dynamic(
() => Promise.resolve(SvarGanttComponent),
{ ssr: false }
);
If I force loading the css file with import "@svar-ui/react-gantt/all.css";
Then turbopack complains:
'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
Import trace:
Client Component Browser:
./node_modules/@svar-ui/react-gantt/dist-full/index.css [Client Component Browser]
./src/components/grid/SvarGantt.tsx [Client Component Browser]
Edit 1
The problem is turbopack. I managed to get it working with npm run dev --webpack.
Also the dynamic import is not needed.
Edit 2
It seems turbopack (which uses LightningCSS) does not support :global
https://github.com/vercel/next.js/issues/82057
https://github.com/parcel-bundler/lightningcss/issues/6
