Import string from javascript file (react/nextJS)

Question

I have a file "test.js" in my "/constants" folder with the following content:

const test = "test!"

export default test

My page in the "/pages" folder should read the string from "test.js" and print it

import { test } from "../constants/test"

export default function Home() {
    console.log("imported string: " + test)
}

If I run it the browser I get the following output:

"imported string: undefined"

Why is it not reading the string from the file? The path is correct. VSCode autocomplete even finds the file while typing.

score 3 · Accepted Answer · answered Nov 17 '22 at 08:39

3

You are exporting the constant test as the default export, therefor your import statement should be changed from

import { test } from "../constants/test"

to

import test from "../constants/test"

NOTE: the {} imports are for NON-default exports

answered Nov 17 '22 at 08:39

ThomasSquall

644
6
21

score 1 · Answer 2 · answered Nov 17 '22 at 08:42

1

If you want to use import { test } then you should use export test instead of using default
Because right now you're telling javascript to find specific export, not default.

answered Nov 17 '22 at 08:42

owenizedd

1,187
8
17

thanks, this works as well. But I think the syntax is "export { test }" – jan Nov 17 '22 at 09:21
both the same `export {test}` and inline version `export test = "mytest";` – owenizedd Nov 17 '22 at 09:34

Import string from javascript file (react/nextJS)

2 Answers2