Svelte/ Rollup Error “missing global variable name” - amazon-cognito

Question

When I am importing "AmazonCognitoIdentity" in my Routify project I am getting "missing global variable name" error.
Error message:
bundles src/main.js  dist\build\bundle.js...
LiveReload enabled
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
/js/amazon-cognito-identity.min.js (imported by src\pages\_components\Login.svelte)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
/js/amazon-cognito-identity.min.js (guessing 'amazonCognitoIdentity_min_js')
created dist\build\bundle.js in 2.7s
bundles src/sw.js  dist\sw.js...
created dist\sw.js in 1.6s
Following is my code
import { AmazonCognitoIdentity } from "/js/amazon-cognito-identity.min.js";
const authenticationData = {
Username: userName,
Password: password,
};
const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(
authenticationData
);
console.log(authenticationDetails);
const poolData = {
UserPoolId: "xxxx”
ClientId: "xxxxxxx",
};
const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
const userData = {
Username: userName,
Pool: userPool,
};
console.log(userData);
const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
const accessToken = result.getAccessToken().getJwtToken();
console.log(`on sucess: ${accessToken}`);
},
onFailure: function (err) {
console.log(`onfailure: ${err}`);
console.log(err);
},
});
and also I’ve linked the following file in _index.html
<script src="./js/amazon-cognito-identity.min.js"></script>
<script src="./js/amazon-cognito-auth.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.7.16.min.js"></script>
And the same process in working good in normal Html ad JavaScript files.

Answer 1

npm i amazon-cognito-identity-js
run this command first then update your import to this:
import { AmazonCognitoIdentity } from 'amazon-cognito-identity-js';

Answer 2

Flowing error is thrown after incorporating
npm i amazon-cognito-identity-js
import { AmazonCognitoIdentity } from 'amazon-cognito-identity-js';
ERROR:
(!) Plugin node-resolve: preferring built-in module 'buffer' over local alternative at 'E:\ec-website\htx-pp-client\node_modules\buffer\index.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
buffer (imported by node_modules\amazon-cognito-identity-js\es\AuthenticationHelper.js, node_modules\amazon-cognito-identity-js\es\CognitoUser.js, node_modules\amazon-cognito-identity-js\es\CognitoJwtToken.js)
[!] Error: 'AmazonCognitoIdentity' is not exported by node_modules\amazon-cognito-identity-js\es\index.js, imported by src\pages_components\Login.svelte
After adding this line to rollup.config.js
rollup.external = ["AmazonCognitoIdentity", "amazon-cognito-identity-js"];
rollup.output = {
file: "dist/build/bundle.js",
format: "umd",
interop: "esModule",
globals: {
"amazon-cognito-identity-js": "AmazonCognitoIdentity",
},
};
The above error is gone. But at run time throws a new error
Uncaught TypeError: Cannot read property 'AmazonCognitoIdentity' of undefined

Answer 3

I got past this error by adding
import polyfills from "rollup-plugin-node-polyfills";
...
plugins: [
polyfills(),
...
to my rollup.config.js

Answer 4

My guess is, you need to change the import statement so that it is relative:
import { AmazonCognitoIdentity } from "./js/amazon-cognito-identity.min.js";
I don't know where this file is, but you need to have . or .. at the start of the location.
As I'm not an expert I yet cannot explain you why.

Answer 5

import AmazonCognitoIdentity from 'amazon-cognito-identity-js';
Is your import correct?