We Keep Coding

How to import javascript libraries using Parcel/Netlify?

I'm building a vanilla js app and using CDN's works fine, but If I install an app like typed.js with npm, and then import it as import typed from 'typed.js' it works as it should on a local dev server.
However, once I push it and it's built on Netlify I get a console error stating:
failed to resolve module specifier "typed.js". relative references must start with either "/", "./", or "../".
I have tried changing the import in every way I can think of like 'typed' , '/typed' , '/typed.js' , 'typed.js' , 'typed.js/lib/typed.js' , typed.js/src/typed.js' etc and using require instead of import.

It ended up being a very easy fix with Netlify, I needed to change the publish directory to "dist" within the build settings.

How do I use require.js?

I have a folder that contains another folder and a file "server.js", the file is the node file and the folder contains HTML and client.js. server.js has a variable that holds the port for the website, and I want to access that variable to use it in the client.js, but it keeps erroring, I tried using import statement in the client.js but it gives "Uncaught SyntaxError: Cannot use import statement outside a module". I tried using require("server.js") but learned that client-side js doesn't support require() function. I searched and found that there's a library called RequireJS, while there are some tutorials to use it, they all use the same example and it always gives the same error no matter how much I changed the code, so please help me with a detailed tutorial on how to use RequireJS.

SyntaxError: Unexpected token '*'. import call expects exactly one argument [Posenet]

I'm trying to run posenet off a python http server and encounter a syntax error in the camera.js file at this line.
import * as posenet from '#tensorflow-models/posenet';
The code is cloned from the GitHub repository: https://github.com/tensorflow/tfjs-models/tree/master/posenet/demos
I'm very new to javascript so any help will be much appreciated.

The import declartion itself is fine. I haven't seen that specific error, but it reads like the kind of error you'd get in an environment that supports dynamic import (import()) and you try to use a module script as though it were a non-module script. In a non-module script, import isn't a declaration, so the JavaScript engine (or whatever's parsing the script) assumes you're trying to use dynamic import (since unlike import declarations, you can use dynamic import in non-module scripts).
You haven't said how you're running this script, but be sure you're running it as a module, not as a non-module script:
In a browser, either import it from another module or run it via <script type="module" src="./your-file-name.js"></script>
In Node.js, be sure package.json has "type": "module" (or use .mjs instead of .js on your filename). Details here.
If using a bundler, be sure the bundler knows that the script where that declaration appears is a module script (how you do that will vary by bundler).

Importing Node Modules With JavaScript

I apologize for the simple question, but I'm pretty new to web development and JavaScript.
I want to import a package I've installed using npm, specifically shopify-buy following the guide here: https://shopify.github.io/js-buy-sdk/
The package is in my node_modules folder and I'm trying to import it into a JavaScript document using import Client from 'shopify-buy';
When I try to load everything up in Chrome, I get an error on the import line
Uncaught SyntaxError: Unexpected identifier
The Firefox error is a bit different: import declarations may only appear at top level
What am I doing wrong?
Edit:
The import line is the first line in my JavaScript file. And my HTML file is properly linked to the JS file (I think).
shopify.js
// Functions for SHOPIFY
import Client from 'shopify-buy';
const client = Client.buildClient({
domain: 'xxxxx.myshopify.com',
storefrontAccessToken: 'xxxxx'
});
index.html
<script src="javascript/shopify.js"></script>

If you want to use npm modules via the syntax, like import sth from "something" for browsers, you'd need to set up a module bundler and ES6 compiler, such as Webpack and Babel. You'd need to google them and find tutorials for setting up them accordingly.
An easy way to use the SDK seems to be using the CDN, since it's already been built for browsers to understand. Something like:
index.html
<script src="http://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
<script src="javascript/shopify.js"></script>
shopify.js
const client = ShopifyBuy.buildClient({
domain: 'your-shop-name.myshopify.com',
storefrontAccessToken: 'your-storefront-access-token'
});
console.log(client);

JavaScript Modules can only be run in module-mode scripts. Change your HTML to the following:
<script type="module" src="javascript/shopify.js"></script>

Import Stripe using Angular2 and stripe.js

I am using Angular2, Ionic2 and Stripe.js for payment processing. This thread here ionic2 with stripe payment gateway is using the plugin https://github.com/Telerik-Verified-Plugins/Stripe/blob/master/doc/index.md but it's not safe because you have to embed the Secret key inside the app. Even the page is telling people not to use this plugin.
I tried to use the node.js version here:
https://www.npmjs.com/package/stripe
However, I cannot figure out how to do the var stripe = require('stripe')(' your stripe API key '); when in TypeScript, you have to use import.
Finally, I did put <script type="text/javascript" src="https://js.stripe.com/v2/"></script> in index.html and the stripe variable shows globally inside each Component. However, I don't feel like this is the proper way to do it as the stripe object may not be ready by the time I use it inside each Component or Page.
What's the proper way to use Angular2 and Stripe.js? Ionic2 specifically would be nice but optional.
Thanks
UPDATE 1
I tried npm install stripe and then used import '../../node_modules/stripe/lib/stripe.js'; but still got error:
TypeScript error: /Users/username/Documents/StripePayment/app/pages/home/home.ts(16,23): Error TS2304: Cannot find name 'Stripe'.
Error: Cannot find module '../../node_modules/stripe/lib/stripe.js' from '/Users/username/Documents/StripePayment/app/pages/home'
Here is my VS Code screenshot with directory structure:

Add the scripttag in the index.html and then put a declaration after the imports in home.ts
declare var Stripe: any;
I believe this is the correct way to import external libs in ng2
Src: Nic Raboy
There are a some more info there; the better way to install an external lib is to download the typedefs from DefinitelyTyped and install with $ typings install
Then you should be able to import as usual
This is, of course, if there are typedefs in the DefinitelyTyped repo.
There does not seem to exist typedefs for the Stripe library, though.

Stripe seems to have type definitions now so alongside
npm install --save stripe
you can also run the following to get TypeScript definitions:
npm install --save #types/stripe
you should then be able to so something like:
import { Stripe } from 'stripe'
The above is psudo code as Ive not tested it but will will be something similar.
More info here:
https://www.npmjs.com/package/#types/stripe

The stripe.js library is intended for the server, requires the child_process module, and creates a server of its own. There is not a good way of importing this library directly to a browser environment.