Setting up CRA with Saas UI Pro

This guide will show you how to configure CRA with Saas UI Pro.

The Pro packages are published in Typescript, this might not work out of the box with your app. You'll need to configure your bundler to transpile the Pro packages to plain Javascript.

• @saas-ui/pro
• @saas-ui/billing
• @saas-ui/charts
• @saas-ui/date-picker
• @saas-ui/features
• @saas-ui/onboarding
• @saas-ui/router

React Create App (CRA)#

To use a custom Webpack config with CRA you either need to eject the app or install react-app-rewired and follow their instructions.

yarn add -D react-app-rewired ts-loader

Add this to config-overrides.js

module.exports = function override(config) {
  config.module.rules.push({
    test: /node_modules\/@saas-ui\/(pro|billing|charts|date-picker|features|onboarding|router)\/.*\.tsx?/,
    loader: 'ts-loader',
  })
  return config
}