The origin of list data structure

Can't delete OU from AD, IsCriticalSystemObject attribute TRUE - cannot change

Sparring against two opponents test

Game artist computer workstation set-up – is this overkill?

Is there a word that describes the unjustified use of a more complex word?

GitLab account hacked and repo wiped

How did the Apollo guidance computer handle parity bit errors?

MX records from second domain to point to first domain but email is not delivered like on first domain

As a GM, is it bad form to ask for a moment to think when improvising?

How to display number in triangular pattern with plus sign

Where did Lovecraft write about Carcosa?

Krull dimension of the ring of global sections

It isn’t that you must stop now

Drawing an hexagonal cone in TikZ 2D

Gerrymandering Puzzle - Rig the Election

Looking for sci-fi book based on Hinduism/Buddhism

What Kind of Wooden Beam is this

Is throwing dice a stochastic or a deterministic process?

My first C++ game (snake console game)

Why didn't this character get a funeral at the end of Avengers: Endgame?

What do you call a painting on a wall?

weird pluperfect subjunctive in Eutropius

Is Iron Man stronger than the Hulk?

Where to draw the line between quantum mechanics theory and its interpretation(s)?

Can't figure out how to import modules in browser with javascript

How to validate an email address in JavaScript?How do JavaScript closures work?How do I remove a property from a JavaScript object?How do you get a timestamp in JavaScript?How do I check if an array includes an object in JavaScript?How do I copy to the clipboard in JavaScript?How do I include a JavaScript file in another JavaScript file?How to replace all occurrences of a string in JavaScriptHow to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

This is a simple problem. I'm attempting to import modules from one javascript file to another, and then run it on Chrome. I'm using 2 javascript files and an html file, all in the same folder:

first js file (testfile1.js):

import test from 'testfile2.js';

test.func();

second js file (testfile2.js):

let f = function() 
 console.log("TEST");


let test = 
 func: f
;

export test;

The html file is plain, empty html file with a link to testfile1.js script in the header:

<script type="text/javascript" src="testfile1.js"></script>

Whenever I open the html file in chrome, I get the error:

testfile1.js:1 Uncaught SyntaxError: Unexpected token {

When I removed the brackets in the import statement, I get an unexpected identifier statement. Isn't this the proper way to import modules in the browser? Why is it not working at all?

javascript module es6-modules

share|improve this question

asked Mar 23 at 3:06

16jacobj16jacobj

386

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  type="module" as per documentation - or you can use function-like dynamic import() - again as per that documentation
  
  – Jaromanda X
  Mar 23 at 3:09
  
  

  
  
  
  

add a comment | 

0

This is a simple problem. I'm attempting to import modules from one javascript file to another, and then run it on Chrome. I'm using 2 javascript files and an html file, all in the same folder:

first js file (testfile1.js):

import test from 'testfile2.js';

test.func();

second js file (testfile2.js):

let f = function() 
 console.log("TEST");


let test = 
 func: f
;

export test;

The html file is plain, empty html file with a link to testfile1.js script in the header:

<script type="text/javascript" src="testfile1.js"></script>

Whenever I open the html file in chrome, I get the error:

testfile1.js:1 Uncaught SyntaxError: Unexpected token {

When I removed the brackets in the import statement, I get an unexpected identifier statement. Isn't this the proper way to import modules in the browser? Why is it not working at all?

javascript module es6-modules

share|improve this question

asked Mar 23 at 3:06

16jacobj16jacobj

386

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  type="module" as per documentation - or you can use function-like dynamic import() - again as per that documentation
  
  – Jaromanda X
  Mar 23 at 3:09
  
  

  
  
  
  

add a comment | 

This is a simple problem. I'm attempting to import modules from one javascript file to another, and then run it on Chrome. I'm using 2 javascript files and an html file, all in the same folder:

first js file (testfile1.js):

import test from 'testfile2.js';

test.func();

second js file (testfile2.js):

let f = function() 
 console.log("TEST");


let test = 
 func: f
;

export test;

The html file is plain, empty html file with a link to testfile1.js script in the header:

<script type="text/javascript" src="testfile1.js"></script>

Whenever I open the html file in chrome, I get the error:

testfile1.js:1 Uncaught SyntaxError: Unexpected token {

When I removed the brackets in the import statement, I get an unexpected identifier statement. Isn't this the proper way to import modules in the browser? Why is it not working at all?

javascript module es6-modules

share|improve this question

asked Mar 23 at 3:06

16jacobj16jacobj

386

import test from 'testfile2.js';

test.func();

let f = function() 
 console.log("TEST");


let test = 
 func: f
;

export test;

<script type="text/javascript" src="testfile1.js"></script>

testfile1.js:1 Uncaught SyntaxError: Unexpected token {

share|improve this question

asked Mar 23 at 3:06

16jacobj16jacobj

386

share|improve this question

asked Mar 23 at 3:06

16jacobj16jacobj

386

asked Mar 23 at 3:06

16jacobj16jacobj

386

asked Mar 23 at 3:06

16jacobj16jacobj

386

1 Answer
1

active

oldest

votes

1

Modules require type="module" not "text/javascript"

As per Jaromanda X's comment, you need to change the value of the type attribute of the <script> tag to "module" as import test from 'testfile2.js' is module code.

<script type="module" src="testfile1.js" />

What about dynamic import()

If you really don't feel like using type="module", any javascript file is allowed to use the dynamic import() syntax, even without type="module".

However, the dynamic import has a caveat, the function import() returns a promise, therefore, you are unable to use it synchronously. You must either await or .then a dynamic import to use the value it resolves to.

import('testfile2.js').then(( test ) => 
 // your code
);

share|improve this answer

answered Mar 23 at 3:37

ChrisBrownie55ChrisBrownie55

2,0071823

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55310227%2fcant-figure-out-how-to-import-modules-in-browser-with-javascript%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Modules require type="module" not "text/javascript"

As per Jaromanda X's comment, you need to change the value of the type attribute of the <script> tag to "module" as import test from 'testfile2.js' is module code.

<script type="module" src="testfile1.js" />

What about dynamic import()

If you really don't feel like using type="module", any javascript file is allowed to use the dynamic import() syntax, even without type="module".

However, the dynamic import has a caveat, the function import() returns a promise, therefore, you are unable to use it synchronously. You must either await or .then a dynamic import to use the value it resolves to.

import('testfile2.js').then(( test ) => 
 // your code
);

share|improve this answer

answered Mar 23 at 3:37

ChrisBrownie55ChrisBrownie55

2,0071823

add a comment | 

1

Modules require type="module" not "text/javascript"

As per Jaromanda X's comment, you need to change the value of the type attribute of the <script> tag to "module" as import test from 'testfile2.js' is module code.

<script type="module" src="testfile1.js" />

What about dynamic import()

If you really don't feel like using type="module", any javascript file is allowed to use the dynamic import() syntax, even without type="module".

However, the dynamic import has a caveat, the function import() returns a promise, therefore, you are unable to use it synchronously. You must either await or .then a dynamic import to use the value it resolves to.

import('testfile2.js').then(( test ) => 
 // your code
);

share|improve this answer

answered Mar 23 at 3:37

ChrisBrownie55ChrisBrownie55

2,0071823

add a comment | 

Modules require type="module" not "text/javascript"

As per Jaromanda X's comment, you need to change the value of the type attribute of the <script> tag to "module" as import test from 'testfile2.js' is module code.

<script type="module" src="testfile1.js" />

What about dynamic import()

If you really don't feel like using type="module", any javascript file is allowed to use the dynamic import() syntax, even without type="module".

However, the dynamic import has a caveat, the function import() returns a promise, therefore, you are unable to use it synchronously. You must either await or .then a dynamic import to use the value it resolves to.

import('testfile2.js').then(( test ) => 
 // your code
);

share|improve this answer

answered Mar 23 at 3:37

ChrisBrownie55ChrisBrownie55

2,0071823

<script type="module" src="testfile1.js" />

import('testfile2.js').then(( test ) => 
 // your code
);

share|improve this answer

answered Mar 23 at 3:37

ChrisBrownie55ChrisBrownie55

2,0071823

answered Mar 23 at 3:37

ChrisBrownie55ChrisBrownie55

2,0071823

answered Mar 23 at 3:37

ChrisBrownie55ChrisBrownie55

2,0071823