CRA with CRACO

Implementing Para in Create React App (CRA) projects with CRACO can present specific challenges. This guide provides targeted solutions and best practices to help you overcome common integration hurdles.

Using an LLM (ChatGPT, Claude) or Coding Assistant (Cursor, Github Copilot)? Here are a few tips:

Include the Para LLM-optimized context file to ensure you’re getting the most up-to-date help!
Check out the Example Hub Wiki for an interactive LLM that leverages the Para Examples Hub!

General Troubleshooting Steps

Before diving into specific issues, try these general troubleshooting steps:

Clear cache and node_modules

bash rm -rf node_modules npm cache clean --force

Reinstall dependencies

bash npm install

Update Para-related packages

bash npm update @getpara/react-sdk

Rebuild the project

bash npm run build

Common Issues and Solutions

Polyfill Missing Node.js Modules

Problem: CRA doesn’t include polyfills for certain Node.js modules that Para 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.

Install CRACO and required packages:

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

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;
    },
  },
};

Update your package.json scripts to use CRACO:

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

TypeScript Compilation Issues

Problem: TypeScript compilation errors when using Para 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"]
}

Environment Variables Not Accessible

CSS Loading Issues

Problem: Para’s CSS files not loading correctly. Solution: Import Para’s CSS file in your main App.js or index.js:

import "@getpara/react-sdk/dist/index.css";
function App() {
  // Your app code
}
export default App;

Best Practices

Use the Latest Versions: Always use the latest versions of CRA, CRACO, and Para SDK to ensure compatibility and access to the latest features.
Error Handling: Implement error boundaries to gracefully handle any runtime errors related to Para integration.
Development vs Production: Use environment-specific configurations to manage different settings for development and production builds. Para provides environment-specific API keys.
Keep CRACO Config Clean: Only add necessary overrides in your CRACO configuration to avoid potential conflicts with CRA’s default settings.

By following these troubleshooting steps and best practices, you should be able to resolve most common issues when integrating Para with your Create React App project using CRACO.

Integration Support

If you’re experiencing issues that aren’t resolved by our troubleshooting resources, please contact our team for assistance. To help us resolve your issue quickly, please include the following information in your request:

1
A detailed description of the problem you’re encountering.
2
Any relevant error messages or logs.
3
Steps to reproduce the issue.
4
Details about your system or environment (e.g., device, operating system, software version).

Providing this information will enable our team to address your concerns more efficiently.

Introduction

Setup

Guides

API & Troubleshooting

General Troubleshooting Steps

Common Issues and Solutions

Best Practices

Integration Support

Introduction

Setup

Guides

API & Troubleshooting

​General Troubleshooting Steps

​Common Issues and Solutions

​Best Practices

​Integration Support

General Troubleshooting Steps

Common Issues and Solutions

Best Practices

Integration Support