Import an external library into a javascript file

Question

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.

Did you try to install as the doc say? (http://docs.hazzardweb.com/filepicker/2.0/installation). Have you find the js-lib on the https://www.npmjs.com/ ? — LakiGeri, Aug 15 '17 at 11:27
Yes I did. and his demo files work perfectly well because they are inted to be used in a php view or an html page. The plugin shows that plugins should be imported this way at the end of the tag: `` I even did it in the file that includes the Vue component, but the script isn't found in the component. — Warrio, Aug 15 '17 at 11:36
when I view the page, I have the following error in the concole : `Uncaught Error: Cannot find module "fs" at webpackMissingModule (app.js?id=94e27687d7f4327b30c3:99678) at Object../node_modules/request/lib/har.js (app.js?id=94e27687d7f4327b30c3:99678)` — Warrio, Aug 15 '17 at 11:42
I wrote an answer, try that, I hope it will solve your problem. — LakiGeri, Aug 15 '17 at 11:43

Warrio · Accepted Answer · 2017-08-28T08:53:23.497

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.

score 1 · Answer 2 · answered Aug 15 '17 at 11:42

1

I ran some search, and this js lib of the filepicker package is not available on npmjs.com. But you can install the lib from local (check this answer), or you can add the path of the lib in the package.json like this. After you imported it, I think you should do nothing, but if it will not work, you have to init this lib as its doc says.

I hope it helps!

answered Aug 15 '17 at 11:42

LakiGeri

2,046
6
30
56

Not really sure if I am installing it correctly but this is what I did and what I got according to the suggested answer. Should I be in a specific subfolder? http://imgur.com/a/l75mp The doc (http://docs.hazzardweb.com/filepicker/2.0/laravel) also suggested to install the package using `composer`. As you can see there already a reference to filePicker in my package.json file. Does this concerns the issue? https://www.npmjs.com/package/fs It says that this package name is not currently in use. Before installing the package with composer, I had only moment as a dependency in package.json. – Warrio Aug 15 '17 at 15:12
I think when you use the `npm install /path` command, the lib can be anywhere because the npm install will copy the important stuff to node_modules library. But honestly I've never used this before. – LakiGeri Aug 16 '17 at 06:27
I recommend you to update the question, and not comment the process, becuse that way others can easily find your problem. :) anyway, what did you try? – LakiGeri Aug 16 '17 at 06:29
1

did you try to set the local path of the js? If I understand you correctly, then I have the js lib in local. Is it compatible with npm? – LakiGeri Aug 16 '17 at 14:56
yes, it did create a link and when I run `npm link filepicker` it only returned this with no error: `C:\www\projects\myproject\node_modules\filepicker -> C:\Users\me\AppData\Roaming\npm\node_modules\filepicker` – Warrio Aug 16 '17 at 15:19
The plugin contains a package.json file that contains dependencies for glub and elexir. dependencies that have been replaced by webpack and mix in the current version of Laravel – Warrio Aug 16 '17 at 15:21
I can send you the plugin so you can see by yourself. And I accept that you charge me. – Warrio Aug 16 '17 at 15:22
actually I dont know what causes the problem.. maybe this filepicker external lib is not support npm. Have you written for the developers of the filepickers? – LakiGeri Aug 16 '17 at 17:09

Import an external library into a javascript file

2 Answers2