styled is not a function

[AverTry]

" styled is not a function (While processing: "\node_modules\solid-styled-jsx\babel.js")

Could it be because there are outdated dependencies? I installed with --force
I'm using Parcel and the babel.js in the plugin say's it's needed for "parcel/codesandbox had issues with preset so we have this monstrosity." but I'm not planning on using codesandbox, so is there an alternative babel file? As I tried many alternatives without a solution. https://github.com/solidjs/solid-styled-jsx/blob/main/babel.js

If I should not be using parcel, please offer a suggestion where I can add plugins to .babelrc

---

My package.json

{
    "name": "solidjs-babel",
    "version": "1.0.0",
    "scripts": {
        "start": "parcel index.html",
        "start2": "parcel index.html --open",
        "build": "parcel build index.html"
    },
    "dependencies": {
        "babel-preset-solid": "^1.8.4",
        "solid-js": "^1.8.5",
        "solid-styled-jsx": "^0.27.1",
        "styled-jsx": "^5.1.2"
    },
    "devDependencies": {
        "@babel/core": "^7.23.3",
        "parcel": "^2.10.3"
    },
    "keywords": [],
    "browserslist": {
        "browserslist": "> 0.25%, not dead"
    }
}

[AverTry]

Now doing it in Vite, using "vite-plugin-babel"

PLEASE HELP

vite.config.js

import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import babel from 'vite-plugin-babel';

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

.babelrc

{
  "presets": ["babel-preset-solid"],
  "plugins": ["styled-jsx/babel", "solid-styled-jsx/babel"],
  "parserOpts": {}
}

package.json

{
  "name": "pluginbabel",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "babel-preset-solid": "^1.8.4",
    "solid-js": "^1.8.5",
    "solid-styled-jsx": "^0.27.1",
    "styled-jsx": "^5.1.2",
    "vite-plugin-babel": "^1.1.3"
  },
  "devDependencies": {
    "vite": "^4.4.5",
    "vite-plugin-solid": "^2.7.2"
  }
}

solid-styled-jsx is still giving the same error

[plugin:babel-plugin] [BABEL] C:\Users\admin\Documents\My Websites\pluginbabel\src\index.jsx: styled is not a function (While processing: "C:\\Users\\admin\\Documents\\My Websites\\pluginbabel\\node_modules\\solid-styled-jsx\\babel.js")
C:/Users/admin/Documents/My Websites/pluginbabel/src/index.jsx
    at module.exports (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\solid-styled-jsx\babel.js:6:13)
    at sync (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\gensync-utils\async.js:30:25)
    at sync (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\gensync\index.js:182:19)
    at C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\gensync\index.js:210:24
    at Generator.next (<anonymous>)
    at C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\config\full.js:180:21
    at Generator.next (<anonymous>)
    at Function.<anonymous> (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\gensync-utils\async.js:21:3)
    at Generator.next (<anonymous>)
    at evaluateSync (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\gensync\index.js:251:28)
    at Function.sync (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\gensync\index.js:89:14)
    at sync (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\gensync-utils\async.js:61:25)
    at sync (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\gensync\index.js:182:19)
    at onFirstPause (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\gensync\index.js:210:24)
    at Generator.next (<anonymous>)
    at cachedFunction (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\config\caching.js:52:46)
    at cachedFunction.next (<anonymous>)
    at loadPluginDescriptor (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\config\full.js:259:42)
    at loadPluginDescriptor.next (<anonymous>)
    at loadPluginDescriptors (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\config\full.js:129:33)
    at loadPluginDescriptors.next (<anonymous>)
    at C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\config\full.js:156:21
    at Generator.next (<anonymous>)
    at loadFullConfig (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\config\full.js:141:5)
    at loadFullConfig.next (<anonymous>)
    at transform (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\transform.js:20:44)
    at transform.next (<anonymous>)
    at evaluateSync (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\gensync\index.js:251:28)
    at sync (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\gensync\index.js:89:14)
    at stopHiding - secret - don't use this - v1 (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\errors\rewrite-stack-trace.js:47:12)
    at Object.transformSync (C:\Users\admin\Documents\My Websites\pluginbabel\node_modules\@babel\core\lib\transform.js:42:76)
    at TransformContext.transform (file:///C:/Users/admin/Documents/My%20Websites/pluginbabel/node_modules/vite-plugin-babel/dist/index.mjs:71:43)
    at Object.transform (file:///C:/Users/admin/Documents/My%20Websites/pluginbabel/node_modules/vite/dist/node/chunks/dep-46921e22.js:44221:62)
    at async loadAndTransform (file:///C:/Users/admin/Documents/My%20Websites/pluginbabel/node_modules/vite/dist/node/chunks/dep-46921e22.js:54877:29)
    at async viteTransformMiddleware (file:///C:/Users/admin/Documents/My%20Websites/pluginbabel/node_modules/vite/dist/node/chunks/dep-46921e22.js:64258:32
Click outside or fix the code to dismiss.