Migrating from Create React App (CRA) to Vite

• vite

  785 64,595 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import viteTsconfigPaths from 'vite-tsconfig-paths'; import svgrPlugin from 'vite-plugin-svgr'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), viteTsconfigPaths(), svgrPlugin()], });

• vite-tsconfig-paths

  5 1,160 6.5 TypeScript

  Support for TypeScript's path mapping in Vite

We need vite-tsconfig-paths in order to tell Vite how to resolve absolute paths from the tsconfig file. This way you can import modules like this:

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• vite-plugin-svgr

  4 470 7.2 TypeScript

  Vite plugin to transform SVGs into React components

We need vite-plugin-svgr in order to import SVGs as React components. For example:

• create-vite-app

  1 559 1.8 JavaScript

  Discontinued Create a Vite-powered app in seconds!

  

You can also take a look at Vite's tsconfig.json file here for reference.

• okta-auth-js

  5 430 7.4 TypeScript

  The official js wrapper around Okta's auth API

  

Answer: This often happens when you're using a library with a umd bundle, where Vite expects an ESM bundle. This happened to me with okta-auth-js and the fix was to specifcally tell Vite to load the umd bundle in the Vite config file:

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project