Utilize external functions in evaluated code

Question

Utilize external functions in evaluated code

After working with a TypeScript file containing the following code:

import { functionTest } from './function_test'

function runnerFunctionTest() {
    console.log("Test");
}

export class Runner {
    run(source : string) {
        eval(source);
    }
}

I encountered an issue where calling

run("runnerFunctionTest();")

would work fine, but calling run("functionTest();") would result in an error stating that functionTest is undefined.

How can this problem be resolved?

One attempted solution involved replacing the code within run with

new Function('functionTest', source).(functionTest);

. While this worked, manually adding each imported function like this is not ideal, especially as the number of functions continues to grow over time.

It should also be noted that using eval raises security concerns, but it seems to be necessary in order to execute user-generated JavaScript code within the browser.

javascript typescript import eval javascript-import

Answer 1

Answer №1

Due to the fact that import is not a built-in operator, webpack or another tool will need to transform it for you. Once processed by webpack, your code will look like this:

/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Runner", function() { return Runner; });
/* harmony import */ var _function_test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);

function runnerFunctionTest() {
    console.log("Test");
}

class Runner {
    run(source) {
        eval(source);
    }
}

The identifier functionTest no longer exists, which explains why you cannot evaluate it.

One way to resolve this issue is by assigning it a local name:

import { functionTest } from './function_test'
const function_test = functionTest;
function runnerFunctionTest() {
    console.log("Test");
}

export class Runner {
    run(source : string) {
        eval(source);
    }
}

After making this change, you can execute runner.run('function_test()')

Answer 2

Due to the fact that import is not a built-in operator, webpack or another tool will need to transform it for you. Once processed by webpack, your code will look like this:

/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Runner", function() { return Runner; });
/* harmony import */ var _function_test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);

function runnerFunctionTest() {
    console.log("Test");
}

class Runner {
    run(source) {
        eval(source);
    }
}

The identifier functionTest no longer exists, which explains why you cannot evaluate it.

One way to resolve this issue is by assigning it a local name:

import { functionTest } from './function_test'
const function_test = functionTest;
function runnerFunctionTest() {
    console.log("Test");
}

export class Runner {
    run(source : string) {
        eval(source);
    }
}

After making this change, you can execute runner.run('function_test()')

Utilize external functions in evaluated code

Answer №1

Similar questions

Running various callbacks consecutively from an array in JavaScript

What makes AJAX take so much time to load?

Tips for utilizing a ForEach loop in JavaScript to create an object with dynamically provided keys and values

Why isn't my file being recognized post-multer middleware?

Testing the mongoose.connect callback method in Jest: A step-by-step guide

How to sort Firebase real-time database by the child node with the highest number of

Unable to make a reference to this in TypeScript

encountering a problem integrating react-dropzone into a project using react-16.13.1

To display a pattern with a series of alternating addition and subtraction operators, starting from -1 and ending at n, use JavaScript to iterate through the numbers and implement the pattern -1+

Send a request for a multidimensional array to a PHP file using AJAX

Printing Multiple Pages Using JavaScript and Cascading Style Sheets

The Node.js server is failing to retrieve information from the AngularJS application

Why isn't the AngularJS injected view resizing to fit the container?

Inserting an item into a list

Issue with converting string to Date object using Safari browser

Ensure your TypeScript class includes functionality to throw an error if the constructor parameter is passed as undefined

What is the process for transforming a method into a computed property?

Unable to play GSM extension files on a web browser due to compatibility issues

Encountered a TypeError in React 16.7: The function (0, _react.useState) is not recognized

NumericError on /post_create/ unrecognizable numeric value: 'manish'