Having problem with prod mod Js in Docker phoenix 1.3

Phoenix Forum Questions / Help
,
1

Hello, I was going to move my project to prod mod in Phoenix 1.3, I had no problem with developer mod in docker, but in prod mod there is!!

I went these way step to step:

1. creating container

-> sudo docker run -d  --rm --name elixir  \
-v "/html_app/:/html_app" \
mojtabanaserei/elixir:1.6.4  \
sh -c " \
apk add python make g++  && \
npm install -g brunch yarn && \
sleep 50000
"

2. entering

-> sudo docker exec -it elixir ash
-> cd html_app/html_site_umbrella
-> rm -r _build  deps  apps/html_site_web/assets/node_modules

and I created mix phx.gen.secret in prod mod in step 3:

-> MIX_ENV=prod mix phx.gen.secret
-> vi apps/html_site_web/config/prod.secret.exs
-> mix deps.get --only prod
-> MIX_ENV=prod mix compile

step 4 I moved my asset to prod asset

-> cd apps/html_site_web/assets
-> brunch build --production && cd ..
-> MIX_ENV=prod mix phx.digest

step 5 I started my server again

-> PORT=4000 MIX_ENV=prod mix phx.server

Note: I Introduce my static priv to my Nginx

apps/html_site_web/priv/static

after going that ways , my server is working and my site is online , but I have Js error in my console

SyntaxError: import declarations may only appear at top level of a module
Uncaught SyntaxError: Unexpected string

I have read this article:

and I edited my code

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

To

<script src="<%= static_path(@conn, "/js/app.js") %>" type="module"></script>

and my output is:

<script src="/js/app-c0a3ede01d7f0bd9471ced4a79e56ecd.js?vsn=d" type="module"></script>

but my problem doesn’t work.

By the way, I have some code in my project like this:

<script>
function recaptcha_callback_login_html() {$("#button_login_html").removeAttr("disabled","disabled");}
function recaptcha_expired_login_html() {$("#button_login_html").attr("disabled","disabled");}
</script>

Then those codes have this error:

Uncaught (in promise) null
uncaught exception: null

how can I fix this?

Thanks

1 Like
2

Why would you need type="module"? Your app.js is already bundled by brunch, it’s not ES module anymore, <script src="<%= static_path(@conn, "/js/app.js") %>"></script> should work just fine in every major browsers.

2 Likes
3

Thank you, but it doesn’t work even without it, I should fix main problem that I described, syntax error and …

4

You could inspect your app.js built with brunch to see if there’s still any import code left. I don’t think adding type="module" fixes your problem, the real problem is still somewhere.

1 Like
5

such error I have is like this:

and

I have read this link but it didn’t work

I was trying to fix this but I couldn’t!! how can I do this?

my Nginx:

add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://assets.zendesk.com; font-src 'self' https://themes.googleusercontent.com; frame-src https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'";
6

Looks like your js doesn’t get bundled by brunch at all. You should fix it first.

1 Like