Error in js when using static_path


I didn’t want to bother setting up brunch so I just copied my js files into the priv/js folder and called them in the html.eex file using <script src='<%= static_path(@conn, "/js/filename.js") %>'></script> .

The thing is that now they throw an error on the import {Socket, Presence} from "phoenix" line.
This is the error I’m getting in the console
Uncaught SyntaxError: Unexpected token {

What is this and how do I fix it?

Thanks in advance :smile:

Browsers don’t understand ES2015 modules (if they have support it works a bit differently) so you need a bundler to transpile the code to something the browser can process.

Have a look at

or possibly this to see if you can get webpack 4 to work in a practice project (first).

For some background on JS bundling have a look at Modern JavaScript Explained For Dinosaurs.

In your journeys you may run into <script type=module></script> like in ECMAScript modules in browsers - don’t get distracted, learn what role bundlers play and how they work - when it comes down to it: resolve as much as possible during compile/build time and don’t put it off to runtime unless absolutely necessary.