Warrio Warrio - 25 days ago 12
Javascript Question

Import an external library into a javascript file

UPDATE

I'have purchased a plugin called filePicker that I want to use in one of my vue.js components.

When I tried to import its libraries this way

<script>
import {filepicker} from '../filepicker';
import {filepickerdrop} from '../filepicker-drop';
</script>


When I run
npm run dev
the 1st time after this, it asked to install this library

npm install --save filepicker


When I did and tried
npm run dev
the 2nd time, it asked for this

npm install --save fs net tls


I did and run
npm run dev
a 3rd time, it asked me for this

npm install --save fs



This dependency was not found: * fs in ./node_modules/request/lib/har.js


Problem: It keeps asking me to install this fs library.

These installs have updated my
package.json
to this

"dependencies": {
"filepicker": "^0.2.0",
"fs": "0.0.1-security",
"net": "^1.0.2",
"tls": "0.0.1"
}


This shows that the library FilePicker has been successfully installed, but the library
fs-security
that it's using is nowhere to be found.

This https://www.npmjs.com/package/fs mentions that "this package name is not currently in use." What does this mean?

LakiGeri, has suggested to locally install the FilePicker according to this post. The errors show above that fs is the one who needs to be installed. And I don't have this library to install it.
LakiGeri also suggested to follow the doc specifications. I'm not even able to import its libraries, so how can even start to work on its configuration.
The third advise was to manually update the dependencies in the
package.json
file. It has already been updated.

I also opened an issue on npm github repo. I still have no feedback there.

Answer Source

The plugin author has just replied and updated his sittings. Add the following in webpack.mix.js with the following:

const path = require('path')

mix.webpackConfig({
    resolve: {
        alias: {
            'filepicker': path.join(__dirname, './resources/assets/js/vendor/filepicker'),
            'filepicker-ui': path.join(__dirname, './resources/assets/js/vendor/filepicker-ui'),
            'filepicker-drop': path.join(__dirname, './resources/assets/js/vendor/filepicker-drop'),
            'filepicker-crop': path.join(__dirname, './resources/assets/js/vendor/filepicker-crop'),
            'filepicker-camera': path.join(__dirname, './resources/assets/js/vendor/filepicker-camera'),
        }
    }
});

Now you can import the Filepicker files like this:

import 'filepicker';
import 'filepicker-ui';
import 'filepicker-drop';
import 'filepicker-crop';
import 'filepicker-camera';

Now it works.

Big thanks to LakiGeri for being the only one helping.