I had the same issue in MacOS with this Hugo Version:
Hugo Static Site Generator v0.70.0/extended darwin/amd64
Error: Error building site: BABEL: failed to transform “js/index.js” (application/javascript): exit status 1
For me the problem has solved when i created the file: babel.config.js. With this code:
module.exports = {
presets: [
[
'@babel/preset-env',
{
modules: false,
targets: {
browsers: [
// Best practice: https://github.com/babel/babel/issues/7789
'>=1%',
'not ie 11',
'not op_mini all'
]
}
}
]
]
};
Now my problem is in the bundle creation. Babel does not create the bundle of all my imports.
I used the budling system provided with Hugo, with this example code:
{{ $index := resources.Get "js/index.js" }}
{{ $components := resources.Get "js/components.js" }}
{{ $foo := resources.Get "js/components/foo-lit.js" }}
{{ $concatjs := slice $index $components $foo | resources.Concat "js/scripts.js" }}
{{ $opts := dict "noComments" true }}
{{- $transpiled := $concatjs | babel $opts -}}
<script src="{{ $transpiled.Permalink }}" type="module"></script>
This takes to me to another problem when using npm dependencies installed in node_modules. I was unable to load that dependencies because i am using the npm package name and not a relative route of the dependency.
For example, I am importing “lit-element” by his name:
import { LitElement, html, css } from ‘lit-element’;
Normally I use Webpack to make the bundle creation, which solves the named import dependencies. But now i trying to not use webpack with Hugo, because i think the Hugo pipes should solve the same problems.
Finally I solved the problem using Snowpack (another frontend tool to make the named dependencies accesible in a directory out of node_modules).
For now my code works and i am runing my web components, but Im not sure if i am reached the best solution.