Receiving a JSLint error from trying to import my 'aws-amplify' package into my entry point

Question

The most recent version of aws-amplify was installed with npm. Additionally, npm init was run with the entrypoint file being 'entryPoint.js'. However, when I enter entryPoint.js and paste these lines of code at the top

import Amplify, {Auth} from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

I receive a JSLint error that reads:

Expected an identifier and instead saw 'import'.

How can I correctly import aws-amplify? I followed instructions off of https://docs.amplify.aws/lib/auth/getting-started/q/platform/js#option-1-use-pre-built-ui-components

Answer 1

So JSLint is kinda new to the whole import game, and the instructions themselves say this about import:

JSLint recognizes a small but essential subset of the module syntax.

For a long time, JSLint didn't (iirc) support import at all, and then for a while maybe only with the es6 jslint directive, but that's by memory. I'm glad to see it supports as much as it does now.

And it looks like what that "small but essential subset" doesn't support is a default import on the same line as a named import.

But it does accept breaking that import into two lines like this:

import {Auth} from "aws-amplify";
import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);

// you didn't use Auth, so let's use it here in a 
// way that stops JSLint from complaining.
var myAuth = new Auth("something");
myAuth.something(1);

JSLint is real big on making code easy to scan and read. Maybe the thinking is that you don't want both types on the same line b/c maybe you'll read Amplify as a named import? I don't know exactly in this case.

But JSLint is a great tool to help ensure high quality JavaScript code. If you can get past its idiosyncrasies, like this one, it'll pay you back in the long term, though many will suggest for "modern" JavaScript code you should consider using eslint instead. It's a bit more configurable, which is itself a double-edged sword.