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
– dotconnor, Commented Nov 20, 2018 at 18:59
Browsers only permit import and export to be used with <script type="module">. (note: browser support) — Jonathan Lonowski
– Jonathan Lonowski, Commented Nov 20, 2018 at 19:00

John John · Accepted Answer · 2018-11-20 19:56:41Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Solution

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

Comments

Linked

Related