shrx
June 9, 2024, 12:54pm
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.
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
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.
Note that I just updated the baseURL; the prior value was incorrect.
shrx
June 10, 2024, 5:42am
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.
shrx
June 10, 2024, 5:44am
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.
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.