Cannot use amplify-js in browser environment (breaking vite / snowpack / esbuild) #9639
Comments
|
I'm experiencing the same issue, I have had no luck finding a workaround. I am also using |
|
I second that. The problem seems to be in Are there any plans to get rid of the node dependencies anytime soon? |
|
I have the same issue |
|
I was also getting this issue when trying to migrate an existing project onto Vite. Apparently work is being done on the aws-sdk to update this: But I had to follow this to get my app running as Vite is using rollup: |
@Mootook Did that link work for you? I tried and couldn't make it work. I'm new to Rollup / Vite so I wasn't even sure it would work. I'll try again if that worked then. |
I have the same issue (and also new to Rollup / Vite), so I am not sure how you would make the changes in e.g. |
|
@Mootook It would be great if you could provide a repository with your suggested workaround :) |
|
From what I have read the plugin interface of Vite is the same as Rollup so they should be compatible. What I don't understand is that in https://vite-rollup-plugins.patak.dev you can see that |
|
@ebisbe, I didn't know that, good catch. I have uploaded a small demo https://github.com/Mootook/aws-vite-demo/tree/main But you're right, the plugin extension in The only other issue I ran into was a global is not defined error, which has a solution in the index.html file. |
|
@sem4phor Are you using Amplify JavaScript or using AWS SDK? I believe your issue is related to the AWS SDK instead of Amplify JS. Can you confirm? |
|
@sammartinez Doesn't Aws-amplify use Aws-sdk? I use Aws-amplify but my errors come from node_modules/@AWS-SDK and I have not installed in the package.json |
Your code is working indeed. But when I add your |
|
@ebisbe, I updated my repo to use tailwind and it's working. What errors are you getting? there is also a vite specific discord for general troubleshooting |
|
@Mootook correct me if I am wrong, but I don't actually see you using aws-amplify in your repo (other than the package.json dependency) If you insert the following code into Then This is the error message originally reported in the chain of issues: vitejs/vite#1502 => vitejs/vite#1374 (comment) => this |
|
@mbp So credential provider is expecting the node http global which is not bundled with rollup. |
It's funny because when I moved my code to your repo it's all working but in mine it still failing. I've forked your repo with my code added in https://github.com/ebisbe/aws-vite-demo and my failing code in here https://github.com/ebisbe/skedr-prototype/tree/live The error I get is: |
@sammartinez I am using amplify which has aws-sdk as it's dependency (see reproduction repository) The vue label is kinda wrong. It is an issue with js bundlers which use native ecmascript modules. Vite is not vue-only. |
|
@sem4phor I guess I am a little confused and will need more information from you. What is your use case you are looking to do ? In looking at the code sample provided, thank you by the way it was helpful, I am not seeing a direct dependency of |
|
I too am having this issue. I have imported |
|
I have determined that the following modules cause build errors related to expecting various node js modules in the browser such as |
|
I am facing the same issue while using I am getting the previously reported error I tried with rollup config as suggested earlier in this thread. I also experimented with Here's my Error dump |
|
I am so glad I found this issue since I was about to write my own. I am also having this issue. |
sem4phor
changed the title
|
Hi @bhavinkamani-gt, have you manage to fix it? |
|
I noticed that the "to-be-reproduced" tag was added to this issue. I am willing to spend a bit of time setting up a minimal example of the issue I am having. Is there a protocol for submitting an example or is a temporary public git repo with a README enough? |
|
@vovawed No, I haven't yet found the solution.. As a workaround, I am using snowpack to do my production builds. Snowpack has a built-in support for node-polyfills with As commented here. This should have been fixed in this library by isolating node related code. However, it doesn't seem to have happen. @sammartinez Would you have any update on this issue? |
|
I think to be reprouced relates to a maintainer who needs to reproduce this. I have already submitted a reproduction repository... Moreover the label Amplify UI Components is wrong, too IMO. The issue persists without importing ui components @sammartinez |
I got both dev and prod builds working with @ffxsam 's solution - thanks! My whole import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath } from 'url'
import vuetify from 'vite-plugin-vuetify'
// https://vitejs.dev/config/
export default defineConfig({
...(process.env.NODE_ENV === 'development'
? {
define: {
global: {},
},
}
: {}),
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
...(process.env.NODE_ENV !== 'development'
? {
'./runtimeConfig': './runtimeConfig.browser', //fix production build
}
: {}),
},
},
plugins: [vue(), vuetify({ autoImport: true })],
}) |
|
I also have this issue but with Vite + Preact + Amplify my config: I'll also include my tsconfig.json file: I recognise the post is mostly around vue + vite but I am getting the same build issues with preact + vite. No troubleshooting as above has helped yet - would be very keen on some assistance |
|
This also affects many vite-plugin-ssr users. |
|
Still open in 2023 with newest Quasar (vite). and newest amplify: Tried to use rollup-plugin-polyfill-node This is the origin error when I run npx quasar build : |
|
For Quasar I had to add it to the build section in ...
build: {
alias: { './runtimeConfig': './runtimeConfig.browser' },
...
}
...The missing global definitions is added directly inside <script>
/* https://ui.docs.amplify.aws/vue/getting-started/troubleshooting */
window.global = window;
var exports = {};
</script> |
|
ugh whatever I'm going back to CRA then. |
Thanks! I'm using Quasar too and this solved the error. |
|
I was told during Amplify Office Hours that v6 introduced a fix for Vite environments that removes the need to add this resolve config: The release of v6 may or may not address everything discussed in this issue, but it felt appropriate to share this update here. |
@charlieforward9 v6 works perfectly out of the box with SvelteKit, just tested it today, but there's another problem with SSR, which I don't know how to solve yet, described it here: #12578 . There's no more withSSRContext, so I need to figure out how to get cognitoUser on the server side... Otherwise, v6 looks good to me. |
|
Good to hear! It seems like this issue might be solved/closable if it resolved this issue. |
I was facing |
|
With the release of the latest major version of Amplify (aws-amplify@>6), this issue should now be resolved! Please refer to our release announcement, migration guide, and documentation for more information. If you are still facing this issue after upgrading to v6, please let us know with a reply back. |
|
I still saw it with: adding the following to Without this change, it still fails and the error clearly points to @aws-amplify/ui-react: |
|
@TeoTN thanks for your feedback, it seems that it may be specific to the UI library. Will do additional testing and confirm. |
|
@TeoTN Can you share your full package.json file? I don't see how |
|
Hi @TeoTN unfortunately, Im unable to reproduce this issue. Are you still experiencing the error? If so could you try to delete your |
|
Hi @TeoTN - Im going to close out this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue. Thank you! |
and others
Describe the bug
The package aws-amplify is meant to be used in the browser, isnt it? Therefore it should not rely on node builtins, which sadly is the case and prevents the usage of this package in many js build tools like rollup, snowpack or vitejs.
The @AWS-SDK package which is used by aws-amplify relies on various node build in modules like fs, process or http2, ....
I described the issue also here (vitejs/vite#1374) and Evan You the creator of vuejs and vite mentioned that webpack will drop support for node build ins in version five. Because webpack is used by tools such as create-react-app and vue-cli this will block many developers from using the amplify package soon I think!
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The package works in the browser and does not import any node build ins which are not available in browser environment.
Code Snippet
https://github.com/sem4phor/aws-cli-bug
Screenshots
What is Configured?
Not relevant for this error.
The text was updated successfully, but these errors were encountered: