Usage with Vite?

[alexgleason]

I'm migrating a legacy React TypeScript project from Webpack to Vite. I have some pretty substantial preval code.

Vite uses Babel internally, so I think it should be possible to use this with Vite. Has anyone succeeded in getting it working?

[lobaak]

@alexgleason I was able to get preval working with the following:

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['preval'],
      },
    })
  ],
});

[istonejoeljonsson]

Can you show any example of how you use this? @lobaak

[ArturBaybulatov]

@lobaak Hey! Why did you specify react() twice?

[lobaak]

@ArturBaybulatov sorry, that is a typo. I've corrected.

@istonejoeljonsson we use the following to get the version of the library package

const version =
    preval`module.exports = process.env.npm_package_version` || '-';

[maurer2]

Hello, I believe you can use vite's virtual module feature for this: See here for more info: https://evomark.co.uk/development/making-your-tailwind-config-available-to-your-entire-application-with-vite/