# Trouble adding 3rd party js plugins

**URL:** https://discourse.roots.io/t/trouble-adding-3rd-party-js-plugins/13255
**Category:** sage
**Tags:** webpack
**Created:** 2018-08-03T14:15:17Z
**Posts:** 4

## Post 1 by @Pallavi_Dwivedi — 2018-08-03T14:15:17Z

Trying to add few JS plugins for my sage 9 project and running into terminal issues.

I added the plugins by doing `yarn add <plugin_name>` one by one for each plugin

Then I included them by writing this in **main.js**

```
import 'jquery-ui';
import 'chosen/main';
import 'highcharts/highcharts';
import 'lazyload/lazyload';
import 'mailcheck/src/mailcheck.min';
import 'parsleyjs/dist/parsley.min';
import 'selectize/dist/js/selectize.min';
import 'sticky-kit/dist/sticky-kit.min';
import 'wow/lib/main';
```

Then I ran `yarn build`

This makes me run into this error which is terrible and I am stuck right there. Tried adding babel-loader and she-bang loader in webpack.config.js but no help.

The error:  
ERROR Failed to compile with 1 errors

```
error in ./node_modules/wow/lib/main.js

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| var com = require("./command.js");
|
```

Please save me someone. Help me get out of it and use js plugins with peace.

The error is just an example fow the ‘wow’ plugin. I am getting the same error for all of the plugins.

---

## Post 2 by @mmirus — 2018-08-03T14:50:18Z

Hey there,

I recommend stepping back and looking at how each package wants you to import it, one at a time, by checking their documentation. For example, I believe Highcharts would be something like this:

```
import Highcharts from 'highcharts';
```

As for wow, it looks like you might have installed this: [https://github.com/kangjia/wow](https://github.com/kangjia/wow)

Double checking - did you actually want this? [https://github.com/matthieua/WOW](https://github.com/matthieua/WOW)

You may find this section on MDN helpful to explain what the different `import` syntaxes are used for: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Description](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Description)

---

## Post 3 by @Pallavi_Dwivedi — 2018-08-07T06:23:59Z

Thanks Alot Matt. Read through your suggested links and got the plugins to work from **common.js** file.

So my **common.js** file now looks like:

```
import Wow from 'wow.js';
import 'chosen-js/chosen.jquery.min';
import 'parsleyjs/dist/parsley.min';

import Highcharts from 'highcharts/highcharts';
window.Highcharts = Highcharts;

import 'lazyload/lazyload.min';

import Mailcheck from 'mailcheck/src/mailcheck.min';
window.Mailcheck = Mailcheck;

export default {
  init() {
    // JavaScript to be fired on all pages
    const wow = new Wow();
    wow.init();
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  },
};
```

and the plugins are working fine :smile:

---

## Post 4 by @mmirus — 2018-08-07T14:27:55Z

Great! Glad to hear you got it working.