React Compiler With Meteor 3.4.1

help
1

I have been looking for examples on how to setup the react-compiler with Meteor 3.4.1. I’ve tried the rspack configuration but it doesn’t work. Has anyone been able to set it up correctly?

1 Like
2

Could you mind sharing your repo with it? What errors are you seeing in your end?

@nachocodoner do you recall if we had an example with React Compiler somewhere?

3

Thank you @grubba for replying. I found that I had a weird issue with my Meteor 3.4.1 upgrade but I did a clean install and now its working perfectly.

I double checked on Meteor’s GitHub and couldn’t find any example with react compiler (might be a good idea for the future for any other person that might want to use it).

4

We have an example of app in the E2E tests apps that uses react-compiler.

Could you try it?

It was based on the Rspack docs: React - Rspack

5

Thank you @nachocodoner. I used this as an example at the end, had a couple of tweaks based on the rspack documentation. Just in case it helps anyone, this is the simple setup I organized with typescript:

rspack.config.ts

import { defineConfig } from '@meteorjs/rspack';
import { TsCheckerRspackPlugin } from 'ts-checker-rspack-plugin';

export default defineConfig(() => {
  return {
    plugins: [new TsCheckerRspackPlugin()],
    module: {
      rules: [
        {
          test: /\.(?:jsx|tsx)$/,
          exclude: /node_modules|\.meteor\/local/,
          use: [
            {
              loader: 'builtin:swc-loader',
              options: {
                jsc: { transform: { react: { runtime: 'automatic' } } },
              },
            },
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
              },
            },
          ],
        },
      ],
    },
  };
});

babel.config.ts

export default {
  plugins: ['babel-plugin-react-compiler', '@babel/plugin-syntax-jsx', ['@babel/plugin-syntax-typescript', { isTSX: true }]],
};

package.json - Here make sure you add the following devDependencies:

  • @babel/plugin-syntax-jsx
  • @babel/plugin-syntax-typescript
  • babel-loader
  • babel-plugin-react-compiler

I previously had the swc.config.ts file but it is no longer needed (you need to add the setup in the builtin:swc-loader options.jsc).

1 Like