Open kevinschaich opened 4 months ago
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
@arjunvegda this is helpful, thanks for the tip. I'm using the vite version you posted.
However, for some reason when I do this the build file turns out to be MUCH larger. It appears as if it's pulling in CSS from other libraries (i.e. Mantine) in my node_modules. Having trouble understand what's actually happening other than my vendor file is twice as large now.
Any ideas?
@arjunvegda is there a reason the devtools themselves can't import styles.css
? I think it would simplify imports for all frameworks
if that's not an option this is probably the preferred import method for Next
providers.tsx
'use client'
import { Provider as JotaiProvider, createStore } from 'jotai'
import dynamic from 'next/dynamic'
import { ReactNode } from 'react'
const JotaiDevtools = dynamic(() => import('@/components/providers/jotai-devtools'), {ssr: false})
const store = createStore()
export const Providers = ({children}: {children: ReactNode}) => {
return (
<JotaiProvider store={store}>
{process.env.NODE_ENV === 'development' && <JotaiDevtools store={store} />}
{children}
</JotaiProvider>
)
}
jotai-devtools.tsx
import { createStore } from 'jotai'
import { DevTools } from 'jotai-devtools'
import 'jotai-devtools/styles.css'
export default function JotaiDevtools({ store }: { store: ReturnType<typeof createStore> }) {
return (
<DevTools
store={store}
theme='dark'
position='bottom-right'
options={{ shouldExpandJsonTreeViewInitially: true }}
/>
)
}
@arjunvegda is there a reason the devtools themselves can't import
styles.css
? I think it would simplify imports for all frameworks
I tried that only to find that most bundlers don't support that and they error out. 😟 If our current approach becomes too difficult for users, we could look into converting these styles from css files to inline styles 🤔 .
I tried it like this first but it was complaining that an import has to be a top-level declaration:
I also tried it with
next/dynamic
but no luck there.