Error in js when using static_path

Zesky665 · October 5, 2018, 3:52pm

Hi,

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

peerreynders · October 5, 2018, 4:08pm

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

github.com

kokolegorille/app/blob/master/WEBPACK4.md

# Adding webpack 4.0.x

March 2018.

As I choosed not to install brunch, I will add webpack 4 as a replacement. I am using yarn, but this can be done with npm as well. This is not a guide on using Webpack 4, just a simple way to add Webpack to a Phoenix umbrella application.

References:

* [Notes on attempt to upgrade to webpack 4](https://gist.github.com/gricard/e8057f7de1029f9036a990af95c62ba8)
* [Code splitted css bundle examples](https://github.com/webpack/webpack/blob/master/examples/code-splitted-css-bundle/README.md)

Additional packages, needed for configuration.

* [webpack-cli](https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0)
* [extract-text-webpack-plugin@next](https://github.com/webpack-contrib/extract-text-webpack-plugin/tree/next)

The following steps are defined from the root of the project.

## 1. Initialize assets and package.json

This file has been truncated. show original

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.