How to import a file using ES6 modules, and read its content as a string?

Question

In my standard React app, I need to achieve the following: import a file that sits within my src folder, in order to simply read its content as a string. For example, let's say I have the following code in a file:

alert('hey')

then in some other file, I would like to do something like this, in pseudo code:

import * as string from './someFile.js'

console.log(string)

The output of the console.log should be the JS code, as a string:

alert('hey')

If I could place the file within my public folder, I'd be able to perform an http request and read it as I wish. But the problem is of course, that the file is part of the build process(inside the src folder)

Can this be done?

If this is only part of build you can just use the node fs module...[Read a file in Node.js](https://stackoverflow.com/questions/18386361/read-a-file-in-node-js) — pilchard, Dec 15 '21 at 09:13
@pilchard Maybe I misspoke. What i mean, is that the file is part of the puzzle that webpack assembles from the files. The fs module isn't available during runtime, and this is when I need to read the file. — i.brod, Dec 15 '21 at 12:23

happyZZR1400 · Answer 1 · 2021-12-15T15:45:47.343

1

i can think about:

define constants.js file with following code:
```
export default "alert('vasia')";
```

import this file from some react file:

import vasia from "./constants";

const App = () => {
  console.log(eval(vasia));
}

is that what you r searching for?

But, must warn you: "eval" is evil!

edited Dec 15 '21 at 15:45

answered Dec 15 '21 at 15:30

happyZZR1400

2,387
3
25
43

adanski · Answer 2 · 2022-12-22T19:25:18.930

I wanted to do the very same thing but unfortunately found out it is not possible in pure JS as at 2022.

There's a stage 3 TC39 proposal for Import Assertions which is available in Chromium-based browsers but only allows to import JSON files so it certainly would not help in this particular case.

I believe your best bet for now is to use Fetch API to get the content of your file asynchronously.

async function getSampleText() {
    const response = await fetch('someFile.js');
    console.log(
        await response.text()
    );
}

How to import a file using ES6 modules, and read its content as a string?

2 Answers2