SolidJS•2y ago

How do we configure babel proposal decorators with Solid's vite plugin?

I've got this Stackblitz: https://stackblitz.com/edit/solidjs-templates-wyjc1i?file=index.html,src%2Findex.tsx,vite.config.ts,package.json No luck configuring decorators like so:

export default defineConfig({
  plugins: [
    solidPlugin({
      babel: {
        plugins: ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
      },
    }),
  ],

export default defineConfig({
  plugins: [
    solidPlugin({
      babel: {
        plugins: ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
      },
    }),
  ],

Stackblitz terminal shows this error:

[BABEL] /home/projects/solidjs-templates-wyjc1i/src/index.tsx: The decorators plugin, when .version is '2018-09' or not specified, requires a 'decoratorsBeforeExport' option, whose value must be a boolean. (While processing: "/home/projects/solidjs-templates-wyjc1i/node_modules/.pnpm/@babel+plugin-proposal-decorators@7.23.3_@babel+core@7.22.5/node_modules/@babel/plugin-proposal-decorators/lib/index.js$inherits")

[BABEL] /home/projects/solidjs-templates-wyjc1i/src/index.tsx: The decorators plugin, when .version is '2018-09' or not specified, requires a 'decoratorsBeforeExport' option, whose value must be a boolean. (While processing: "/home/projects/solidjs-templates-wyjc1i/node_modules/.pnpm/@babel+plugin-proposal-decorators@7.23.3_@babel+core@7.22.5/node_modules/@babel/plugin-proposal-decorators/lib/index.js$inherits")

Ask me why I have tooling fatigue. 🙃 Buildless for the win.

StackBlitz

Solidjs - Templates (forked) - StackBlitz

Vite + solid templates

15 Replies

Joe PeaOP•2y ago

Ah, I was missing brakcets, that's all. This,

        plugins: ['@babel/plugin-proposal-decorators', { version: '2023-05' }],

        plugins: ['@babel/plugin-proposal-decorators', { version: '2023-05' }],

needs to be

        plugins: [['@babel/plugin-proposal-decorators', { version: '2023-05' }]],

        plugins: [['@babel/plugin-proposal-decorators', { version: '2023-05' }]],

lxsmnsyc•2y ago

take note that at some point we will be removing babel plugins, since we are delegating the remaining transforms to esbuild. No worries though, esbuild supports decorators

Joe PeaOP•2y ago

Esbuild does not support "standard decorators" yet, only old TypeScript legacy (experimental) decorators, if I read this correctly: https://github.com/evanw/esbuild/issues/104

GitHub

Feature request: Decorators support · Issue #104 · evanw/esbuild

error: Decorators are not supported yet Any plan to support decorators?

Joe PeaOP•2y ago

As long as we can still plug in Babel while esbuild doesn't have new decorators, then it'll be ok. But hopefully esbuild will have it soon! @lxsmnsyc 🤖 are Babel plugins being dropped in general? Or just in Vite? I currently use Babel on its own for compiling JSX

lxsmnsyc•2y ago

Vite. We can't drop it in general. and we are not dropping Babel in Vite, we are. dropping the process of compiling TS with Babel

Tye•3mo ago

@Joe Pea did you ever find a way around this?

Joe PeaOP•3mo ago

Yeah, I used Babel. See the second comment of the thread. Also, esbuild now supports modern decorators so they should work if solid start's dependencies are up to date.

Tye•3mo ago

Sorry for the lack of background, but I understand the minimal build process for how to get started with build processes. I am currently in dependency hell with solid-mediakit/auth, vinxi, and solid I'm going to try upgrading all of my dependencies, but I may be stuck with the versions that I'm currently on because auth was really tricky to setup when I did so several months ago Do you know what dependencies I need to upgrade? I've already tried vinxi, but I run into problems with ssr, and it ultimately says I don't have it enabled Upgraded all of my dependencies to latest and run into this error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". I'm not really sure exactly what this means. And I've tried babel setup and nothing This is the plugin that throws it: Plugin: tanstack-start-directive-vite-plugin @Joe Pea Are you using solidPlugin on your app.config.js to do configure your babel plugin to ["@babel/plugin-proposal-decorators", { version: "2023-11" }]?

Joe PeaOP•3mo ago

I haven't tried since last time. Vite requires configuring multiple builds (dev vs prod each need separate config). @lxsmnsyc thoughts on this?

lxsmnsyc•3mo ago

it's hardcoded not to support decorators so you have to look into another plugin that handles this one. TBF, it was configurable at some point but had to be reverted due to emergency iirc

Tye•3mo ago

Darnit Is this something that I may be able to look into more and add, of the clock? If so, where do I start? @lxsmnsyc

lxsmnsyc•3mo ago

oh well we need to update the vite plugin, at least to allow either babel or esbuild to preprocess decorators before the HMR transform but, you could try other forms of transformatiin like a vite plugin for babel?

Tye•3mo ago

I already tried that No luck That's why I asked about what plugin Joe used in the app.config.ts

lxsmnsyc•3mo ago

tried adding "enforce: pre" and putting it before solid's?

Tye•3mo ago

Gotcha, I'll see about checking it out later and editing the plugin directly. I'll llook into it more when I'm done for the day

Gaming

Programming

How do we configure babel proposal decorators with Solid's vite plugin?

Did you find this page helpful?