Flow support #2238
Comments
Eazymov
changed the title
|
This is an error during Vite's pre-scanning that uses esbuild to look for dependencies. Esbuild cannot handle flow syntax because it assumes Looks like the only way to solve this is to expose a way to add plugins to the pre-scanning phase as well :/ |
|
Many people use Flow, would be great if Vite could support it :) |
yyx990803
changed the title
|
Maybe it is possible to use this. https://www.npmjs.com/package/esbuild-plugin-flow Not sure if Vite allows passing additional plugins to esbuild directly. |
|
@henrikbjorn @Eazymov were you able to try https://www.npmjs.com/package/esbuild-plugin-flow ? Vite does support passing options to esbuild https://vitejs.dev/config/#esbuild. I think that if this works, we could close this issue. |
As i can see passing plugins is not supported vite/packages/vite/src/node/plugins/esbuild.ts Lines 20 to 24 in 352cd39 |
|
You are right,
|
Is there a way to transform the code before it is given to esbuild? I seem to remember that was possible in Vite1. |
|
@henrikbjorn You can add rollup/plugin-babel. |
If Rollup plugins are the same as vite plugins, how would that work any differently as it does now? |
|
@henrikbjorn You are not constrained to .jsx and .tsx extensions with it. You can put any syntax there vite does not support. |
The problem here is that we can't change the code, before it is given to ESBuild. That constraint is the same for Rollup plugins, when using the server. In that case, I can't see how using a Rollup will work differently than a small plugin that tries and strip flow types. |
|
See https://vitejs.dev/guide/api-plugin.html#plugin-ordering |
Look at the bug report here. Does not work, this is exactly the plugin used by the author of this issue. |
|
Disclaimer: the following is an ugly hack, but it got us moving. My first attempt used TLDR: temporarily replace const { createServer } = require('vite');
const fs = require('fs');
const babelCore = require('@babel/core');
const readFileSync = fs.readFileSync;
(async () => {
intercept();
const server = await createServer();
await server.listen();
unintercept();
})();
function intercept() {
fs.readFileSync = (...params) => { // 🤮
const [path] = params;
const src = readFileSync(...params);
return babel(path, src);
};
}
function unintercept() {
fs.readFileSync = readFileSync;
}
function babel(path, src) {
const extensions = ['.js', '.jsx'];
if (typeof src !== 'string') return src;
if (path.includes('/node_modules/')) return src;
if (!extensions.some(ext => path.endsWith(ext))) return src;
return babelCore.transformSync(src, {
// Transform just enough to allow vite to get through the precompilation stage
filename: path,
presets: ['@babel/flow'],
plugins: [
'@babel/plugin-syntax-jsx',
'@babel/plugin-syntax-class-properties',
['@babel/plugin-proposal-decorators', { legacy: true }],
],
}).code;
} |
|
You can specify your own esbuild plugins with #2991, released in These plugins are not applied during build (only dep scan and optimisation), so you will have to create both an esbuild & Vite/rollup entry if you need certain behaviour in both cases. We can continue the discussion about pre-dep-optimization Vite hooks in #3124. |
|
See @bunchtogether/vite-plugin-flow for flow support. |
|
@wehriam Hey, did you already created a PR in https://github.com/vitejs/awesome-vite ? |
|
This issue has been locked since it has been closed for more than 14 days. If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion. |
Describe the bug
I'm trying to write vite-plugin for removing Flow.js types and i'm getting the error below
Reproduction
yarn create @vitejs/apptemplate - vanillamain.jscontent:vite.config.js:yarn dev// errorBut it starts working if:
main.jsmain.jsSorry if i missed something in the docs.
System Info
viteversion: 2.0.3Logs (Optional if provided reproduction)
viteorvite buildwith the--debugflag.The text was updated successfully, but these errors were encountered: