FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory -\node_modules\typescript\lib\typescript.js in Facebook Create React App

Explanation of the problem

• A React project was migrated to TypeScript using Create React App (CRA).
• After the migration, the build process became slow (taking around 300s to complete).
• Upon converting a file from .js to .ts, the following code in the file is causing slow build times:

  findQuestion(question_uuid:string){
    const question = self.questions.find(q=>{
      return q.properties.question_uuid === question_uuid
    })
   return question
  },

• The build time increased to more than 1000s when this code was compiled.
• Another method filterQuestions(question_uuid:string) in the same file also causes an error: “Ineffective mark-compacts near heap allocation failed!”
• The project starts and runs even if the TypeScript code is not compiled.
• The project is using MobX and MobX State Tree for state management.

Technical Details:

• The code is written in TypeScript v3.7.5.
• The project is using Create React App (CRA) for the build process.
• MobX v5.15.2 and MobX-State-Tree v3.15.0 are used for state management.
• Package.json dependencies are listed in the question.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory -\node_modules\typescript\lib\typescript.js in Facebook Create React App

The error “Out of memory” occurs when the system runs out of memory to allocate to a specific process, causing the process to crash or hang. In the case of creating a new React project with npx create-react-app and installing plotly, it’s common to encounter this issue due to the large size of the plotly library. The solution proposed to fix this issue is to add a memory flag to the start scripts.

Here’s the code for the memory flag:

"start": "react-scripts --max_old_space_size=4096 start",

Other popular problems with Create React App

Problem: Linting Errors

Another issue that developers often face while working with CRA is linting errors. Linting is a crucial step in the development process as it helps to identify potential problems and ensures code consistency. CRA uses ESLint as the default linter, and it can sometimes generate false positive errors, causing the build process to fail.

Solution:

To resolve this issue, developers can either modify the ESLint configuration to ignore specific rules or install additional plugins that resolve the linting errors. The .eslintrc file in the root directory of the project can be used to modify the ESLint configuration. Here is an example of ignoring specific rules in the .eslintrc file:

{
  "extends": "react-app",
  "rules": {
    "semi": ["error", "never"],
  }
}

Problem: File size optimization

The size of the built files is another common problem that developers face when working with CRA. The built files can be large, making the application slow to load and leading to a poor user experience. This is particularly a problem when deploying the application to production.

Solution:

To resolve this issue, developers can use various optimization techniques like code splitting, tree shaking, and using code compression tools like Gzip. Code splitting enables the application to load only the necessary code required for the current route, reducing the size of the built files. Tree shaking eliminates unused code from the final build, reducing the size further. The use of Gzip compression can significantly reduce the size of the built files, making the application load faster.

Here is an example of how to use Gzip compression in the Express.js server:

var compression = require('compression');
var express = require('express');
var app = express();

app.use(compression());
app.use(express.static('public'));

app.listen(3000);

Problem: CORS (Cross-Origin Resource Sharing) issues when making API requests:

One common issue faced by developers when using Create React App is dealing with CORS errors when making API requests. CORS is a security feature that blocks requests made from a different domain than the one the requested resource is hosted on. When making an API request from a Create React App application, it is possible that the browser may block the request due to CORS restrictions.

Solution:

To solve this issue, there are a few options available. One solution is to add a proxy to the Create React App development environment. This is done by adding a “proxy” field to the package.json file of the project, pointing to the API server.

{
  ...
  "proxy": "http://localhost:8080",
  ...
}

Another solution is to make the API server allow requests from the Create React App domain. This can be achieved by setting the Access-Control-Allow-Origin header in the API server.

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

A brief introduction to Create React App

Facebook Create React App (CRA) is a popular JavaScript library that is used to develop and build user interfaces. It is a command line tool that provides a simplified development setup for React projects. With CRA, developers can quickly spin up a new React project without having to manually configure complex build systems and toolchains. The tool abstracts away many of the underlying complexities of modern web development and provides a streamlined development experience.

CRA includes a set of default configurations for tools such as Babel and Webpack, which are commonly used for React development. This allows developers to focus on writing code rather than setting up their development environment. Additionally, CRA provides a set of built-in scripts for common tasks such as testing and building the application for production. The library also integrates with other tools such as Jest and ESLint to provide a complete development ecosystem. By using CRA, developers can take advantage of best practices and established tooling to streamline their development process and produce high-quality code with minimal setup time.

Most popular use cases for Create React App

1. Building Single-Page Applications (SPAs): CRA can be used to build fast and responsive SPAs with a smooth user experience. The library provides a simple setup for developing and deploying modern React applications, allowing developers to focus on writing code for their applications.
2. Rapid Prototyping: With its streamlined setup and built-in scripts for common development tasks, CRA enables developers to quickly spin up new React projects and begin prototyping ideas and features. This can greatly speed up the development process and help teams get to market faster.
3. Integrating with External APIs: CRA provides a flexible environment for integrating with external APIs and data sources. The library includes a set of tools for handling network requests, such as Axios or Fetch, which can be used to retrieve and manipulate data from APIs. The following code block demonstrates a simple example of using Axios to retrieve data from an API in a CRA-based React project:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://api.example.com/data'
      );

      setData(result.data);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default App;