Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't build vue 3 project if importing aws-amplify package #14031

Closed
ivanovvitaly opened this issue Nov 21, 2024 · 6 comments
Closed

Can't build vue 3 project if importing aws-amplify package #14031

ivanovvitaly opened this issue Nov 21, 2024 · 6 comments
Labels
Build Related to build issues question General question transferred This issue was transferred from another Amplify project Vue Related to Vue Framework issues

Comments

@ivanovvitaly
Copy link

Describe the bug
I installed aws-amplify npm package to the clean vue 3 project and added Amplify import. When I run npm run build I get long list of errors, npm run serve runs without errors though. If I remove aws-amplify import statement the project compiles without errors.
Please advice

To Reproduce
Steps to reproduce the behavior:

  1. Setup new vue 3 project with webpack, typescript
  2. Install aws-amplify package
  3. Add Amplify import in main.ts import { Amplify } from 'aws-amplify';
  4. Build project with npm run build
  5. See errors error.txt

Expected behavior
Project should compile without errors

Desktop (please complete the following information):

  • OS: Windows 11 Enterprise 22H2 Build 22621.4460
  • Browser -
  • Version -
  • Node v22.9.0
  • Npm v10.9.0
  • "aws-amplify": "^6.9.0"

Additional context

main.ts

import { createApp } from 'vue'
import App from './App.vue'

import { Amplify } from 'aws-amplify';

const app = createApp(App)
app.mount('#app')

package.json

{
  "dependencies": {
    "@primevue/themes": "^4.1.1",
    "aws-amplify": "^6.9.0",
    "core-js": "^3.8.3",
    "primeflex": "^3.3.1",
    "primeicons": "^7.0.0",
    "primevue": "^4.1.1",
    "vue": "^3.5.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.8",
    "sass": "^1.32.7",
    "sass-loader": "^12.6.0",
    "typescript": "~4.5.5"
  }
}
@ykethan
Copy link
Member

ykethan commented Nov 21, 2024

Hey, thanks for raising this! I'm going to transfer this over to our JS repository for better assistance 🙂

@ykethan ykethan transferred this issue from aws-amplify/docs Nov 21, 2024
@github-actions github-actions bot added the pending-triage Issue is pending triage label Nov 21, 2024
@ykethan ykethan added transferred This issue was transferred from another Amplify project and removed pending-triage Issue is pending triage labels Nov 21, 2024
@github-actions github-actions bot added the pending-maintainer-response Issue is pending a response from the Amplify team. label Nov 21, 2024
@HuiSF
Copy link
Member

HuiSF commented Nov 21, 2024

Hi @ivanovvitaly thank you for opening this issue.

I did a quick test with creating a new Vue starter app, and I couldn't reproduce this issue. I've taken the following steps:

  1. npm create vue@latest
  2. npm install aws-amplify
  3. modified main.ts using the code example you provided
  4. npm run build succeeded with the following output
❯ npm run build                   

> test-build@0.0.0 build
> run-p type-check "build-only {@}" --


> test-build@0.0.0 type-check
> vue-tsc --build --force


> test-build@0.0.0 build-only
> vite build

vite v5.4.11 building for production...
✓ 585 modules transformed.
dist/index.html                       0.43 kB │ gzip:  0.29 kB
dist/assets/AboutView-CSIvawM9.css    0.09 kB │ gzip:  0.10 kB
dist/assets/index-5dJgFXHu.css        4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-6XaiO942.js     0.23 kB │ gzip:  0.20 kB
dist/assets/index-Dsxzz0b4.js       145.63 kB │ gzip: 53.13 kB
✓ built in 854ms

In noticed that you are using @vue/cli-service which is already in the maintenance mode, and your typescript version is quite low (may have compatibility issue with @types/node (not particular the aws-amplify packages)). Could you try to upgrade your Vue tooling and try again?

@github-actions github-actions bot removed the pending-maintainer-response Issue is pending a response from the Amplify team. label Nov 21, 2024
@HuiSF HuiSF added Build Related to build issues Vue Related to Vue Framework issues question General question pending-community-response Issue is pending a response from the author or community. labels Nov 21, 2024
@ae-vivanov
Copy link

Hey @HuiSF, thanks for quick feedback! I tried clean vue 3 with vite template it builds without issues.
The initial project was setup with vue 3 with webpack .
Can I make it work with webpack?

@github-actions github-actions bot added pending-maintainer-response Issue is pending a response from the Amplify team. and removed pending-community-response Issue is pending a response from the author or community. labels Nov 21, 2024
@cwomack
Copy link
Member

cwomack commented Nov 21, 2024

@ae-vivanov, that's great to hear that it's now building without issues using Vite. We don't think webpack is the issue here, but rather Typescript. Did you also upgrade the version of typescript as well before trying the webpack build again?

@cwomack cwomack added pending-community-response Issue is pending a response from the author or community. and removed pending-maintainer-response Issue is pending a response from the Amplify team. labels Nov 21, 2024
@ivanovvitaly
Copy link
Author

@cwomack upgraded to typescript 5.6.3, compiled without errors. Thank you so much!

@github-actions github-actions bot added pending-maintainer-response Issue is pending a response from the Amplify team. and removed pending-community-response Issue is pending a response from the author or community. labels Nov 22, 2024
@cwomack
Copy link
Member

cwomack commented Nov 25, 2024

@ivanovvitaly, glad to hear that and thanks for following up and closing the issue!

@github-actions github-actions bot removed the pending-maintainer-response Issue is pending a response from the Amplify team. label Nov 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Build Related to build issues question General question transferred This issue was transferred from another Amplify project Vue Related to Vue Framework issues
Projects
None yet
Development

No branches or pull requests

5 participants