Cannot include javacsript

Question

I feel this is something very basic, but I can't find the correct info. I'm including a javascript file in my html:

<script src="/js/client_db.js" type="text/javascript"></script>

In client_db.js I'm trying to include a class:

import { Socket } from './phoenix';

let socket = new Socket("/socket", { params: { userToken: "123" } })
socket.connect()
let db_channel = socket.channel("ledgers", {})

db_channel.join()
    .receive("ok", resp => {
        console.log("Joined successfully", resp)
        clientDb(db_channel)
    })
    .receive("error", resp => { console.log("Unable to join", resp) })
    .receive("timeout", () => console.log("Networking issue. Still waiting..."))
...

And in phoenix.js I have the class:

export class Socket {
...

However, in the browser console I get the error:

Uncaught SyntaxError: Cannot use import statement outside a module

Apparently, the correct way to solve this is to convert client_db.js to a module, but it is not at all clear how this is best done.

score 1 · Accepted Answer · answered Jun 22 '21 at 19:44

1

You need to load the script as a module:

<script src="/js/client_db.js" type="module" ></script>

https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html

answered Jun 22 '21 at 19:44

Sebastian Speitel

7,166
2
19
38

Returns error: Uncaught SyntaxError: The requested module './phoenix.js' does not provide an export named 'default' – Lars Melander Jun 22 '21 at 20:01
Does it provide an export named 'export'? – Sebastian Speitel Jun 22 '21 at 20:03
OK, it works suddenly. Seems I had a file that didn't update correctly. – Lars Melander Jun 22 '21 at 20:11

score 0 · Answer 2 · answered Jun 22 '21 at 19:45

0

add type="module" to the script tag might solve this for you?

answered Jun 22 '21 at 19:45

richardsefton

352
2
7

Cannot include javacsript

2 Answers2