Trying to figure out the correct way of using import *

JavaScript
#1

Hello all :slight_smile:

I’m having some issues with following the YT tutorial, there’s a section on using a variation of the import function, where my browser keeps coming up with an uncaught reference error

this is my code:

<script type="module">
 
 // using * to import everything from a file 
 
 // you can import everything froma file if its tedious for individual imports 
 
 // importing from test file
 import * as test from "./string_function.js";
 
 // testing import worked successfully 
 const cap = capitalizeString2("Hello");

 
</script>

it brings up the following error

Blockquote
Uncaught ReferenceError: capitalizeString2 is not defined at at JS-T-001-FCCYT.html:1900
Blockquote

Any ideas on why this would be happening? I use brackets as a code editor, and the functions seem to be called up on its assistive coding features (you know, the auto-complete thing, not sure what it’s formally called), so clearly IT is picking up the import, but the browser doesn’t seem to agree (chrome browser)

Any advice appreciated! Thanks!

#2

As an aside, default export and named export work fine, its when I try to export an entire file that problems occur.

#3

Can I see the contents of string_function.js?

1 Like
#4

Haha, just after I out my other answer.

So what this expects is a set of things exported in one file

export function1 () { ........

export function2 () { ........

export function3 () { ........

Then you’re using * to import every one at once. But when you do that it’s as if you’re importing an object, like:

{
  function1,
  function2,
  function3
}

So you need to give that a name, which is test.

import * as test .........

That bit is fine. And as regards the name, it’s the same as any object: if the object wasn’t assigned to some variable name, you wouldn’t be able to use it. So what you’re writing is effectively like:

const test = {
  function1,
  function2,
  function3
};

In your case, like:

const test = {
  capitaliseString2,
  // + whatever other functions get exported
};

So given that’s the case, can you see why capitaliseString2 isn’t a function, isn’t even defined?

2 Likes
#5

I know XD apologies for all the badgering! Your help is super appreciated!

It all makes sense now! so the command should be

const cap = test.capitaliseString2("Hello");

because it technically only exists inside of the object as a key/attribute?

Thanks again for your help, Dan!

D.W.

#6

Hi Darren,

the code inside of the string_function.js is below:

// this file contains functions that capitalises strings

export const capitalizeString = str => str.toUpperCase();

 // function set up, this function capitalises the first character 
 const capitalizeString2 = (string) => {
  return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
 // setting the export of the above function 
 export { capitalizeString2 };
 
 // now we look at exporting variables 
 export const foo = "bar";
 export const bar = "foo";
#7

Yep, and if you’ve looked at destructuring, then this is very similar:

import { capitaliseString, capitaliseString2 } from "string_function.js"

Is like

const { capitaliseString, capitaliseString2 } = theStringFunctionsObject

And

import * as test from "./string_function.js"

Is like

const test = {
  capitaliseString,
  capitaliseString2,
}
1 Like
#8

I see, I mostly follow :smiley:

I have come across destructuring, but it was only relatively briefly touched on in the YT video I started on as a primer, I’m now going to go through the FCC certification course to close more of these gaps in understanding I have :sweat_smile: the more practical examples I can get under my belt the better haha,

Thank you :slight_smile:

D.W.

#9