Getting export declarations may only appear at top level of a module in JavaScript when exporting

Question

No matter where I put the export statement I get the same error

export declarations may only appear at top level of a module

I've tried adding type="module" to the script tag but it didn't help and I'm trying to avoid it.

JS:

export { LogTypes, DateTypes, GetTypes, get, show, hide } from ...;

const LogTypes = {
    Default: "DEFAULT",
    Info: "INFO",
    Warn: "WARN",
    Error: "ERROR"
};

const DateTypes = {
    Current: "CURRENT",
    Log: "LOG",
    Short: "SHORT",
    Long: "LONG"
};

const GetTypes = {
    Name: "NAME",
    Id: "ID",
    Tag: "TAG", 
    Query: "QUERY",
    QueryAll: "QUERYALL"
};

...

`LogTypes`, `DateTypes`, and `GetTypes` are declared in the same module you are using the `export`. Why are you using the `from` keyword as if you are getting them from somewhere else? — M0nst3R, Aug 28 '20 at 08:23
By the way, `export ... from ...;` is equivalent to `import ... from ...; export ...;`, and imports can only appear at the top of a module. — M0nst3R, Aug 28 '20 at 08:25
@GhassenLouhaichi just trying out anything I can. now I'm trying to import as module — SteinTheRuler, Aug 28 '20 at 08:34

score 1 · Answer 1 · answered Aug 28 '20 at 08:43

1

There shouldn't be a <script> tag for a module that is exporting things.

The script that imports those things needs a <script type="module"> tag to load it.

It is the import statement causes the browser to request the URL for the module and load it, not a seperate <script> tag.

answered Aug 28 '20 at 08:43

Quentin

914,110
126
1,211
1,335

1

I've removed all the export statements, since I didn't really need them – SteinTheRuler Aug 28 '20 at 08:52

score 0 · Answer 2 · answered Aug 28 '20 at 08:40

I figured it out when including JavaScript file and allowing the connection on CORS.

JS:

// log types
export const LogTypes = {
    Default: "DEFAULT",
    Info: "INFO",
    Warn: "WARN",
    Error: "ERROR"
};

// date types
export const DateTypes = {
    Current: "CURRENT",
    Log: "LOG",
    Short: "SHORT",
    Long: "LONG"
};

// supported types by the get function
export const GetTypes = {
    Name: "NAME",
    Id: "ID",
    Tag: "TAG", 
    Query: "QUERY",
    QueryAll: "QUERYALL"
};

// gets elements based on type and elm value
export const get = (type, elm) => {
    let result = null;

    switch (upper(type)) {
        case GetTypes.Name:
            result = document.getElementsByName(elm);
            break;

        case GetTypes.Id:
            result = document.getElementById(elm);
            break;

        case GetTypes.Tag:
            result = document.getElementsByTagName(elm);
            break;

        case GetTypes.Query:
            result = document.querySelector(elm).elements;
            break;

        case GetTypes.QueryAll:
            result = document.querySelectorAll(elm);
            break;

        default:
            throw new Error(type + " not supported");
    }

    return result;
};

HTML:

<script src="/SCRIPT/Creator.js"></script>

Getting export declarations may only appear at top level of a module in JavaScript when exporting

2 Answers2