3

Let me preface this by admitting that I'm very new to node.js and web development as a whole. I've been combing through stackoverflow and google searches for a solution, but to no avail. Mainly, I am unsure of which steps I need to take since this is my first time dabbling in the use of npm modules.

Basically, I created a static website for my friend that allows users to add their own puns to a preexisting array of puns inspired by her cats' names. The site then randomizes the array if users want to view the puns one at a time. For the submissions, I've already set limits that users must write something between 0-50 characters that contains at least one of the names of her cats. The functionality of the site was coded in vanilla JS. However, the program does not yet account for gibberish submissions that otherwise meet the above requirements (e.g., "alksdjjsd Cat name slkjsd"). That is the last step that will finalize the website.

To fix this, I would like to add this npm module to my project. I tested the module, and it was able to correctly separate gibberish submissions from the non-gibberish submissions in my array. The only problem is, I have no clue how to proceed.

Naturally, I installed the package in node and then copy/pasted the import statement - per the usage instructions - straight into my .js file, but then I figured out that the package won't run in the browser. So then I installed node.js and created a package.json with the following dependencies:

  "devDependencies": {
    "browserify": "^16.5.0",
    "watchify": "^3.11.1"
  },
  "dependencies": {
    "asdfjkl": "0.0.6"
  }

As you might have guessed, I also created a bundle.js file that I have linked in a script tag in my index.html file <script src="bundle.js"></script> with the following also in my package.json file: 

  "main": "index.js",
  "scripts": {
    "build": "browserify index.js -o bundle.js",
    "watch": "watchify index.js -o bundle.js"
  },

However, it's still unclear to me how I ought to follow the usage instructions in the npm module. I'm unable to use the suggested import statement:

import asdfjkl from 'asdfjkl';

in my code (index.js/bundle.js files) without seeing errors in my terminal such as "ParseError: 'import' and 'export' may appear only with 'sourceType: module'" or 

import asdfjkl from 'asdfjkl';
       ^^^^^^^

SyntaxError: Unexpected identifier

I noticed that a lot of people with this similar problem are using tools like Babel, Gulp, and other packages, but I can't tell which tools I might need, and I definitely don't understand how to use them.

Any guidance on how to include this package into my front-end project would be GREATLY appreciated. Thanks a lot in advance!

Edit: The Solution

In order for the function asdfjkl() to work, I ended up needing to write

var asdfjkl = require('asdfjkl').default;

For others with this issue needing clarification, I found this answer to be helpful.

Crystal
  • 33
  • 5

2 Answers2

2

Import and Export are features from ECMAScript 6 (http://es6-features.org/#ValueExportImport), so i guess you are not using any Javascript compiler ( Babel for example https://babeljs.io/docs/en/ ). But, if you don't want use any compiler you can simple change the code to import the library like this:

var asdfjkl = require('asdfjkl');
Riccardo Gai
  • 421
  • 1
  • 6
  • 19
  • Thanks for pointing me in the right direction! I just tried the `var asdfjkl = require('asdfjkl');` code as you suggested, and received this error in the terminal: `console.log(asdfjkl('hello'));` `TypeError: asdfjkl is not a function` as well as `Uncaught ReferenceError: asdfjkl is not defined` in the browser. I'm not sure why. If it turns out that Babel is the way to go, are there any particular packages you would recommend for this specific project? I realize there are so many different packages related to Babel, it's a bit intimidating – Crystal Sep 26 '19 at 08:01
  • Looks strange to me that doesn't work, i saw you use browserify and look the first example (http://browserify.org/#install), let's try to build it again. Anyway here you can find a good example how to play a bit with babel with vanilla app https://medium.com/backticks-tildes/introduction-to-babel-and-javascript-bundlers-fe6165de197c – Riccardo Gai Sep 26 '19 at 08:14
  • Thanks for the links! I'll go ahead and give them a thorough read, get some sleep, play around with the code a bit tomorrow. I'll let you know of any changes – Crystal Sep 26 '19 at 08:20
  • 1
    I figured it out by tinkering with different import statements in the package's runkit.js and test.js files. For some reason, this line of code did the trick: `var asdfjkl = require('asdfjkl').default;` – Crystal Sep 26 '19 at 19:50
0

You can install an npm package using, npm install --save

ex: npm install asdfjkl --save

NSR
  • 315
  • 2
  • 5
  • 18
  • Thanks for your response! I should have wrote that that was the first step I took. First I installed the package like so: "npm install asdfjkl --save" and then I tried using the import statement as suggested in the link, but it wasn't working for me. – Crystal Sep 26 '19 at 07:24
  • Can you find the installed package inside your node_modules folder? – NSR Sep 26 '19 at 07:38
  • Yes. I've also tried to import asdfjkl from the path file ('node_modules/asdfjkl/lib/asdfjkl.js' ... or something to that effect) but no luck – Crystal Sep 26 '19 at 07:43