Trying to figure out the correct way of using import *

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!

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

Can I see the contents of string_function.js?

1 Like

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

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.

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";

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

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.