Amplify安装到现有Vue / Bootstrap项目中的错误：您可能需要适当的加载器来处理此文件类型

问题描述

我正在尝试将放大安装到我的vue / bootstrap项目中。当我按照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);

我收到此错误：

You may need an appropriate loader to handle this file type.
| }
| replaceTraps((oldTraps) => ({
|     ...oldTraps,|     get: (target,prop,receiver) => getMethod(target,prop) || oldTraps.get(target,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

我认为我的package.json中有问题，或者我丢失了一些东西。这是我的打包文件：

{
  "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"
  ]
}

提前谢谢！

解决方法

我遇到了同样的问题！我也在Udemy上与Academind's Max一起学习VueJS，并且尝试使用Amplify cuz firebase给我带来了其他更令人困惑的错误（他没有得到任何错误，我会一步一步地跟着他...）

我希望有人回答您的问题或我的问题，因为我真的被困住了，心烦意乱，现在不能继续练习了：（

,

我遇到了同样的问题，但是我安装了放大版本1.1.4解决了该问题。

npm install aws-amplify@^1.1.4

我希望它对您有用。