chore(deps): update dependency @vitejs/plugin-react to v4 #120

renovate · 2023-06-01T20:42:37Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@vitejs/plugin-react (source)	`^3.0.0` -> `^4.0.0`

Release Notes

vitejs/vite-plugin-react (@vitejs/plugin-react)

`v4.3.3`

Compare Source

React Compiler runtimeModule option removed

React Compiler was updated to accept a target option and runtimeModule was removed. vite-plugin-react will still detect runtimeModule for backwards compatibility.

When using a custom runtimeModule or target !== '19', the plugin will not try to pre-optimize react/compiler-runtime dependency.

The react-compiler-runtime is now available on npm can be used instead of the local shim for people using the compiler with React < 19.

Here is the configuration to use the compiler with React 18 and correct source maps in development:

npm install babel-plugin-react-compiler react-compiler-runtime @&#8203;babel/plugin-transform-react-jsx-development

export default defineConfig(({ command }) => {
  const babelPlugins = [['babel-plugin-react-compiler', { target: '18' }]]
  if (command === 'serve') {
    babelPlugins.push(['@&#8203;babel/plugin-transform-react-jsx-development', {}])
  }

  return {
    plugins: [react({ babel: { plugins: babelPlugins } })],
  }
})

`v4.3.2`

Compare Source

Ignore directive sourcemap error #369

`v4.3.1`

Compare Source

Fix support for React Compiler with React 18

The previous version made this assumption that the compiler was only usable with React 19, but it's possible to use it with React 18 and a custom runtimeModule: https://gist.github.com/poteto/37c076bf112a07ba39d0e5f0645fec43

When using a custom runtimeModule, the plugin will not try to pre-optimize react/compiler-runtime dependency.

Reminder: Vite expect code outside of node_modules to be ESM, so you will need to update the gist with import React from 'react'.

`v4.3.0`

Compare Source

Fix support for React compiler

Don't set retainLines: true when the React compiler is used. This creates whitespace issues and the compiler is modifying the JSX too much to get correct line numbers after that. If you want to use the React compiler and get back correct line numbers for tools like vite-plugin-react-click-to-component to work, you should update your config to something like:

export default defineConfig(({ command }) => {
  const babelPlugins = [['babel-plugin-react-compiler', {}]]
  if (command === 'serve') {
    babelPlugins.push(['@&#8203;babel/plugin-transform-react-jsx-development', {}])
  }

  return {
    plugins: [react({ babel: { plugins: babelPlugins } })],
  }
})

Support HMR for class components

This is a long overdue and should fix some issues people had with HMR when migrating from CRA.

`v4.2.1`

Compare Source

Remove generic parameter on Plugin to avoid type error with Rollup 4/Vite 5 and skipLibCheck: false.

I expect very few people to currently use this feature, but if you are extending the React plugin via api object, you can get back the typing of the hook by importing ViteReactPluginApi:

import type { Plugin } from 'vite'
import type { ViteReactPluginApi } from '@&#8203;vitejs/plugin-react'

export const somePlugin: Plugin = {
  name: 'some-plugin',
  api: {
    reactBabel: (babelConfig) => {
      babelConfig.plugins.push('some-babel-plugin')
    },
  } satisfies ViteReactPluginApi,
}

`v4.2.0`

Compare Source

Update peer dependency range to target Vite 5

There were no breaking change that impacted this plugin, so any combination of React plugins and Vite core version will work.

Align jsx runtime for optimized dependencies

This will only affect people using internal libraries that contains untranspiled JSX. This change aligns the optimizer with the source code and avoid issues when the published source don't have React in the scope.

Reminder: While being partially supported in Vite, publishing TS & JSX outside of internal libraries is highly discouraged.

`v4.1.1`

Compare Source

