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 — Felix Kling
– Felix Kling, Commented Dec 11, 2018 at 19:28
<script src="{{ url('js/TableWithFunction.js') }}" type="module"></script> — connexo
– connexo, Commented Dec 11, 2018 at 19:40

connexo · Accepted Answer · 2018-12-11 19:42:10Z

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, 2018 at 19:42

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JNight Over a year ago

Thanks connexo, i resolve the first error, but still have Uncaught ReferenceError: TableWithFunction is not defined. I tried to do <script> $(document).ready(function() { roleTable = new TableWithFunction('role',[2, 4]); userTable = new TableWithFunction('user',[3]); }); </script> but still doesn'y work

connexo Over a year ago

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.

Collectives™ on Stack Overflow

Issue with importing class in Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related