HUGO

Help with babel

support
#1

Babel is a great addition to Hugo. Thanks a lot for this.

I installed babel globally on MacOS (tested: npm and brew) and used these lines in the templates:

{{- $defaultJS := resources.Get "js/default.js" | babel -}}
<script>{{ $defaultJS.Content | safeJS }}</script>

Yet, Hugo echos this error message:

BABEL: failed to transform “js/default.js” (application/javascript)

This themes to be a typical message for non-extended Hugo versions. But I am using Hugo 0.70.0 extended.

Any ideas, guys? Thank you very much in advance.

1 Like
#2

Is that the only error you see?

#3

Thank you!

Yes.

As soon as I replace babel with e.g. minify everything works.

This is the complete error message:

error calling partial: “…footer.html:51:21”: execute of template failed: template: partials/footer.html:51:21: executing “partials/footer.html” at <$defaultJS.Content>: error calling Content: BABEL: failed to transform “js/default.js” (application/javascript)
Built in 3094 ms
Error: Error building site: BABEL: failed to transform “js/default.js” (application/javascript)

1 Like
#4

I’m seeing the same error on my end. Running the regular Babel CLI for any of the files seems to work just fine with the same config. Using “verbose” does not log anything other than BABEL: failed to transform ...

#5

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.

1 Like
#6

Tried this and couple other versions of this setup and nothing. But I should’ve probably given a bit more context on my setup.

babel.config.js:

module.exports = api => {
  const presets = [
    [
      '@babel/preset-env',
      {
        include: ['transform-arrow-functions'],
      },
    ],
  ];

  api.cache(false);
  return {
    presets,
  };
};

package.json:

"browserslist": [
	  ">3%",
    "not dead",
    "defaults",
    "safari >= 10.1",
    "ios >= 10.3",
    "ie >= 11"
  ],

Dependencies:

"devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "@babel/register": "^7.9.0",
    "babel-cli": "^6.26.0",
},
1 Like
#7

Just realized I was missing @babel/cli. Installed it and it’s working as expected now.

#8

Thank you, guys. I got it working with your help.

I installed Babel globally at first (npm install -g @babel/cli @babel/core), but @babel/preset-env seems to require a local installation of @babel/cli and @babel/core.

Furthermore I noticed that Hugo requires a babel.config.js file—unlike e.g. babel-cli itself. Yet, babel.config.js can be left empty.