Error in Amplify installation into existing Vue/Bootstrap project: You may need an appropriate loader to handle this file type

Question

I am trying to install amplify into my vue/bootstrap project. When I add this code as it is instructed in https://docs.amplify.aws/lib/auth/getting-started/q/platform/js#create-authentication-service

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

I receive this error:

You may need an appropriate loader to handle this file type.
| }
| replaceTraps((oldTraps) => ({
|     ...oldTraps,
|     get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
|     has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop),

 @ ./~/@aws-amplify/datastore/lib-esm/storage/adapter/indexeddb.js 76:0-27
 @ ./~/@aws-amplify/datastore/lib-esm/storage/adapter/getDefaultAdapter/index.js
 @ ./~/@aws-amplify/datastore/lib-esm/storage/storage.js
 @ ./~/@aws-amplify/datastore/lib-esm/datastore/datastore.js
 @ ./~/@aws-amplify/datastore/lib-esm/index.js
 @ ./~/aws-amplify/lib-esm/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

I think there is problem in my package.json or I am missing something. So here is my package file:

{
  "name": "frontend",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run e2e"
  },
  "dependencies": {
    "@aws-amplify/ui-vue": "^0.2.13",
    "aws-amplify": "^3.0.23",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.16.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.12.9",
    "save": "^2.4.0",
    "tabletojson": "^2.0.4",
    "vue": "^2.6.11",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.3",
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "chromedriver": "^2.27.2",
    "cross-spawn": "^5.0.1",
    "nightwatch": "^0.9.12",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.0.4",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Thank you in advance!

Answer 1

I had the same problem, but I resolved it installing amplify version 1.1.4.

npm install aws-amplify@^1.1.4

I hope it is useful to you.

Answer 2

I'm having THE SAME PROBLEM! I'm also learning VueJS with Academind's Max on Udemy and I'm trying to use Amplify cuz firebase gave me other more confusing errors (he didn't get any and I follow him step by step...)

I hope that someone answers either your or my question for this because I'm really stuck and upset I can't keep practicing now :(