Enable retainLines to get correct line numbers for jsxDev (fix #235)

`v4.1.0`

Compare Source

Add @types/babel__cores to dependencies (fix #211)
Improve build perf when not using Babel plugins by lazy loading @babel/core #212
Better invalidation message when an export is added & fix HMR for export of nullish values #215
Include non-dev jsx runtime in optimizeDeps & support HMR for JS files using the non dev runtime #224
The build output now contains a index.d.cts file so you don't get types errors when setting moduleResolution to node16 or nodenext in your tsconfig (we recommend using bundler which is more close to how Vite works)

`v4.0.4`

Compare Source

Fix #198: Enable Babel if presets list is not empty

`v4.0.3`

Compare Source

Revert #108: Remove throw when refresh runtime is loaded twice to enable usage in micro frontend apps. This was added to help fix setup usage, and this is not worth an annoying warning for others or a config parameter.

`v4.0.2`

Compare Source

Fix fast-refresh for files that are transformed into jsx (#188)

`v4.0.1`

Compare Source

Support Vitest deps.experimentalOptimizer
Support using components inside web workers (#181)

`v4.0.0`

Compare Source

This major version include a revamp of options:

include/exclude now allow to completely override the files processed by the plugin (#122). This is more in line with other Rollup/Vite plugins and simplify the setup of enabling Fast Refresh for .mdx files. This can be done like this:

export default defineConfig({
  plugins: [
    { enforce: 'pre', ...mdx() },
    react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
  ],
})

These changes also allow to apply Babel plugins on files outside Vite root (expect in node_modules), which improve support for monorepo (fix #16).

With these changes, only the file extensions is used for filtering processed files and the query param fallback is removed.

fastRefresh is removed (#122). This should be correctly activated by plugin without configuration.
jsxPure is removed. This is a niche use case that was just passing down the boolean to esbuild.jsxSideEffects. (#129)

The support for React auto import whe using classic runtime is removed. This was prone to errors and added complexity for no good reason given the very wide support of automatic runtime nowadays. This migration path should be as simple as removing the runtime option from the config.

This release goes in hand with the upcoming Vite 4.3 release focusing on performances:

Cache plugin load (#141)
Wrap dynamic import to speedup analysis (#143)

Other notable changes:

Silence "use client" warning (#144, fix #137)
Fast Refresh is applied on JS files using automatic runtime (#122, fix #83)
Vite 4.2 is required as a peer dependency (#128)
Avoid key collision in React refresh registration (a74dfef, fix #116)
Throw when refresh runtime is loaded twice (#108, fix #101)
Don't force optimization of jsx-runtime (#132)

`v3.1.0`

Compare Source

doc: add jsxImportSource option (38d71f6)
chore: bump release-scripts, typecheck package in CI, remove cache for eslint (9af763d)
fix: fast-refresh explain link (#97) (6097795), closes #97

`v3.0.1`

Compare Source

fix: don't invalidate when code is invalid (#67) (9231a86), closes #67
fix(deps): update all non-major dependencies (#69) (0a8e099), closes #69

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

renovate · 2023-06-01T20:42:39Z

⚠ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

any of the package files in this branch needs updating, or
the branch becomes conflicted, or
you click the rebase/retry checkbox if found above, or
you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.0.3" from the root project
npm ERR!   peer vite@"^3.0.0 || ^4.0.0" from @joshwooding/[email protected]
npm ERR!   node_modules/@joshwooding/vite-plugin-react-docgen-typescript
npm ERR!     @joshwooding/vite-plugin-react-docgen-typescript@"^0.2.1" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/react-vite
npm ERR!       dev @storybook/react-vite@"^7.0.0-beta.16" from the root project
npm ERR!   5 more (@storybook/builder-vite, @storybook/react-vite, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @vitejs/plugin-react@"^4.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vite
npm ERR!   peer vite@"^4.2.0" from @vitejs/[email protected]
npm ERR!   node_modules/@vitejs/plugin-react
npm ERR!     dev @vitejs/plugin-react@"^4.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /tmp/worker/3f6474/b82449/cache/others/npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/worker/3f6474/b82449/cache/others/npm/_logs/2023-06-01T20_42_31_970Z-debug-0.log

chore(deps): update dependency @vitejs/plugin-react to v4

caee122

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(deps): update dependency @vitejs/plugin-react to v4 #120

chore(deps): update dependency @vitejs/plugin-react to v4 #120

Uh oh!

renovate bot commented Jun 1, 2023 •

edited

Loading

Uh oh!

renovate bot commented Jun 1, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

0 participants

chore(deps): update dependency @vitejs/plugin-react to v4 #120

Are you sure you want to change the base?

chore(deps): update dependency @vitejs/plugin-react to v4 #120

Uh oh!

Conversation

renovate bot commented Jun 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

React Compiler runtimeModule option removed

Fix support for React Compiler with React 18

Fix support for React compiler

Support HMR for class components

Update peer dependency range to target Vite 5

Align jsx runtime for optimized dependencies

Configuration

Uh oh!

renovate bot commented Jun 1, 2023

⚠ Artifact update problem

File name: package-lock.json

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

0 participants

renovate bot commented Jun 1, 2023 •

edited

Loading