CRA with CRACO

bash rm -rf node_modules npm cache clean --force

bash npm update @usecapsule/react-sdk

Problem: CRA doesn’t include polyfills for certain Node.js modules that Capsule might depend on, such as buffer or crypto.

Solution: Use CRACO to add the necessary polyfills and configurations. Adjust the configuration as needed for your specific requirements.

1. Install CRACO and required packages:

   npm install @craco/craco crypto-browserify stream-browserify buffer
   

2. Create or update your craco.config.js file:

   const webpack = require("webpack");
   
   module.exports = {
     webpack: {
       plugins: {
         add: [
           new webpack.ProvidePlugin({
             Buffer: ["buffer", "Buffer"],
           }),
         ],
       },
       configure: (webpackConfig) => {
         // ts-loader is required to reference external typescript projects/files (non-transpiled)
         webpackConfig.module.rules.push({
           test: /\.tsx?$/,
           loader: "ts-loader",
           options: {
             transpileOnly: true,
             configFile: "tsconfig.json",
           },
         });
         webpackConfig.resolve.fallback = {
           crypto: require.resolve("crypto-browserify"),
           stream: require.resolve("stream-browserify"),
           buffer: require.resolve("buffer"),
           url: false,
           zlib: false,
           https: false,
           http: false,
         };
         return webpackConfig;
       },
     },
   };
   

3. Update your package.json scripts to use CRACO:

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
   }
   

Problem: TypeScript compilation errors when using Capsule with CRA and CRACO.

Solution: Ensure your tsconfig.json is properly configured. Adjust the settings as needed for your project:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

Problem: Environment variables not being recognized in your application. Solution: Ensure you’re prefixing your environment variables with REACT_APP_ and accessing them correctly: 1. In your .env file: REACT_APP_CAPSULE_API_KEY=your_api_key_here 2. In your code:

process.env.REACT_APP_CAPSULE_API_KEY); ```
</Accordion>

<Accordion title="CSS Loading Issues">
  **Problem**: Capsule's CSS files not loading correctly.
  **Solution**: Import Capsule's CSS file in your main `App.js` or `index.js`:
  ```jsx
  import "@usecapsule/react-sdk/dist/index.css";
  function App() {
    // Your app code
  }
  export default App;