Impossible to include momentsjs in Laravel5 with 'laravel-mix'

Question

Impossible to include momentsjs in Laravel5 with 'laravel-mix'

Navigation

#1 by (5 votes)
#2 by (1 votes)

2

I'm using laravel-5 that comes with webpack and laravel-mix , the idea is to use the library datetimepicker that at the same time uses momentjs . The problem is that I can not include the library in any way.

I have tried everything I could read, but only one thing has made me move forward:

First

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

Then one of these two:

Make a require('../../../node_modules/moment/min/moment-with-locales.js'); in resources/assets/js/app.js

Or edit 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');

After both cases, npm run dev or npm watch is executed, before finishing, I always get the following 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

I have been able to read a lot about the subject, and I have only found one way in which the error does not appear, they say it here. .

Even so, compiling well and without giving any error, when I try to execute console.log(moment().millisecond()); I always get the error in console: ReferenceError: moment is not defined

Comment on the own page of momentjs use var moment = require(...) , which also they mention it in the issue of github , but nothing, the same.

Does anyone who uses datetimepicker or failing momentjs with Laravel5 know how to include the library without errors?

My resources/assets/js/app.js file:

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');

momentjs laravel-5 webpack

asked by Sakrow 15.08.2017 в 00:08

source

2 answers

1

I just reproduced the problem and I have solved it by changing:

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

of your file resources/assets/js/app.js by:

window.moment = require('moment');

After applying npm run dev or npm run watch again, the library was already accessible from the console and it was possible to change the language with the function locale :

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

answered by 16.08.2017 в 17:09

Total sum of a column Survey for students of a school to evaluate their teachers

score 5 · Accepted Answer

To explain you I will assume that we are in a new project with laravel, like this:

We install the recommended version of laravel 5.4 that comes with webpack and laravel-mix ready for use.

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

where project-with-moment is the name of the folder that will contain the project.

Entering the project, in laravel we will use npm to install the dependencies

npm install
npm install moment --save

Now, as changes are going to be made in .js files and we want to reflect them in our project instantly, we use:

npm run watch

To solve your specific doubt I will omit unnecessary code from the initial set that laravel brings.

in the directory of your project, in the file resources/assets/js/bootstrap.js omitting all the existing code, add the following line:

window.moment = require('moment');

this creates a global variable to access momentsjs.

add app.js to the markup of the current project. You can do it with:

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

Done, you already have moments installed and globally configured

Simple tests

enter the console of your preferred browser and execute moment() . You will see the result without any error.

Use Vue js as your Javascript development framework.

in the file resources/assets/js/components/app.js/ look for the instance that comes with default laravel and adjust the code to make it look like:

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

Where time is going to be a data of your instance Vue.

In your markup add the identifier app to one of your elements, and print the data time

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

This way you will get the desired result directly in html