Import/export implementation using Handlebars and Node.js/Express

Question

I am trying to implement import/export using handlebars with nodejs/express. For some reason it gives me the following error Uncaught SyntaxError: Unexpected token {

File - api.js

import { getSymbolDb, executeEnterKey } from './fetchData'

const symbolTags = document.querySelector('#symbolTags')
const requestSymbol = document.querySelector('#requestSymbol')
requestSymbol.addEventListener('click', getSymbolDb)
symbolTags.addEventListener("keyup", executeEnterKey)
document.addEventListener('DOMContentLoaded', getSymbolDb)

File - fetchData.js

export function getSymbolDb() {}
export function executeEnterKey(event) {}

HTML File

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>

<body>

  {{{body}}}

  <script src="/JS/api.js"></script>
  <script src="/JS/fetchData.js"></script>

</body>

</html>

Browsers don't support import / export, you first have to build your code with tools like webpack or rollup before using these features. — dotconnor, Nov 20 '18 at 18:59
Browsers only permit [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and `export` to be used [with ` — Jonathan Lonowski, Nov 20 '18 at 19:00

score 0 · Answer 1 · answered Nov 20 '18 at 19:56

Solution

Here you will find more information on the subject. The following code is the basic example you can start with.

File - api.mjs

import { getSymbolDb, executeEnterKey } from './fetchData.mjs'

const symbolTags = document.querySelector('#symbolTags')
const requestSymbol = document.querySelector('#requestSymbol')
requestSymbol.addEventListener('click', getSymbolDb)
symbolTags.addEventListener("keyup", executeEnterKey)
document.addEventListener('DOMContentLoaded', getSymbolDb)

File - fetchData.mjs

export function getSymbolDb() {}
export function executeEnterKey(event) {}

HTML File

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>

  {{{body}}}


  <script type="module" src="/JS/api.mjs"></script>
  <script nomodule src="fallback.js"></script>


</body>

</html>

Import/export implementation using Handlebars and Node.js/Express

1 Answers1

Solution