-
-
Notifications
You must be signed in to change notification settings - Fork 235
Description
Describe the bug
Most top-level React functions should be marked as pure with a Pure Annotation of /* @__PURE__ */ or /*#__PURE__*/. (for example, see this list of React functions from babel-plugin-transform-react-pure-annotations).
Vite only marks the jsx factory function as pure, but none of the top-level React functions.
This is problematic for React component libraries because it is very common for one of the top-level React functions to be used at the site of an export.
For example:
export const MyComp = React.forwardRef(/* stuff*/)As such, it means the entire library won't get treeshaken by consumers because every component looks like it might have side effects.
It seems like this should be built in. (But maybe this is more of a feature request?)
Possible Solution
I'm not familiar with Vite at all (literally just trying it out right now for the first time), but one solution might be to add the babel plugin above to the @vitejs/plugin-react package by default (maybe here?)
Workaround
Since you can add your own babel plugins to @vitejs/plugin-react, you can workaround this problem by applying the babel plugin mentioned above like so:
export default defineConfig({
// ...
plugins: [
react({
babel: {
presets: [['@babel/preset-react', { runtime: 'automatic' }]],
},
}),
],
});Note: Pure Annotations only apply when building a library as the built code will be built a second time by the consumer
Reproduction
https://stackblitz.com/edit/vitejs-vite-ukorqc?file=dist/index.es.js
System Info
System:
OS: macOS 12.4
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 162.66 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
npm: 8.10.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
Chrome: 103.0.5060.114
Firefox: 102.0.1
Safari: 15.5Used Package Manager
npm
Logs
Click to expand!
vite:config TS + native esm config loaded in 608.70ms URL {
href: 'file:///home/projects/vitejs-vite-ukorqc/vite.config.ts',
origin: 'null',
protocol: 'file:',
username: '',
password: '',
host: '',
hostname: '',
port: '',
pathname: '/home/projects/vitejs-vite-ukorqc/vite.config.ts',
search: '',
searchParams: URLSearchParams {},
hash: ''
} +0ms
vite:config using resolved config: {
vite:config build: {
vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
vite:config polyfillModulePreload: true,
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config cssCodeSplit: false,
vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
vite:config sourcemap: false,
vite:config rollupOptions: { external: [Array] },
vite:config minify: false,
vite:config terserOptions: {},
vite:config write: true,
vite:config emptyOutDir: null,
vite:config manifest: false,
vite:config lib: {
vite:config entry: './src/index.jsx',
vite:config formats: [Array],
vite:config fileName: [Function: fileName]
vite:config },
vite:config ssr: false,
vite:config ssrManifest: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config commonjsOptions: { include: [Array], extensions: [Array] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
vite:config },
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:react-babel',
vite:config 'vite:react-refresh',
vite:config 'vite:react-jsx',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:watch-package-data',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:reporter',
vite:config 'vite:load-fallback'
vite:config ],
vite:config optimizeDeps: {
vite:config disabled: 'build',
vite:config force: undefined,
vite:config include: [ 'react/jsx-runtime', 'react/jsx-dev-runtime' ],
vite:config esbuildOptions: { preserveSymlinks: undefined }
vite:config },
vite:config resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
vite:config configFile: '/home/projects/vitejs-vite-ukorqc/vite.config.ts',
vite:config configFileDependencies: [ '/home/projects/vitejs-vite-ukorqc/vite.config.ts' ],
vite:config inlineConfig: {
vite:config root: undefined,
vite:config base: undefined,
vite:config mode: undefined,
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config optimizeDeps: { force: undefined },
vite:config build: {}
vite:config },
vite:config root: '/home/projects/vitejs-vite-ukorqc',
vite:config base: '/',
vite:config publicDir: '/home/projects/vitejs-vite-ukorqc/public',
vite:config cacheDir: '/home/projects/vitejs-vite-ukorqc/node_modules/.vite',
vite:config command: 'build',
vite:config mode: 'production',
vite:config ssr: {
vite:config format: 'esm',
vite:config target: 'node',
vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] }
vite:config },
vite:config isWorker: false,
vite:config mainConfig: null,
vite:config isProduction: true,
vite:config server: {
vite:config preTransformRequests: true,
vite:config middlewareMode: false,
vite:config fs: { strict: true, allow: [Array], deny: [Array] }
vite:config },
vite:config preview: {
vite:config port: undefined,
vite:config strictPort: undefined,
vite:config host: undefined,
vite:config https: undefined,
vite:config open: undefined,
vite:config proxy: undefined,
vite:config cors: undefined,
vite:config headers: undefined
vite:config },
vite:config env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
vite:config assetsInclude: [Function: assetsInclude],
vite:config logger: {
vite:config hasWarned: false,
vite:config info: [Function: info],
vite:config warn: [Function: warn],
vite:config warnOnce: [Function: warnOnce],
vite:config error: [Function: error],
vite:config clearScreen: [Function: clearScreen],
vite:config hasErrorLogged: [Function: hasErrorLogged]
vite:config },
vite:config packageCache: Map(0) { set: [Function (anonymous)] },
vite:config createResolver: [Function: createResolver],
vite:config worker: {
vite:config format: 'iife',
vite:config plugins: [
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object]
vite:config ],
vite:config rollupOptions: {}
vite:config },
vite:config appType: 'spa',
vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }
vite:config } +7ms
vite v3.0.0 building for production...
✓ 1 modules transformed.
dist/index.es.js 0.77 KiB / gzip: 0.36 KiBValidations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.