Does not provide an export named 'default' + vite

[j-mcfarlane]

Steps to reproduce

Steps:

1. Create new vite project pnpx create-vite pigment (Currently build 6.0.2, but I also tried vite versions 5.1.8 and 5.0.0)
2. Install pigment pnpm add @pigment-css/react and @pigment-css/vite-plugin
3. Update vite config to have pigment({}) plugin
4. Add import '@pigment-css/react/styles.css' to main.tsx
5. Remove vite boiler plate styles
6. Run project pnpm run dev the project will run
7. Change app.tsx to the following

import { styled } from '@pigment-css/react'

export const Container = styled('div')`
    background: blue;
`

function App() {
    return <Container>App</Container>
}

export default App

Observe the following error

Current behavior

Currently the project throws an error requested module does not provide an export named 'default'

Expected behavior

Should see a blue square

Context

I am trying to add pigment to my vite project

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: vite

[joebochill]

I ran into this yesterday as well. I followed the recommendation in this issue and was able to resolve that error:
#176

But still not able to get the Pigment styles to work in Vite because of: #343

[paulm17]

I'm still running v5 of vite. But when I had the same error. This resolved it for me (in vite config):

optimizeDeps: {
  include: ['prop-types', 'react-is', 'hoist-non-react-statics', 'html-react-parser'],
}

I have more deps, because as for my use case. As soon as I resolved 1, another error followed. So depending on your use case...