Vite plugin: TypeError: griffel is not a function

[stevebeauge]

I'm trying to add griffel vite plugin to a vite project.

Here's the minimal vite config I use, similar to what's in the documentation:

import griffel from '@griffel/vite-plugin';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [griffel()],
});

However, when running vite dev it does not work, throwing: TypeError: griffel is not a function.

Here's my package.json:

{
  "name": "vite-typescript-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@griffel/tag-processor": "^1.0.1",
    "@griffel/vite-plugin": "^0.1.0",
    "typescript": "^5.2.2",
    "vite": "^5.1.0"
  }
}

Link to repro: https://stackblitz.com/edit/vitejs-vite-up5jgt?file=vite.config.ts

Thanks for the help

[yethee]

Try,

griffel.default()

[stevebeauge]

Seems to unlock running vite. However, VS Code is yelling that .default does not exists:

Guess there's something wrong with the typings

[gunta]

Reproducing here

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
failed to load config from pp/vite.config.mts
error when starting dev server:
TypeError: griffel is not a function
    atapp/vite.config.mts
    at loadConfigFromFile 
    at async resolveConfig
    at async _createServer
    at async CAC.<anonymous>
error: script "dev:vite" exited with code 1

By using griffel.default() I get the same errors also:

And after using griffel.default() the build seems to get stucked.

[BABEL] Note: The code generator has deoptimised the styling of .vite/deps/chunk-NG4TC6KA.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of .vite/deps/chunk-NG4TC6KA.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /.vite/deps/chunk-GLHGFTUS.js as it exceeds the max of 500KB.

Is it using babel internally? I'm using SWC for Vite.

[layershifter]

Fixed in #504.

@gunta the plugin indeed uses Babel internally. I also realized that there is no much sense to run the plugin in dev mode, so suggested config is:

export default defineConfig(({ command }) => ({
  // ...
  plugins: [
    // We recommend using the plugin only in production builds to get optimized output
    command === 'build' && griffel(),
  ],
}));

[layershifter]

Released in @griffel/vite-plugin@0.1.1.