TypeError: (0 , import_vite_plugin_solid_styled.default) is not a function

[Ammar Ahmed]

I am getting this error when trying to setup solid-styled with vite. It's possible that I am missing something small here but I have failed to figure it out:

yarn run v1.22.19
$ vite
failed to load config from /Users/ammarahmed/Repos/apps/openotp/vite.config.ts
error when starting dev server:
TypeError: (0 , import_vite_plugin_solid_styled.default) is not a function
    at Object.<anonymous> (/Users/ammarahmed/Repos/apps/openotp/vite.config.ts:42:49)
    at Module._compile (node:internal/modules/cjs/loader:1165:14)
    at Object._require.extensions.<computed> [as .js] (file:///Users/ammarahmed/Repos/apps/openotp/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:64524:24)
    at Module.load (node:internal/modules/cjs/loader:1043:32)
    at Function.Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1067:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at loadConfigFromBundledFile (file:///Users/ammarahmed/Repos/apps/openotp/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:64532:21)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async loadConfigFromFile (file:///Users/ammarahmed/Repos/apps/openotp/node_modules/vite/dist/node/chunks/dep-4d3eff22.js:64388:28)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

vite.config.ts:

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import solidStyledPlugin from "vite-plugin-solid-styled";

export default defineConfig({
  plugins: [
    solidPlugin(),
    solidStyledPlugin({
      filter: {
        include: "src/**/*.{ts,js,tsx,jsx}",
        exclude: "node_modules/**/*.{ts,js,tsx,jsx}",
      },
    }),
  ],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
});

package.json:

{
  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "license": "MIT",
  "devDependencies": {
    "postcss": "^8.4.23",
    "typescript": "^5.0.4",
    "vite": "^4.3.8",
    "vite-plugin-solid": "^2.7.0",
    "vite-plugin-solid-styled": "^0.9.1"
  },
  "dependencies": {
    "@solidjs/router": "^0.8.2",
    "buffer": "^6.0.3",
    "solid-icons": "^1.0.4",
    "solid-js": "^1.7.5",
    "solid-styled": "^0.9.0",
    "solid-toast": "^0.5.0"
  }
}

SolidJS Version: 1.7.5

[Alexis H. Munsayac]

This was an ESBuild issue. I would recommend using the unplugin integration. I will deprecate vite-plugin-solid-styled in the near future anyways.

[Ammar Ahmed]

Thansk, that works!.