amplify (and aws-sdk) has many, many issues with snowpack #718
Replies: 10 comments 16 replies
-
|
Have you found a solution for this? I'm experiencing the same issues. |
Beta Was this translation helpful? Give feedback.
-
|
I bundled amplify and aws-sdk using a webpack config with an index.js that looks like this: export { default as Amplify } from "aws-amplify";and webpack.config.js like this: const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "amplify-esm-bundle.js",
globalObject: "this",
library: "AMPLIFY",
libraryTarget: "umd"
}
};Then I package that up and drop the script into the dom before my code. It's a pain but it works |
Beta Was this translation helpful? Give feedback.
-
|
how to fit in this template ? |
Beta Was this translation helpful? Give feedback.
-
|
This is evidently caused by the inclusion of spurious shims in the "lib-esm" builds of the var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { ConsoleLogger as LoggerClass } from './Logger';(While they may be necessary for functioning in the target environment, the shims are "spurious" in that they invalidate the files as ES2015 modules.) The error is reported by Rollup for every module in every package. In dev mode, the errors are noisy but appear to be benign. Initial testing indicates that the following workaround (in const fs = require("fs");
// Will be `dev` or `build`. These are the arguments passed to snowpack.
const [, , operation] = process.argv;
module.exports = {
/* ...other config... */
installOptions: {
rollup: {
plugins: [
{
/*
* Work around issue bundling @aws-amplify packages, namely the error:
*
* The 'this' keyword is equivalent to 'undefined' at the top level
* of an ES module, and has been rewritten
*
* These errors arise in the packages' `lib-esm` builds, which are
* mostly ES2015 modules but include shims that trigger Rollup errors.
*
* This workaround redirects requests for the indexes of those
* packages to the single-file dists that Rollup can process.
*
* See https://github.com/pikapkg/snowpack/discussions/718
*/
name: "redirect-aws-amplify",
load(id) {
// This is only needed for (and only works in) production mode,
// though note that in dev mode you still get many warnings.
if (operation === "build") {
const alternate = id.replace(
/@aws-amplify\/(.+?)\/lib-esm\/index\.js$/,
"@aws-amplify/$1/dist/aws-amplify-$1.js"
);
if (alternate !== id) {
return fs.readFileSync(alternate, "utf-8");
}
}
},
},
],
},
},
}; |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for digging into this! we have a couple of workarounds like this built into esinstall for popular packages... I'd be okay with adding this workaround into esinstall core if it's truely 100% benign. |
Beta Was this translation helpful? Give feedback.
-
|
Sure thing. Thanks for your work on Snowpack, which we're trying out on a new project here. On further investigation, I see that the I do not see an upstream issue tracking this at https://github.com/aws-amplify/amplify-js. I will file one when I have a repro case, but so far, simple usage with Rollup (not involving Snowpack) is not producing these errors. This workaround is isolated & doesn't have any external dependencies, so it is pretty low cost from our perspective. It would be cleaner if we could point Rollup to the right module in the first place (rather than physically loading the code), but it appears that the In dev mode, it's a no-op, since the We may revisit this to suppress the many errors that still appear in dev mode, since they make it very hard to read the console. I'm not sure whether that is best accomplished by a Rollup plugin or by some other means. |
Beta Was this translation helpful? Give feedback.
-
|
Curious that you're seeing this in Snowpack but not Rollup! Can you share the output related to unresolved dependencies? If the repro is We're actually in the process of moving benign (or "almost always benign but always very loud") Rollup warnings behind the In the meantime, you can see |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the info. The unresolved module errors that we were seeing are similar to those in the (very long) output in the ticket description, though they are kind of drowned out by the 'this' error. Copying some here for reference: We did also see something like a "one or more circular dependencies" error in our output as well (I don't have a copy handy). But these were all resolved by the workaround because it substituted packages that were themselves already bundled at the point of entry (so no module resolution was needed). I'm out of time on this for now, but I imagine the issue can be reproduced with Rollup alone (though I could easily be missing something). |
Beta Was this translation helpful? Give feedback.
-
|
No problem, appreciate the extra debugging. I actually see an issue there in the output on our end: that "Node.js built-in could not be resolved." link should point you to the |
Beta Was this translation helpful? Give feedback.
-
|
@FredKSchott I tried setting However, the option seems to be interpreted somehow, because if I change So I'm wondering if when that context value is the same as the warning message, then the warning message is sent anyway... |
Beta Was this translation helpful? Give feedback.
-
|
I checked out the code and everything looks fine. There's a small chance this is a rollup issue, where it can't handle an explicit We're in the process of moving some common, generally harmless Rollup warnings behind the https://github.com/snowpackjs/snowpack/blob/master/esinstall/src/index.ts#L415 |
Beta Was this translation helpful? Give feedback.
-
|
@FredKSchott sorry, could you please tell me which command to run with As for the error code, while I'm not entirely sure I understand this whole issue, according to Rich Harris it looks like |
Beta Was this translation helpful? Give feedback.
-
|
That’s the one! That would be great if you can create a PR to add that to the “if” conditional that we currently have to send those to logger.debug |
Beta Was this translation helpful? Give feedback.
-
|
You got it. Done in #1359 |
Beta Was this translation helpful? Give feedback.
-
|
Great! Prerelease out at |
Beta Was this translation helpful? Give feedback.
-
|
Is there any joy with getting AWS Amplify to work with rollup at all? A simple app that breaks: import { AmplifyAuthenticator } from "@aws-amplify/ui-react";
import React from "react";
import ReactDOM from "react-dom";
import "./index.less";
ReactDOM.render(
<div>
<AmplifyAuthenticator />
</div>,
document.getElementById("root")
);With these issues (using |
Beta Was this translation helpful? Give feedback.
-
|
Ok, some level of followup but I can get it to build using this in As they fixed this in the latest version of aws-sdk. However now I get When running in dev mode. If I try: I'm getting: |
Beta Was this translation helpful? Give feedback.
-
|
Some parts of it are working now with |
Beta Was this translation helpful? Give feedback.
-
|
This may be fixed by our latest rewrite/refactor. If you can try out |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the hint, I just tried it but now it crahes even earlier with I looked into both files, the import in question looks like this: while the export section of uuid looks like this: I added a resolution to load a more recent version of uuid ( I was able to get it working by cloning the amplify repo, changing the file to use proper imports and then PS: It's so nice to work with snowpack, I want to avoid going back to webpack bc of this JS import mess so much 😅 Keep up the great work! |
Beta Was this translation helpful? Give feedback.
-
|
I'm getting errors for "url" and "buffer" modules
|
Beta Was this translation helpful? Give feedback.
-
|
I was adding "@aws-amplify/ui-react" I'm getting with 3.1.0-pre.12: |
Beta Was this translation helpful? Give feedback.
-
|
Hi everyone, if you're still having issues with these I'd highly recommend trying the latest rewrite: |
Beta Was this translation helpful? Give feedback.
-
|
See this comment for a simple workaround. |
Beta Was this translation helpful? Give feedback.
-
|
@akraines Can be improved by creating an alias in Snowpack config: That way you can keep your imports in the code clean: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks – that issue was a major annoyance when using aws amplify with snowpack
From: Lukas Jusko ***@***.***>
Sent: Thursday, 25 November 2021 0:45
To: withastro/snowpack ***@***.***>
Cc: akraines ***@***.***>; Mention ***@***.***>
Subject: Re: [withastro/snowpack] amplify (and aws-sdk) has many, many issues with snowpack (Discussion #718)
@akraines <https://github.com/akraines> Can be improved by creating an alias in Snowpack config:
alias: {
'aws-amplify': 'aws-amplify/dist/aws-amplify.min.js'
}
That way you can keep your imports in the code clean:
import Amplify from 'aws-amplify'
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub <#718 (reply in thread)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADT7NB7USGOHMN7QMZWNYRTUNVTFVANCNFSM4PTAJQWA> .
Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> . <https://github.com/notifications/beacon/ADT7NB2HWWQMAF5UDKWWLSDUNVTFVA5CNFSM4PTAJQWKYY3PNVWWK3TUL52HS4DFWFCGS43DOVZXG2LPNZBW63LNMVXHJKTDN5WW2ZLOORPWSZGOAAM6JJA.gif>
|
Beta Was this translation helpful? Give feedback.
-
Trying to use aws-amplify in a snowpack 2.7.5 site results in many issues including
366 of these:
some node built-in issues (including
url,buffer, andevents):and a wide variety of "could not be resolved", mostly from aws-sdk.
In some cases the file contents of the "es" build seems to be typescript output, including sourcemap comments.
example
Repro and output
Add
aws-amplifyto dependencies in package.json:{ ... "dependencies": { "aws-amplify": "^3.0.22", ... }, ... }build output (25k lines)
import something from
aws-amplifyso that snowpack picks it up, like Hub. I did this in App.jsxBeta Was this translation helpful? Give feedback.
All reactions