当我从 another.js 文件导入某些内容时，Function 无法正常工作

Question

I have a two.js files, one is the main one and the other is used to write and export the functions. My problem is: when I import a function from funciones.js to index.js my main function stops working.

This is the code:

Index.js:

import { currentWeather } from './funciones.js';


function findWeather() { //this function stops working

        //Defining the APIs for both current weather and forecast
        let location1 = document.getElementById('Search').value;
        console.log(location1);
        //...

Funciones.js:

export function currentWeather(wName) { //the function I am exporting
    switch (wName) { //Switch conditions to display the correct status and imges
        case "Thunderstorm":
        //...

I've got to the conclusion that I'm doing something wrong at exporting, because the main function ( findWeather ) only stops working by the time I import something. I've tried to write everything in the same file and it works, but the idea is to have separated files.

I've tried to export the function at the end of the file as well, and it still doesn't work.

Answer 1

All files that are involved must have .mjs extension.

Answer 2

Be careful in choosing the name of the functions. Both must have the same name. For example functions.js.If you can, write the complete code to check it.

Answer 3

I've figured it out.

The solution I found is: export the main function ( findWeather() ) and then call it, or in another .js file, or in a <script> tag in the HTML.

So it would look like:

funciones.js:

export function currentWeather(wName) { //the function I am exporting
    switch (wName) { //Switch conditions to display the correct status and imges
        case "Thunderstorm":
        //...

index.js:

import { currentWeather } from './funciones.js';


 export function findWeather() {

        //Defining the APIs for both current weather and forecast
        let location1 = document.getElementById('Search').value;
        console.log(location1);
        //...

Index.html:

<script type="module">
   import { findWeather } from './index.js';
   findWeather();
</script>