Skip to content

chore: upgrade to react 19 react-to-print v3#40

Open
saurabhraghuvanshii wants to merge 3 commits intolayer5io:masterfrom
saurabhraghuvanshii:peer
Open

chore: upgrade to react 19 react-to-print v3#40
saurabhraghuvanshii wants to merge 3 commits intolayer5io:masterfrom
saurabhraghuvanshii:peer

Conversation

@saurabhraghuvanshii
Copy link
Copy Markdown
Member

Notes for Reviewers

package.json

Dev command fixed

  • From old: webpack-dev-server -d --progress --colors
  • To new: webpack serve --progress --color
  • Why: old flags/options are not valid with current webpack CLI.

###React ecosystem upgraded

  • react -> 19.x
  • react-dom -> 19.x
  • Why: keep your repo modern and avoid peer conflicts in other repos.

react-to-print upgraded

  • 2.15.1 -> 3.3.0
  • Why: old version caused peer dependency warnings and was not ideal with latest React.

ajv added in devDependencies

  • Why: fixes webpack/schema-utils runtime mismatch (ajv/dist/compile/codegen errors).

⚙️ webpack.config.js Updates

Removed Deprecated / Broken Options

  • NamedModulesPlugin (Webpack 4 era, crashes in Webpack 5)
  • disableHostCheck
  • inline
  • devServer.stats
  • ESLintWebpackPlugin (incompatible with ESLint v10 flat config)

Added Modern Dev Server Settings

allowedHosts: 'all',
historyApiFallback: true
Screencast.From.2026-04-01.17-11-43.mp4

examples/Router/index.js

Migrated router API

  • Replaced old Switch + withRouter
  • With new Routes, useNavigate, useLocation
  • Why: required for react-router-dom v7.

Updated route syntax

  • Old component/render props -> new element prop
  • Why: modern Router API expects this format.

Kept class component working

  • Added small wrapper (RoutedExamples) to pass navigate and location into class component
    -- Why: class component can’t directly use hooks.

Made mount target safer

document.getElementById('app-root') || document.getElementById('root')
Why: avoids blank page if one id is missing.

src/components/TableToolbar.js

Print feature was updated for new react-to-print version.

  • Old print implementation replaced

  • Removed old ...
    Added useReactToPrint with a small helper component PrintTableButton
    -- Why: v3 uses hooks API instead of old render-prop API.
    Runtime crash fix

useReactToPrint({}) instead of useReactToPrint()
Why: v3 destructures options; undefined caused:
Cannot destructure property 'bodyClass' of 'undefined'

Signed commits

  • Yes, I signed my commits.

Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
Copy link
Copy Markdown

@banana-three-join banana-three-join left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>
Copy link
Copy Markdown

@banana-three-join banana-three-join left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants