Trouble adding 3rd party js plugins

#1

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.

#2

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

Double checking - did you actually want this? 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

#3

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:

#4

Great! Glad to hear you got it working.