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: /

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',
    storefrontAccessToken: 'xxxxx'
});

index.html

<script src="javascript/shopify.js"></script>

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.',
    storefrontAccessToken: 'xxxxx'
});

index.html

<script src="javascript/shopify.js"></script>

• javascript
• node.js
• npm
• shopify

• 1 The firefox error sounds like you're using import inside a block statement. Can't be sure without seeing code – Sterling Archer Commented Feb 28, 2018 at 3:10
• Imports have to be the first things in your module. – Robert Moskal Commented Feb 28, 2018 at 3:15
• to use the new ecmascript modules syntax requires a mand line argument, and I believe the filename must be .mjs extension? see documentation - oh, sorry, the nodejs tag confused me - this is a browser thing – Jaromanda X Commented Feb 28, 2018 at 3:20
• The import line is the first line in my JavaScript file. I've added more info to my original post for clarity. – Kyle2595 Commented Mar 3, 2018 at 2:09

2 Answers 2

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 piler, 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./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.',
    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>