Question

79

Importing Node Modules With JavaScript

rated 0 times [ 83] [ 4] / answers: 1 / hits: 25076 / 6 Years ago, wed, february 28, 2018, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazminuniquer

Add To Favorites

Follow

Total Points: 63

Total Questions: 121

Total Answers: 96

Location: Cambodia

Member since Thu, May 21, 2020

4 Years ago

jazminuniquer questions

1 Next.js change locale for the current path that has query, using router

Sat, Nov 20, 21, 00:00, 3 Years ago

1 Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB

Thu, Feb 18, 21, 00:00, 3 Years ago

1 How to get values from client.users.fetch(id) in discord.js

Thu, Sep 3, 20, 00:00, 4 Years ago

1 Apply motion to react component Framer-Motion

Thu, Jun 25, 20, 00:00, 4 Years ago

1 Vuetify - How to select a row data using v-radio-group in v-data-table

Tue, May 19, 20, 00:00, 4 Years ago

View All

answered 6 Years ago nadiatristinl · Accepted Answer

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);