Importing js libs in files outside of main app.js

Phoenix Forum Questions / Help
,
2

You need to add custom.js as an entry point so webpack can do its thing on it (so you can use import Bulma from '@vizuaalog/bulmajs'; inside it).

So this is correct:

  entry: {
    app: './js/app.js',
    custom: '/js/custom.js'
  },

but the part where you use it:

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

needs to be changed to point to webpack’s output (instead of the source file)

If it is webpack in dev server mode, then it would be something like http://localhost:8080/custom.js
For published for production it would also need to point to something different rather than the source file, depending on webpack settings.

You could maybe view the source of the file that uses the app.js script to see what the url should look like.

At this point I would recommend maybe setting entry part to:

  entry: {
    app: './js/app.js',
    mytest: '/js/custom.js'
  },

ie. make it a different name rather than custom so you don’t get confused between source and output url.

Then it might be used with:

<script type="text/javascript" src="http://localhost:8080/mytest.js">

(This is just a guess cause it depends on webpack config.)

4 Likes