Revisions to Javascript module not working in browser?

adding missing quote

Source Link

edited Aug 28, 2019 at 22:04

366
4
11

On the script tag you are using to load the js in the browser you need to add the attribute

type="module"

It will look like the following:

<script type="module>type="module">
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

utils.mjs:

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

This is if you are not using a bundler like webpack and working directly in the browser.

Source of code: https://jakearchibald.com/2017/es-modules-in-browsers/

On the script tag you are using to load the js in the browser you need to add the attribute

type="module"

It will look like the following:

<script type="module>
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

utils.mjs:

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

This is if you are not using a bundler like webpack and working directly in the browser.

Source of code: https://jakearchibald.com/2017/es-modules-in-browsers/

On the script tag you are using to load the js in the browser you need to add the attribute

type="module"

It will look like the following:

<script type="module">
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

utils.mjs:

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

This is if you are not using a bundler like webpack and working directly in the browser.

Source of code: https://jakearchibald.com/2017/es-modules-in-browsers/

Bounty Ended with 25 reputation awarded by CommunityBot

occurred Dec 20, 2018 at 14:03

Transcribe image to text.

Source Link

edit approved Dec 17, 2018 at 19:53

Bill Mei

737
1
10
22

On the script tag you are using to load the js in the browser you need to add the attribute

type="module"

It will look like the following:

<script type="module>
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

utils.mjs:

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

This is if you are not using a bundler like webpack and working directly in the browser.

sourceSource of imagecode: https://jakearchibald.com/2017/es-modules-in-browsers/

On the script tag you are using to load the js in the browser you need to add the attribute

type="module"

It will look like the following:

This is if you are not using a bundler like webpack and working directly in the browser.

source of image: https://jakearchibald.com/2017/es-modules-in-browsers/

On the script tag you are using to load the js in the browser you need to add the attribute

type="module"

It will look like the following:

<script type="module>
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

utils.mjs:

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

This is if you are not using a bundler like webpack and working directly in the browser.

Source of code: https://jakearchibald.com/2017/es-modules-in-browsers/

Source Link

created Dec 13, 2018 at 21:46

Francisco Garcia

366
4
11

On the script tag you are using to load the js in the browser you need to add the attribute

type="module"

It will look like the following:

This is if you are not using a bundler like webpack and working directly in the browser.

source of image: https://jakearchibald.com/2017/es-modules-in-browsers/

Collectives™ on Stack Overflow

Return to Answer