JavaScript heap out of memory when using @babel/standalone

Question

I have react app I created using create-react-app. I am tying to take user code and evaluate it to render it.

Here is what I have tried so far.

import React, { Component } from 'react';
import './App.css';
import { transform } from "@babel/standalone";

const code =  transform("<span>Hello world</span>", {
  presets: ["@babel/react", "@babel/env"],
}).code

class App extends Component {
  render() {
    return (
      <div className="App">
       <div>
         {eval(code)}
       </div>
      </div>
    );
  }
}

This code gives me the following error in my terminal.

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

I am on a mac if that matters.

as I mentioned, the goal is to take user entered code and render it, — Chaim Friedman
– Chaim Friedman, Commented Jan 10, 2019 at 16:44

barbsan · Accepted Answer · 2019-09-09 08:29:18Z

0

I got the same error with a large react project, to fix it I made my large imports more specific.

For example:
from -

import {SelectBox} from 'somelibrary-react';

to -

import SelectBox from 'somelibrary-react/select-box';

more explanation you can find here: bundle size

edited Sep 9, 2019 at 8:29

barbsan

3,46811 gold badges23 silver badges29 bronze badges

answered Sep 9, 2019 at 7:51

Ar26

1,1391 gold badge15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript heap out of memory when using @babel/standalone

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related