Requiring a npm package in laravel mix?

Question

I've seen this question being answered a couple of times on the net. However, I'm just not getting it to work. I hope you can help.

I'm using Laravel 5.5 with Laravel Mix. Instead of manually loading some of my needed js files into the specific directories, I want to install the packages via npm and require them in laravel mix.

This works with bootstrap out of the box. I swapped the 3.3.7 version for the 4.0.0 alpha6.

npm install bootstrap-v4-dev -D

Then in resources/assets/js/bootstrap.js I changed it to look like this

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-v4-dev');
} catch (e) {}

and it works. I can run npm run dev just fine. Now, I want to do the exact same thing with another npm package. So I do npm install now-ui-kit -D my package.json now looks like this

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-v4-dev": "^4.0.0-alpha.6",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "now-ui-kit": "^1.0.1",
    "popper.js": "^1.11.1",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "now-ui-kit": "^1.0.1"
  }
}

Then in the bootstrap.js file, I add require('now-ui-kit');, but now when I try to compile, I get the following error:

ERROR in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'now-ui-kit' in '/home/vagrant/code/user/resources/assets/js'
 @ ./resources/assets/js/bootstrap.js 15:0-21
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js

I also tried placing the require('now-ui-kit'); in app.js or even in webpack.mix.js..

Nothing worked, and I really don't get what I'm doing wrong.. Could someone help?

user_4137209 · Answer

Follow these steps:

Install npm package let install jQuery npm i jquery.
Create a .js file say resources/js/package.js
Now open webpack.mix.js add package.js in webpack.mix.js

mix.js([
      'resources/js/package.js',
      'resources/js/otherJsFile.js'
  ], 'js/app.js').extract([
    // Extract packages from node_modules to vendor.js
    'jquery'
])

Write this in resources/js/package.js :

import $ from 'jquery';

Finally use js/vendor.js, js/app.js on .blade file.

Now you can jQuery on your website imported from node_modules

Requiring a npm package in laravel mix?

1 Answers