CODEWITHSUNDEEP
javascriptimportmoduleexport
Bryan Green
Bryan Green

Reputation: 521

Javascript Module Import and Export not Working (Importing binding name is not found.)

I've scoured SO and the Web for answers, but have found nothing so far that has helped. When navigating to my test site (see below), I'm getting this error: Importing binding name 'Person' is not found.

From index.html:

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

From script.js:

import {Person} from '/js/person.js';

From person.js:

export class Person {
  constructor(
    firstName, lastName, email
  ){
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
  }

  setFirstName(firstName){
    this.firstName = firstName;
  }

  setLastName(lastName){
    this.lastName = lastName;
  }

  setEmail(email){
    this.email = email;
  }

}

All the documentation I've found appears to indicate that I'm doing this correctly, and yet I get the error. Any ideas, anyone?

UPDATE Everything works fine under Windows, but not using MacOS 12 in Safari, Firefox, or Chrome. Why?

Upvotes: 1

Views: 4690

Answers (2)

Chris F Carroll
Chris F Carroll

Reputation: 12380

A cause of this error message (though not in OP's case) is, when importing from a module with a default export, using

import {defaultName, otherName} from ...

instead of

import defaultName, {otherName} form ...

Upvotes: 1

Bryan Green
Bryan Green

Reputation: 521

Issue resolved; I was using the 'Live Server' plugin in VS Code on MacOS to serve the site which apparently caused the problem (although under Windows, it works just fine). When serving it with Apache on MacOS, it works.

Upvotes: 1

Related Questions