Uncaught ReferenceError: "function" is not defined ES6 Modules

Question

I'm trying to use ES6 modules but html doesn't seem to recognize my event.


export function weatherCardCreator() {
    const cardContainer = document.querySelector('.card-container');
    const localStorageCities = dbManipulator.readData('Cities');
    let weatherCards = localStorageCities && localStorageCities.map(
        (weatherCard, weatherIndex) => `
            <div class="card" onclick="renderWeatherOnOneCityOnClick(${weatherIndex})">
                <div class="card-halfwayup">
                    <div class="flex-left">

export function renderWeatherOnOneCityOnClick(weatherItemKey)

Try creating the function first and then exporting it at the end — Ayrton, Oct 16 '19 at 13:25
Possible duplicate of [ES6 module "Uncaught ReferenceError: function is not defined at HTMLButtonElement.onclick"](https://stackoverflow.com/questions/48535822/es6-module-uncaught-referenceerror-function-is-not-defined-at-htmlbuttonelemen) — mbojko, Oct 16 '19 at 14:05

score -1 · Answer 1 · edited May 20 '20 at 14:59

-1

You didn't provide your import statement, but with a single import you need to

import thingYouAreImporting from 'path-to-js-file-with-export';

in order to access it from another file. For importing from a file with multiple exports,

import { thing1, thing2 } from 'path-to-js-file-with-exports';

edited May 20 '20 at 14:59

chevybow

9,959
6
24
39

answered Oct 16 '19 at 13:59

JDunken

465
2
7

Uncaught ReferenceError: "function" is not defined ES6 Modules

1 Answers1