Как использовать AWS Amplify с Sapper? - PullRequest
1 голос
/ 14 октября 2019

Моя цель - использовать AWS Amplify в Sapper проекте.

Создание проекта Sapper с нуля (с помощью веб-пакета), затем добавление AWS Amplify и запуск егов dev это успех, но при запуске его в рабочем режиме выдается ошибка GraphQL в консоли ( Uncaught Error: невозможно использовать e "__Schema" из другого модуля или области ).

Исправление этой ошибкиеще один ( Uncaught ReferenceError: процесс не определен ).

Решением является обновление GraphQL с 0.13.0 до 14.0.0, к сожалению, GraphQL 0.13.0 является зависимостью AWS Amplify API.

Кто-нибудь знает, что можно сделать, чтобы AWS Amplify работал с Sapper в рабочей среде?

Ссылка на репозиторий с исходными файлами находится здесь: https://github.com/ehemmerlin/sapper-aws-amplify


(извиняюсь за длинный пост, но я хочу быть явным)

Подробные шаги

1 / Создать проект Sapperс помощью веб-пакета (https://sapper.svelte.dev).

npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app
yarn install

2 / Добавить AWS Amplify (https://serverless -stack.com / chapters / configure-aws-ampify.html ) и lodash

yarn add aws-amplify
yarn add lodash

3 / Настройка AWS Amplify (https://serverless -stack.com/chapters/configure-aws-amplify.html)

Создать src / config / aws.js файл конфигурации, содержащий (измените значения с вашим, но работает как естьдля целей данного поста):

export default {
  s3: {
    REGION: "YOUR_S3_UPLOADS_BUCKET_REGION",
    BUCKET: "YOUR_S3_UPLOADS_BUCKET_NAME"
  },
  apiGateway: {
    REGION: "YOUR_API_GATEWAY_REGION",
    URL: "YOUR_API_GATEWAY_URL"
  },
  cognito: {
    REGION: "YOUR_COGNITO_REGION",
    USER_POOL_ID: "YOUR_COGNITO_USER_POOL_ID",
    APP_CLIENT_ID: "YOUR_COGNITO_APP_CLIENT_ID",
    IDENTITY_POOL_ID: "YOUR_IDENTITY_POOL_ID"
  }
};

Добавьте следующий код к существующему коду в src / client.js :

import config from './config/aws';

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REGION,
    userPoolId: config.cognito.USER_POOL_ID,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.APP_CLIENT_ID
  },
  Storage: {
    region: config.s3.REGION,
    bucket: config.s3.BUCKET,
    identityPoolId: config.cognito.IDENTITY_POOL_ID
  },
  API: {
    endpoints: [
      {
        name: "notes",
        endpoint: config.apiGateway.URL,
        region: config.apiGateway.REGION
      },
    ]
  }
});

4 / Testэто

в dev (пряжа с прогоном dev): работает

в производстве (сборка с пряжей;узел __sapper __ / build): выдает ошибку.

Uncaught Error: Cannot use e "__Schema" from another module or realm.
Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.
https://yarnpkg.com/en/docs/selective-version-resolutions
Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

5 / исправляет ее

По указанной ссылке (https://yarnpkg.com/en/docs/selective-version-resolutions) я добавил этот код в файл package.json:

  "resolutions": {
    "aws-amplify/**/graphql": "^0.13.0"
  }

6 / Test it

rm -rf node_modules; yarn install

Выдает еще одну ошибку в консоли (даже в режиме разработки).

Uncaught ReferenceError: process is not defined
at Module../node_modules/graphql/jsutils/instanceOf.mjs (instanceOf.mjs:3)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/type/definition.mjs (definition.mjs:1)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/type/validate.mjs (validate.mjs:1)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/graphql.mjs (graphql.mjs:1)
at \_\_webpack_require\_\_ (bootstrap:63)
at Module../node_modules/graphql/index.mjs (main.js:52896)
at \_\_webpack_require\_\_ (bootstrap:63)

Исправление, данное этимпоток (https://github.com/graphql/graphql-js/issues/1536) - к сожалению, обновление GraphQL с 0.13.0 до 14.0.0. GraphQL 0.13.0 - это зависимость AWS Amplify API.

1 Ответ

0 голосов
/ 23 октября 2019

При сборке моего проекта (я использую npm и webpack) я получил это предупреждение,

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults 
for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

, которое, по-видимому, связано с ошибкой схемы, поскольку эти посты указывают, что самое быстрое исправление дляошибка заключается в установке NODE_ENV в production в вашей среде (mode в конфигурации веб-пакета задается для переменной среды NODE_ENV):

https://github.com/aws-amplify/amplify-js/issues/1445

https://github.com/aws-amplify/amplify-js/issues/3963

Как это сделать:

Как настроить NODE_ENV для производства / разработки в OS X

Как установить NODE_ENV = productionв Windows?

Или вы можете напрямую связываться с конфигурацией веб-пакета:

https://gist.github.com/jmannau/8039787e29190f751aa971b4a91a8901

К сожалению, некоторые сообщения в этих проблемах GitHub указывают на изменение переменных средыможет не сработать для упакованного приложения, особенно для мобильных устройств.

Эти сообщения предполагают, что отключение mangler может быть следующим лучшим решением:

https://github.com/graphql/graphql-js/issues/1182

https://github.com/rmosolgo/graphiql-rails/issues/58


Для тех, кто просто пытается получить базовый набор Sapper и AmplifyЧтобы воспроизвести эту ошибку или иным образом, я создаю свой с:

npm install -g @aws-amplify/cli

npx degit "sveltejs/sapper-template#webpack" my-app

npm install

npm install aws-amplify

npm install lodash (Похоже, это нужно для усиления с помощью веб-пакета)

amplify configure

npm run build

amplify init (среда разработки, VS код, javascript, без фреймворка, каталог src, каталог распространения __sapper__\build, профиль AWS по умолчанию. Это генерирует aws-exports.js.

In src/client.js:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

npm run build

...