Using Babel Plugin for Decorators

[dresch86]

I'm trying to get a project off the ground that uses Sequelize. I would like to define the models using sequelize-typescript using decorators. I added the Babel plugin for decorators:

import babel from 'vite-plugin-babel';
import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
    vite: {
        plugins: [
            babel({
                babelConfig: {
                    babelrc: false,
                    configFile: false,
                    presets: [["solid", { "generate": "ssr", "hydratable": true }]],
                    plugins: [
                        ["@babel/plugin-proposal-decorators", { "version": "2023-11" }],
                    ]
                }
            }),
            tsconfigPaths()
        ]
    },
    middleware: "./src/middleware/middleware.ts"
});

SolidStart builds find and I am able to get the server to listen. The trouble comes when I actually try to access the page, the server crashes with this error:

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.

If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.

It looks like the SSR stuff isn't using the Babel plugin. Any ideas on how I can get decorator support on the SSR code?

[c-classen]

After bumping into this issue myself, spending a lot of time searching for a solution and then looking at the definition of the defineConfig function here, I think I figured it out. You can actually add a solid property to the object you are passing to defineConfig which can have a babel property containing the required plugin configuration:

export default defineConfig({
  [...],
  solid: {
    babel: {
      plugins: [["@babel/plugin-syntax-decorators", {legacy: true}]]
    }
  } as any
});

The as any seems to be needed as there are some properties that are required in the object assigned to solid, but in the defineConfig function, the default for the object is the empty object, so that should be fine.

I don't know why I added the legacy: true anymore, but it works and it is just a hobby project, so I don't really care 🙃

[dresch86]

You are a total lifesaver!! I blew hours trying to get this working and what you said did the job. I added { "version": "2023-11" } since I am using the latest version of the plugin, but everything works. This really should be added to the documentation. Decorators make creating migrations easy whether you use Sequelize or TypeORM and nearly every app is backed by a database....