2

Estoy usando laravel-5 que viene con webpack y laravel-mix, la idea es usar la librería datetimepicker que a la vez usa momentjs. El problema es que no consigo incluir la librería de ninguna de las maneras.

He probado todo lo que he podido leer, pero solo una cosa me ha hecho avanzar:

Primero

npm install datetimepicker --save-dev
npm install moment --save-dev

Luego una de estas dos:

Hacer un require('../../../node_modules/moment/min/moment-with-locales.js'); en resources/assets/js/app.js

O editar webpack.mix.js:

mix.js([
  //Plugins
  'node_modules/moment/min/moment-with-locales.js',
  'node_modules/admin-lte/plugins/daterangepicker/daterangepicker.js',
], 'public/js/app.js');

Después de ambos casos se ejecuta npm run dev o npm watch, antes de terminar siempre me sale el siguiente error:

WARNING in ./~/moment/min/moment.min.js
Module not found: Error: Can't resolve './locale' in '/proyecto/node_modules/moment/min'
 @ ./~/moment/min/moment.min.js 6:16637-16659

En podido leer bastante sobre el tema, y solo he encontrado una manera en la que no aparece el error, lo dicen aquí..

Aun así, compilando bien y sin dar ningún error, cuando intento ejecutar console.log(moment().millisecond()); siempre me da el error en consola de: ReferenceError: moment is not defined

Comentan en la propia página de momentjs usar var moment = require(...), que también lo comentan en la issue de github, pero nada, lo mismo.

¿Alguien que use datetimepicker o en su defecto momentjs con Laravel5 sabe como incluir la librería sin errores?

Mi fichero de resources/assets/js/app.js:

require('./bootstrap');

//var moment = require('moment');
require('../../../node_modules/moment/min/moment-with-locales.js');
console.log(moment().millisecond());
require('../../../node_modules/admin-lte/plugins/daterangepicker/daterangepicker.js');

4 respuestas 4

6

Para explircarte voy a suponer que estamos en un proyecto nuevo con laravel, así:

  1. Instalamos la versión recomendada de laravel 5.4 que viene con webpack y laravel-mix listos para su uso.

    composer create-project --prefer-dist laravel/laravel project-with-moment
    

    donde project-with-momentes el nombre de la carpeta que contendrá el proyecto.

  2. Ingresando al proyecto, en laravel vamos a usar npm para instalar las dependencias

    npm install
    npm install moment --save
    
  3. Ahora, como se van a hacer cambios en ficheros .js y los queremos reflejar en nuestro proyecto instantáneamente, usamos:

    npm run watch
    
  4. Para resolver tu duda puntual voy a omitir código innecesario de el set inicial que trae laravel.

    en el directorio de tu proyecto, en el fichero resources/assets/js/bootstrap.js omitiendo todo el código existente, agregamos la siguiente línea:

    window.moment = require('moment');
    

    esto crea una variable global para acceder a momentjs.

  5. agrega el app.js al markup del proyecto actual. Puedes hacerlo con:

    <script src="{{ mix('js/app.js') }}"></script> 
    

Listo, ya tienes momentjs instalado y configurado globalmente

Pruebas simples

  1. ingresa a la consola de tu navegador preferido y ejecuta moment(). Verás el resultado sin ningún error.

    Ejemplo MomentJs en consola del navegador

  2. Usa Vue js como tu Framework de desarrollo Javascript.

    en el fichero resources/assets/js/components/app.js/ busca la instancia que trae por defecto laravel y ajusta el código para que se vea como:

    const app = new Vue({
        el: '#app',
        data: {           
            time: moment().format('Y-M-d H:mm:ss')
        }
    });
    

    Donde time va a ser un dato de tu instacia Vue.

    En tu markup agrega el identificador app a uno de tus elementos, e imprime el dato time

    <div id="app" class="title m-b-md">
        @{{ time }}
    </div>
    

Así obtendrás directamente en html el resultado deseado Ejemplo MomentJs en vista

5
  • ¡Perfecto! ¡Funciona! ¡Muchas gracias! Voy a investigar sobre esto, pero la pregunta es, ¿cual es la diferencia entre uno y otro? Ambos deberían de incluir la librería. He tenido que hacer lo mismo con laroute si quería meterlo en el webpack.mix.js. ¿Podrías ampliar la respuesta con estos datos?
    – Sakrow
    Commented el 16 ago. 2017 a las 16:45
  • Te refieres a la diferencia entre moment y moment-with-locale ?
    – Eduardo Gh
    Commented el 16 ago. 2017 a las 17:13
  • No, a la diferencia de hacer un include('../../..'); y hacer un 'window.moment = require('moment'); porqué de una forma si que funciona y de la otra no, cuando (a mi entender, aunque evidentemente estoy confundido) ambas deberían de incluir la librería.
    – Sakrow
    Commented el 16 ago. 2017 a las 17:21
  • 1
    Al usar require('../../../node_modules/moment/min/moment.min.js'); estás requiriendo un fichero en tu proyecto, pero justamente como ha sido indicado en varios issues, ejemplo este, hay problemas con algunos archivos relativos a ese archivo y su compatibilidad con webpack. Haciendo require('moment') estás requiriendo directamente un modulo dentro de 'node_modules' no soy un experto en el tema pero aquí hay más información. Espero una mejor respuesta.
    – Eduardo Gh
    Commented el 16 ago. 2017 a las 19:10
  • Perfecto, toda la información adicional la añadiría a la respuesta, para que la persona que se encuentre en la misma situación lo tenga en cuenta. De nuevo, gracias.
    – Sakrow
    Commented el 16 ago. 2017 a las 19:13
1

Acabo de reproducir el problema y lo he solventado cambiando:

//var moment = require('moment');
require('../../../node_modules/moment/min/moment-with-locales.js');

de tu fichero resources/assets/js/app.jspor:

window.moment = require('moment');

Después de aplicar npm run dev o npm run watch de nuevo, la librería ya era accesible desde la consola y era posible cambiar de idioma con la función locale:

moment().locale('es').format('LLL');
0
0

Saludos por si aun sirve la solución mas sencilla con esta configuración en tu bootstrap.js o app.js

import "moment/locale/es";

window.moment = require("moment");

con eso tiene moment como variable global y configurado en español

-1

Tenia el mismo problema, yo estoy usando laravel 6 El problema es que al momento de ejecutar el comando para instalar moment js npm install moment --save al parecer si se instala la librería, pero si te vas a la carpeta node_modules/moment en donde se supone que estarían los archivos de la librería solo aparece el archivo package.json.

Lo que tienes que hacer para solucionar esto es ir al repositorio de github de momentjs

https://github.com/moment/moment/

Y descargar o clonar el repositorio dentro de la carpeta de node_modules/moment

Y con esto se soluciona el problema.

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.