Cómo utilizar el paquete npm con Hugo.

Tengo un sitio simple de hugo hecho con este comando:

bash hugo new site quickstart

y dentro de layouts/_default/baseof.html he incluido un archivo JavaScript, llamado script.js. Dentro de script.js tengo este código:

javascript import $ from 'jquery'

Pero cuando reviso la consola del navegador, me muestra este error:

Uncaught TypeError: Error resolving module specifier "jquery". Relative module specifiers must start with "./", "../" or "/".

En mi carpeta raíz, donde tengo todas las carpetas como “content”, “data”, “public”, “archetypes”, he instalado jquery usando npm pero sigo obteniendo este error.

Nota: No quiero incluir jquery desde un cdn o descargar el archivo.

Edit:

Intenté usar la ruta relativa a jquery dentro de la carpeta node_modules usando este código:

javascript import $ from '../../../node_modules/jquery/dist/jquery.min'

Pero luego obtengo este error:

bash GET http://localhost:1313/node_modules/jquery/dist/jquery.min

davy.ai

June 11, 2023 at 9:38 am

El problema aquí es que import $ from 'jquery' intenta importar el módulo de jquery desde el directorio actual, el cual no existe. Para solucionar esto, puedes utilizar una ruta relativa al módulo instalado de jquery en su directorio node_modules.

Intenta actualizar el archivo script.js para que utilice la ruta relativa al módulo de jquery de esta manera:

import $ from '../../../node_modules/jquery/dist/jquery.min'

Sin embargo, el navegador intentará cargar `http://localhost:1313/node_modules/jquery/dist/jquery.min` que obviamente no es la ruta correcta.

Para solucionar esto, necesitas indicarle a Hugo que incluya el archivo jquery.min.js del directorio node_modules en la compilación final. Para hacerlo, actualiza tu archivo config.toml con la siguiente línea:

[module]
[[module.imports]]
path = "jquery"

Esto copiará el archivo jquery.min.js de node_modules/jquery/dist/jquery.min.js a la carpeta static de tu proyecto de Hugo, para que luego lo puedas referenciar en tu archivo script.js de la siguiente manera:

import $ from '/jquery/jquery.min.js'

O simplemente incluye el script en tu archivo baseof.html con:

{{ $jquery := resources.Get "js/jquery.min.js" }}
<script src="{{ $jquery.Permalink }}"></script>

Esto debería resolver el problema y permitir que utilices jquery en tu sitio de Hugo sin necesidad de utilizar un CDN o descargar el archivo manualmente.

Answer

davy.ai

June 11, 2023 at 9:38 am
El problema aquí es que import $ from 'jquery' intenta importar el módulo de jquery desde el directorio actual, el cual no existe. Para solucionar esto, puedes utilizar una ruta relativa al módulo instalado de jquery en su directorio node_modules.

Intenta actualizar el archivo script.js para que utilice la ruta relativa al módulo de jquery de esta manera:
```
import $ from '../../../node_modules/jquery/dist/jquery.min'
```
Sin embargo, el navegador intentará cargar `http://localhost:1313/node_modules/jquery/dist/jquery.min` que obviamente no es la ruta correcta.

Para solucionar esto, necesitas indicarle a Hugo que incluya el archivo jquery.min.js del directorio node_modules en la compilación final. Para hacerlo, actualiza tu archivo config.toml con la siguiente línea:
```
[module]
[[module.imports]]
path = "jquery"
```
Esto copiará el archivo jquery.min.js de node_modules/jquery/dist/jquery.min.js a la carpeta static de tu proyecto de Hugo, para que luego lo puedas referenciar en tu archivo script.js de la siguiente manera:
```
import $ from '/jquery/jquery.min.js'
```
O simplemente incluye el script en tu archivo baseof.html con:
```
{{ $jquery := resources.Get "js/jquery.min.js" }}
<script src="{{ $jquery.Permalink }}"></script>
```
Esto debería resolver el problema y permitir que utilices jquery en tu sitio de Hugo sin necesidad de utilizar un CDN o descargar el archivo manualmente.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo utilizar el paquete npm con Hugo.

Answer

davy.ai