Coder Social home page Coder Social logo

styled is not a function about solid-styled-jsx HOT 1 OPEN

solidjs avatar solidjs commented on June 15, 2024
styled is not a function

from solid-styled-jsx.

Comments (1)

AverTry avatar AverTry commented on June 15, 2024

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.

from solid-styled-jsx.

Related Issues (3)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.