Import/Export JavaScript

Question

I have the following class in one file

src/ui.js

export default class UI {

    static generateUI(restaurant) {
        const container = document.getElementById('container')

        const addButton = document.createElement('button')
        addButton.setAttribute('type', 'button')
        addButton.innerText = "Add"
        addButton.setAttribute('id', restaurant.id)
        addButton.setAttribute('class', 'addButton')
        addButton.addEventListener("click", function() {
            fetch('http://localhost:3000/add', {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    id: restaurant.id 
                })
            })
            .then(resp => resp.json())
            .then(confirmation => UI.showAddSuccess(confirmation))
        })

        const name = document.createElement('h2')
        name.innerText = restaurant.name

        const ul = document.createElement('ul')
        ul.setAttribute('class', 'dishList')

        restaurant.foods.forEach(food => {
            const dish = document.createElement('li')
            dish.innerText = food.dish 
            const button = document.createElement('button')
            button.setAttribute('id', food.id)
            button.setAttribute('class', 'deleteButton')
            button.setAttribute('type', 'button')
            button.innerText = "Delete"
            button.addEventListener("click", function() {
            fetch('http://localhost:3000/delete', {
                method: "DELETE",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    id: food.id,
                })
            })
            .then(resp => resp.json())
            .then(confirmation => UI.showDeleteSuccess(confirmation))
            })
            dish.append(button)
            ul.append(dish)
        })

        const post = document.createElement('div')
        post.setAttribute('class', 'post')
        post.append(addButton, name, ul)
        container.append(post)
    }

    static showDeleteSuccess(confirmation) {
        const showMessage = document.getElementById('delete-success')
        showMessage.innerText = confirmation.message
        setTimeout(function() {
            window.location.reload(1)
        }, 1500
        )
    }

    static showAddSuccess(confirmation) {
        const showMessage = document.getElementById('add-success')
        showMessage.innerText = confirmation.message
        setTimeout(function() {
            window.location.reload(1)
        }, 800
        )
    }

    static toggleDarkMode() {
        const background = document.getElementById('body')
        const posts = document.querySelectorAll('.post')

       const toggleButton = document.getElementById('toogle-dark-mode')
       toggleButton.className = 'border-4, border-light-blue-500, border-solid'
        
        toggleButton.addEventListener("click", function() {
            background.classList.toggle('darkMode');
            posts.classList.toggle('darkModePosts')
            })
    }

    static consolelog() {
        console.log("hello")
    }
}

I'm trying to import it into another

src/index.js

import UI from './ui.js'

class API {
    constructor() {
        fetch('http://localhost:3000/')
        .then(res => res.json())
        .then(restaurants => {
            restaurants.map(restaurant => {
                UI.generateUI(restaurant)
            })
        })
    }
}

api = new API

UI.toggleDarkMode()

I'm not seeing the result I expect in the browser when I do it this way. Yet it works when they're both in the same file.

The browser is telling me Uncaught SyntaxError: Cannot use import statement outside a module

I tried using the require syntax and that give me the error Uncaught ReferenceError: require is not defined at index.js:1

Answer 1

You need to check with the environment what you are using,

The syntax you are using to export the class is ES6 module syntax. If you are calling this from a nodejs environment it will throw error because nodejs uses commonjs module syntax.

In commonjs module syntax

//for exporting
module.exports = {
   // names of variables, classes, functions goes here
}

//for importing
const UI = require('path/to/your/module')

You also need to make sure that, if the export is a named export or a default export, respectively the importing syntax will change.

Thanks