React is not defined

[zxdstyle]

{
  "@macaron-css/core": "^1.5.2",
  "@macaron-css/solid": "^1.5.3",
  "solid-js": "^1.8.20"
}

import {render} from "solid-js/web";
import { styled } from "@macaron-css/solid"

const root = document.getElementById('root');
render(()=> <App />, root!)

const Button = styled("button", {
    base: {}
})

function App() {
    return <Button>demo</Button>
}

[Mokshit06]

Hey! Are you using the jsx automatic transform of react?

[zxdstyle]

vite.config.ts

import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import { macaronVitePlugin } from '@macaron-css/vite'

export default defineConfig({
    plugins: [solid(), macaronVitePlugin()],
})

tsconfig.json

{
  "compilerOptions": {
    // Enable latest features
    "lib": ["ESNext", "DOM"],
    "target": "ESNext",
    "module": "ESNext",
    "moduleDetection": "force",
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "allowJs": true,

    // Bundler mode
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,

    // Best practices
    "strict": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": true,

    // Some stricter flags (disabled by default)
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noPropertyAccessFromIndexSignature": false
  }
}

[Mokshit06]

Hey, sorry missed this! Can you try reordering the plugins in the vite config?

Similar to this https://github.com/macaron-css/macaron/blob/main/examples/solid-start/vite.config.ts

[gtarsia]

Whoops, I missed this warning too Thank you!

[zxdstyle]

Oops, I wasn’t paying attention,Thank you!