Skip to content

Conversation

@dennisgsmith
Copy link
Contributor

@dennisgsmith dennisgsmith commented Nov 4, 2022

Using Vite allows:

  • More extensible bundler config without ejecting CRA or using CRACO / react-app-rewired
  • Faster HMR, better devx, etc.

Migration includes:

  1. Move index.html to root and update configuration
  2. All files that return jsx must have.jsx extension
    a. Find and replace bash script: find . -iname "*.js" -exec grep -q 'import React' {} \; -exec mv "{}" "{}x" \;
  3. Add vite.config.js file
  4. Update process.env with import.meta.env and process.env.NODE_ENV === 'development' | 'production' with import.meta.env.DEV | PROD respectively
  5. Remove remaining CRA/webpack code
  6. After Vite setup, eslint errors / warnings fixed

Issue encountered with Plotly.js due to upstream outdated d3 version. WIP

@dennisgsmith
Copy link
Contributor Author

dennisgsmith commented Nov 4, 2022

Issue ended up being an outdated Plotly.js dist, rather than the main dist. Note:

  • global needed to be available and set to globalThis for d3 es6 compatibility (see vite.config.js)
  • Instead of using cjs require, minify-plotly now uses mjs import * as Plotly from '...' syntax so it can export as ESM with proper default

Everything is now working as expected.

@dennisgsmith
Copy link
Contributor Author

closing in favor of #182

@dennisgsmith dennisgsmith deleted the enhancement/cra-to-vite branch July 21, 2023 21:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants