FAQ: Intermediate JavaScript Modules - Export Named Exports


#1

This community-built FAQ covers the “Export Named Exports” exercise from the lesson “Intermediate JavaScript Modules”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction To JavaScript

FAQs on the exercise Export Named Exports

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

I have been unable to make named export/import work outside of the Codecademy environment. I am using Safari 12 and Chrome 71 on MacOs with similar results - these browsers should work. The console message has not been helpful: SyntaxError: Unexpected token '{'. import call expects exactly one argument. (only Safari adds this detail about expecting exactly one argument)

This is one of my attempts:

<!DOCTYPE html>
<html>

<head>
  <title>Module Test</title>
  <script type="text/javascript" defer src="sandbox.js"></script>
</head>

<body>
  <p id='textElement'>unchanged</p>
</body>

</htmL>

sandbox.js:

import {changeText} from '/sandbox_module.js';

const textElement = document.getElementById('textElement');

changeText(textElement);

sandbox_module.js:

export const changeText = function(elem) {
  elem.textContent = 'changed';
}

What am I missing here?


#3

Hi @markmacleod988810228 is it maybe because the import should be from

'./sandbox_module.js'

and not

/sandbox_module.js'

#4

Thanks, @textninja83556 for paying attention to the details. I checked back on this code and I presently I have the form

'./sandbox_module.js'

It’s been weeks since I touched this, and I think I was trying any syntax variation to get it to work. I have learned a few things since I made this post. First, script type needs to be "module" not "text/javascript". And second, the main script file needs a header to allow it to talk to other JS files:

Header Set Access-Control-Allow-Origin: *

To be clear, the wildcard is not a robust use of the header - I just wanted to play with modules outside of Codecademy. None of this was covered in the Codecademy lesson because it didn’t cover using modules with an actual website. Unfortunately, despite making these changes, I still cannot make modules work on my machine. I found one forum that said modules don’t work on locally sourced files due to some security vulnerability (or something - sorry I don’t have a link). After reading that, I gave up, hoping this will be covered later (I’m not optimistic though).

Have you been able to get modules to work outside of Codecademy?