JavaScript import {func1, func2, func3} from functions.js causing "Unxepected token '{'

Question

I have a small web app and I have now decided to tidy it up a bit and separate out the functions into a functions.js file.

I'm exporting these and importing these in the main.js file however I'm getting the error "Uncaught SyntaxError: Unexpected token '{'.

I'm defining it in the index.html

<head>
  <script type = "module" src="functions.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type = "module" src="scripts.js"></script>
</body>

functions.js

export function hello() {
        return "Hello";
    }
export function hello2() {
        return "Hello";
    }

Main.js

import { hello, hello2 } from 'functions.js';

However when I run this using "Static-Server" I'm getting the error mentioned above. I'm not sure why this is happening as the code look ok?

@RandyCasburn - I neglected to show but I have `
` Question updated with relevant info — Daniel, Nov 04 '20 at 14:32
Here is what it should look like: http://plnkr.co/edit/zxWxmR5dZ7EUrnsN - you only need one script tag that brings in your root module. Then, in your import statement, you'll need an absolute or relative path to `functions.js` - the easiest way to do that is to use `./functions.js` — Randy Casburn, Nov 04 '20 at 14:38
@RandyCasburn - I have done that and still the same issue `Uncaught SyntaxError: Unexpected token '{'` in the Main.js file where I import {hello}. — Daniel, Nov 04 '20 at 14:43
The plunkr works...right? How are you running your project or loading your HTML file? — Randy Casburn, Nov 04 '20 at 14:45
@RandyCasburn- I'm running Static-Server via node.js as there all local files — Daniel, Nov 04 '20 at 14:47
well let's do this - put your content into a plunkr just like I did - then we'll see what's going on. — Randy Casburn, Nov 04 '20 at 14:49
Are you using any kind of bundler or code parsing tools like Webpack or Grunt or Gulp on your web site before you launch it with "static-server" ? — Randy Casburn, Nov 04 '20 at 15:04

jsnx · Answer 1 · 2020-11-04T14:53:26.307

0

You are using nodejs. It requires CommonJS Module syntax. That means

export function hello() {
        return "Hello";
    }

becomes

module.exports = function hello() {
        return "Hello";
    }

same with import

Please find more information here, especially the third answer:

https://stackoverflow.com/a/60615051/4912528

edited Nov 04 '20 at 14:53

answered Nov 04 '20 at 14:49

jsnx

11
3

The OP is _not_ using NodeJS to execute the javascript files. He's loading ES6 modules from the `` of an HTML file. – Randy Casburn Nov 04 '20 at 14:52
@RandyCasburn Thats the second problem, yes :D But his described error message comes from an environment that requies CommonJS syntax. (as you see in his last comment, he is indeed using nodejs as a server) – jsnx Nov 04 '20 at 14:55
I edited my comment. The OP is _not_ using NodeJS to execute the javascript files. He's loading ES6 modules from the `` of an HTML file. That file is indeed loaded from an HTTP server that is run using NodeJS. – Randy Casburn Nov 04 '20 at 14:57
You may very well be correct, we'll need to see what the OP provides in the form of a Plunkr. – Randy Casburn Nov 04 '20 at 14:59
Ping - just FYI so you are aware of OPs self-provided answer. – Randy Casburn Nov 04 '20 at 15:23

score 0 · Answer 2 · answered Nov 04 '20 at 15:13

Instead of exporting like this:

export function hello() {
        return "Hello";
    }
export function hello2() {
        return "Hello";
    }

Change it to :

 function hello() {
            return "Hello";
        }
     function hello2() {
            return "Hello";
        }

export default {hello, hello2}

score 0 · Answer 3 · answered Nov 04 '20 at 15:19

0

I have figured out what was wrong. I was wrapping my code in

$(function(){
import {hello, hello2} from './functions.js'
}

to help with document load race conditions. instead I needed to move the import above this

import {hello, hello2} from './functions.js'
$(function(){

}

answered Nov 04 '20 at 15:19

Daniel

45
6

1

Please consider the next time you ask a question you provide the actual code in your project - _NOT_ the code **you think you need to provide**. That was a 10sec fix if you would have just shared your **_actual_** code! – Randy Casburn Nov 04 '20 at 15:22

JavaScript import {func1, func2, func3} from functions.js causing "Unxepected token '{'

3 Answers3