Question

28

Import a module from string variable

rated 0 times [ 31] [ 3] / answers: 1 / hits: 18643 / 5 Years ago, sat, july 20, 2019, 12:00:00

I need to import a JavaScript module from an in memory variable.
I know that this can be done using SystemJS and Webpack.

But nowhere can I find a good working example nor documentation for the same. The documentations mostly talks of dynamic import of .js files.

Basically I need to import the module like below

let moduleData = export function doSomething(string) { return string + '-done'; };

//Need code to import that moduleData into memory

If anyone can point to documentation that will be great

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

draven

Add To Favorites

Follow

Total Points: 641

Total Questions: 101

Total Answers: 110

Location: Nicaragua

Member since Mon, Sep 26, 2022

2 Years ago

draven questions

1 HTML to PDF convert in react js using jsPDF not working

Tue, Apr 12, 22, 00:00, 2 Years ago

1 How to properly install a Pinia Store?

Thu, Feb 17, 22, 00:00, 2 Years ago

1 Format currency input field with dollar sign & commas

Tue, Nov 30, 21, 00:00, 3 Years ago

1 Material-UI datepicker invalid date format issue

Tue, Oct 19, 21, 00:00, 3 Years ago

1 how to show a floating action button always in bottom of screen

Tue, Jan 12, 21, 00:00, 3 Years ago

View All

answered 5 Years ago byrondonavanc · Accepted Answer

There are limitations in the import syntax that make it difficult to do if not impossible without using external libraries.

The closest I could get is by using the Dynamic Import syntax. Two examples follow: the first one is the original I wrote while the second one is an edit from a user that wanted to modernize it.

The original one:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<script>

    var moduleData = "export function hello() { alert('hello'); };";

    var b64moduleData = "data:text/javascript;base64," + btoa(moduleData);

    

</script>

<script type="module">



    async function doimport() {

      const module = await import(b64moduleData);

      module.hello();

    }

    

    doimport();



</script>



</body>

</html>

The modernized one:

function doimport (str) {

  if (globalThis.URL.createObjectURL) {

    const blob = new Blob([str], { type: 'text/javascript' })

    const url = URL.createObjectURL(blob)

    const module = import(url)

    URL.revokeObjectURL(url) // GC objectURLs

    return module

  }

  

  const url = "data:text/javascript;base64," + btoa(moduleData)

  return import(url)

}



var moduleData = "export function hello() { console.log('hello') }"

var blob = new Blob(["export function hello() { console.log('world') }"])



doimport(moduleData).then(mod => mod.hello())



// Works with ArrayBuffers, TypedArrays, DataViews, Blob/Files 

// and strings too, that If URL.createObjectURL is supported.

doimport(blob).then(mod => mod.hello())

You will however notice that this has some limitations on the way the import code is constructed, which may not precisely match what you need.
The simplest solution is probably to send the code of the module on the server for it to generate a temporary script to be then imported using a more conventional syntax.