Unable to import netlify environment variable in assets/js/custom.js

support
1

I am using this hugo theme flowbite-admin-dashboard. It uses webpack as well. This is how it builds the website:

"build": "NODE_ENV=production && run-s build:webpack build:hugo && rm /opt/build/repo/**/*.map",
"build:hugo": "hugo --destination=./public",
"build:webpack": "webpack --mode=production",
"build:styles": "npx tailwindcss -i ./src/style.css -o ./dist/css/flowbite.css",

My site is hosted on netlify. There I use npm run build in production.

I want to access environment variables (stored in netlify) in asset/js/custom.js file.

I tried adding this to layouts/_default/baseof.html file

  {{ $env := dict "encrypt" (getenv "HUGO_PARAMS_ENCRYPTION_KEY_HEX") }}
  {{ $js := resources.GetMatch "js/custom.js" | js.Build (dict "params" $env) }}
  <script async src="{{ $js.RelPermalink }}"></script>

in asset/js/custom.js file when i do

import params from "@params"

I get this error

custom.js:2 Uncaught Error: Cannot find module '@params'
    at webpackMissingModule (custom.js:2:50)
    at eval (custom.js:2:132)
    at ./assets/js/custom.js (app.bundle.js:19:1)
    at __webpack_require__ (bootstrap:19:1)
    at eval (index.js:11:78)
    at ./src/index.js (app.bundle.js:169:1)
    at __webpack_require__ (bootstrap:19:1)

I am new to hugo, how should i go about using env variables in .js file.

2

I have two changes in my own scripts (that work in regards to the @params):

{{- $script := resources.Get . -}}
{{- $script = $script | js.Build $buildOptions -}}

It’s a Get for me, not GetMatch.

Then in my JS file I have this:

import * as params from '@params';

// later on...
const WLAPI = params.apiurl;

This works for me. No encryption in my options though… Maybe something is amiss there?

PS: What is webpack doing? Webpack does not have access to dynamic things within your GoHugo layout files. No @params for webpack!

2 Likes
3

Here’s a simple example you can test locally:

git clone --single-branch -b hugo-forum-topic-50227 https://github.com/jmooring/hugo-testing hugo-forum-topic-50227
cd hugo-forum-topic-50227
HUGO_PARAMS_ENCRYPTION_KEY_HEX=foo hugo server

Then visit the site and open your browser’s dev tools console to inspect the output from console.log.

I created a test site on Netlify using this repository. Works great.

So… js.Build is properly reading the environment variable from the netlify.toml file.

4

Note that I just updated the baseURL; the prior value was incorrect.

5

Thanks @jmooring !

Yes @params work if I use hugo to build the site.

But the hugo theme that I am using, has webpack as well. So, the build command that they are using is:

"build": "NODE_ENV=production && run-s build:webpack build:hugo && rm /opt/build/repo/**/*.map",
"build:hugo": "hugo --destination=./public",
"build:webpack": "webpack --mode=production",
"build:styles": "npx tailwindcss -i ./src/style.css -o ./dist/css/flowbite.css",

So, when I change the build command to - npm run build, it throws node module @params not found. (As I shared earlier)

Please check this github site for reference.
test-hugo-params

I edited the baseof.html , netlify.toml & assets/js/custom.js file and added the code you shared above.

6

Thanks @davidsneighbour
I tried your code, but I am still getting the same error.
Webpack is being used by the hugo theme I am using.

7

The title of this topic is, “Unable to import netlify environment variable in assets/js/custom.js.”

The point of my example was to demonstrate how to do that.

With respect to webpack, that’s somebody else’s problem. Perhaps the theme author can help you.