how use local scope with eval

Question

I have a module JS where i use React

 import React from 'react'

My component

export default class TaskDetail extends Component {...

I have aa string that represents a code:

str=`props => {
  return React.createElement(.....

and I would use this code in a module JS like this:

const MyCustomWidget = eval(str)

so that one it would be equal to write:

const MyCustomWidget = props => {
  return React.createElement(.....

I use MyCustomWidget to create a custom element in react-jsonschema-form

the point of my question is: in my module i have imported React but i have error React is not defined that is because the result of eval have another scope... if i write on top of my module:

 window.React = React

it works! but I wouldn't want to use

It is possible use eval and use the scope of my module ? I would like to use my imported React variable in my module without use window.React=React

is possible?

Answer 1

If you want to experiment with it...

const evalInContext = a =>
    // eslint-disable-next-line no-new-func
    new Function('require', 'const React = require("react");' + a).bind(
        null,
        require
    );

See how they evaluate and run react code from a live editor in react-styleguidist https://github.com/styleguidist/react-styleguidist/blob/34f3c83e76/src/client/rsg-components/ReactExample/ReactExample.spec.js

Once again, if you cannot 100% trust what you eval, don't do it.