1

llevo un buen rato peleandome con esto y no hay manera de hacer funcionar el jquery usando el webpack de symfony.

He seguido este tutorial (creo que es el oficial de symgony) desde el principio:

https://symfonycasts.com/screencast/webpack-encore/require-outside-libs#play

También he seguido los pasos que se indican aquí:

https://symfony.com/doc/current/frontend/encore/legacy-apps.html

Pero no veo la manera de hacer funcionar el jQuery en mis archivos.

Pues me salta el siguiente error

index:11 Uncaught ReferenceError: $ is not defined at index:11

Es decir que $no está definido.

Este es mi archivo app.js

require('../css/app.css');
const $ = require('jquery');

y este es el archivo webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .autoProvidejQuery()
    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })
;

module.exports = Encore.getWebpackConfig();

No veo la manera de que esto funcione.

1 respuesta 1

0

En el archivo assets/js/app.js tengo lo siguiente para que me funcione jQuery:

var $ = require('jquery');

// create global $ and jQuery variables
global.$ = global.jQuery = $;

var nombre_del_script_sin_sufijo = require('./nombre_del_script_sin_sufijo');

En la última línea añado un script que utiliza jquery e incluimos la entrada en webpack.config.js:

.addEntry('nombre_del_script_sin_sufijo', './assets/js/nombre_del_script_sin_sufijo.js')

Por otra parte has de tener creado el directorio public/build y construir sobre él los assets utilizando:

yarn encore dev

Reiniciar encore:

yarn run encore dev --watch

Incluir el archivo assets/js/app.js en la plantilla twig dentro del bloque javascript:

{% block javascripts %}
   {{ encore_entry_script_tags('app') }}

Si sigues teniendo problemas en el archivo webpack.config.js descomenta la línea referida a jQuery:

// uncomment if you're having problems with a jQuery plugin
.autoProvidejQuery()

Con esto te debería de funcionar.

3
  • Pero yo por ejemplo no tengo ningún archivo js que utilize expresamente jquery, tengo funciones en las plantillas de twig, voy a probar con {{ encore_entry_script_tags('app') }}
    – Pavlo B.
    Commented el 11 ene. 2019 a las 21:59
  • Sigue sin funcionar correctamente, al añadir un archivo por ejemplo funciones.js con funciones que usan jquery y hacer un require en app.js me sale error del encore diciiendo qu eno puede resolver funciones
    – Pavlo B.
    Commented el 11 ene. 2019 a las 22:15
  • sigue las instrucciones que da el encore para solventar el error. Normalmente te faltará instalar algo.
    – M. Galardi
    Commented el 11 ene. 2019 a las 23:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.