T
TanStack•11mo ago
wise-white

rollup-plugin-typescript2

Not sure if it's a skill issue or something, but adding rollup-plugin-typescript2 seems to break types in Start, not sure if this should be supported but wondering if there's an out of the box way to add TS transformers like such?
No description
No description
9 Replies
rare-sapphire
rare-sapphire•11mo ago
what does this transformer do?
wise-white
wise-whiteOP•11mo ago
It's used for react-intl. It's used to convert <Trans> component renders and inject an ID into them for internationalization
wise-white
wise-whiteOP•11mo ago
rare-sapphire
rare-sapphire•11mo ago
does this work with vite alone? e.g. router with automatic code splitting in vite
wise-white
wise-whiteOP•11mo ago
Let me check when I get out of work, I didn’t try This is my first personal Vite project Following up on this. I guess I hadn't realized you can use Babel plugins in Vite. So I tried that in a barebones Vite project, and it worked. I imagine it should work for Start also?
rare-sapphire
rare-sapphire•11mo ago
I think so yes let me know if it worked
wise-white
wise-whiteOP•11mo ago
Babel works! 😄
rare-sapphire
rare-sapphire•11mo ago
can you post an example for anyone looking for this in the future ?
wise-white
wise-whiteOP•11mo ago
Definitely will In my case - I was using this for react-intl / formatjs, so this is how I configured app.config.ts to use their babel plugin: 
import { defineConfig } from '@tanstack/start/config';
import tsconfigPaths from 'vite-tsconfig-paths';
import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';

export default defineConfig({
  server: {
    preset: 'vercel',
  },
  react: {
    babel: {
      plugins: [
        [
          'formatjs',
          {
            idInterpolationPattern: '[sha512:contenthash:base64:6]',
            ast: true,
          },
        ],
      ],
    },
  },
  vite: {
    plugins: [
      tsconfigPaths({ projects: ['./tsconfig.json'] }),
      wasm(),
      topLevelAwait(),
    ],
  },
});
import { defineConfig } from '@tanstack/start/config';
import tsconfigPaths from 'vite-tsconfig-paths';
import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';

export default defineConfig({
  server: {
    preset: 'vercel',
  },
  react: {
    babel: {
      plugins: [
        [
          'formatjs',
          {
            idInterpolationPattern: '[sha512:contenthash:base64:6]',
            ast: true,
          },
        ],
      ],
    },
  },
  vite: {
    plugins: [
      tsconfigPaths({ projects: ['./tsconfig.json'] }),
      wasm(),
      topLevelAwait(),
    ],
  },
});

Did you find this page helpful?