Issue with importing class in Javascript

Question

I want to use inheritance between classes that are in separate .js (but same folder), but i have this errors

Uncaught SyntaxError: Unexpected identifier

Uncaught ReferenceError: TableWithFunction is not defined

Here goes my code:

// Table.js

export default class Table {

    constructor(name, h_cols) {
       table_id = name + 'table';
       hidden_cols = h_cols;
       table = setTable();
    }

    setTable() {...};

    setColumnDefs() {...};

{

// TableWithFunction.js

import Table from 'Table';

class TableWithFunction extends Table {

    constructor (name, h_cols) {
        super(name, h_cols);
        selected_id = name + 'Selected';
    }
    //More methods ..
}

//test.blade.php (im using laravel framework)

<script src="{{ url('js/TableWithFunction.js') }}" ></script>
<script>
    roleTable = new TableWithFunction('role',[2, 4]);
    userTable = new TableWithFunction('user',[3]);
</script>

I also tried to do import Table from 'Table.js'; instead of import Table from 'Table';

And i tried changing Table.js using class Table { ... } export default Table instead of export default class Table {...} and it didn't fix it, of course.

Possible duplicate of [ES2015 import doesn't work (even at top-level) in Firefox](https://stackoverflow.com/q/37624819/218196) — Felix Kling, Dec 11 '18 at 19:28

score 1 · Accepted Answer · answered Dec 11 '18 at 19:42

1

To use ES6 modules in a capable browser the importing script needs to be included with type="module".

<script src="{{ url('js/TableWithFunction.js') }}" type="module"></script>

This prevents browsers not ready for modules to load code which would only throw an error.

The opposite is also available:

<script src="only-for-ie.js" nomodule></script>

This script will be ignored by browsers capable of handling ES6 modules.

answered Dec 11 '18 at 19:42

connexo

53,704
14
91
128

Thanks connexo, i resolve the first error, but still have Uncaught ReferenceError: TableWithFunction is not defined. I tried to do but still doesn'y work – JNight Dec 12 '18 at 13:49
Any JS that wants to use `TableWithFunction` will have to `import` it (which also means you'll have to add an `export` in your `TableWithFunction.js`. Modules never create global variables. – connexo Dec 12 '18 at 15:11

Issue with importing class in Javascript

1 Answers1