Import/export modules not working in VSCode

JavaScript
1

OK, so I am doing the lessons on importing and exporting functions in JS ES6. I am trying the techniques demonstrated in the exercises in my VSCode editor. For example, in exercise 25 of ES6 algorithms data structures, we are shown an example where we can import all functions from a module and store them in an object, like so:

import * as myStringFunctions from “./string_functions.js”;
// Only change code above this line

myStringFunctions.uppercaseString(“hello”);
myStringFunctions.lowercaseString(“WORLD!”);

But the terminal keeps throwing an error stating * is an unexpected token. This actually happens with all the exercises relating to this (importing two functions, importing all functions etc)

Any help much appreciated.

// Only change code above this line

stringFunctions.uppercaseString("hello");
stringFunctions.lowercaseString("WORLD!");

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0

Challenge: Use * to Import Everything from a File

Link to the challenge:

2

How are you loading the script? Did you remember to use type=“module” on the script element?

Here is how it might be set up.

main.js

import * as stringFunctions from './string_functions.js';
// Only change code above this line

console.log(stringFunctions.uppercaseString('hello'));
console.log(stringFunctions.lowercaseString('WORLD!'));

string_functions.js

export function uppercaseString(text) {
  return text.toUpperCase();
}

export function lowercaseString(text) {
  return text.toLowerCase();
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <script type="module" src="main.js"></script>
  </body>
</html>
3

I figured out the problem.

Firstly, I had it set up with 2 .js files in VSCode, one containing the functions to be exported and another script to import the functions and use them, as in the challenge.

The reason it was throwing an error when I used the import statement in the script that utilised the functions, was that I was running an older version of node that didn’t support the feature.

I upgraded from version 10 something to version 14 or so and it resolved the issue. (There were other recommendations of using { “type”: “module” } in the package.json file or on certain versions of node, using .mjs instead of .js to resolve the issue.

Cheers

4

The challenges are not about using NodeJS. They are about using native module support in browsers.

NodeJS uses CommonJS modules by default (require and module.exports). It isn’t until recently NodeJS started to support ECMAScript modules (v14.17.0 stabilized modules implementation) and it still isn’t even that commonly used yet.

NodeJS and the browser are not the same things (even if the runtime is the V8 engine). There are plenty of things NodeJS does not support that only work in the browser (e.g. web API stuff).

5

I know the challenges are not about using NodeJS, hence the inclusion of VSCode in the thread title.

Otherwise, good information.

6

Using VS Code has got nothing to do with what type of code you are writing. Just because you are using an editor does not mean you are writing NodeJS code. And again the challenges you are referring to are not about NodeJS so you can’t just take that information and apply it to something completely different.

I’m really not trying to be or sound rude. But good technical communication skills are just as important as good code is for developers.

Anyway, good to hear you got it working. Happy coding!

7

Instead of saying VS Code I actually should have said NodeJS, because I use node in my editor to run the code from terminal.

Cheers

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.