StencilJS + AWS Amplify & AWS AppSync: StencilJS show stopper !

[cptflammin]

Hi Ionic team,
AWS made some great effort to enable AWS Amplify and AppSync to be usable with Ionic+Angular. Works fine

While trying to move to StencilJS, unfortunately AWS Amplify & AppSync doesn't work properly.

import {Auth} from 'aws-amplify';
import AWSAppSyncClient, {AUTH_TYPE} from 'aws-appsync';
import awsmobile from '../aws-exports';

this.client = new AWSAppSyncClient({
      url: awsmobile.aws_appsync_graphqlEndpoint,
      region: awsmobile.aws_appsync_region,
      auth: {
        type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
        // for every single request, the AppSync client will await for the promise you return in
        // jwtToken function will be executed once per request and the token will be always fresh (Amplify internally handles the refresh for you)
        jwtToken: async () => (await Auth.currentSession()
          .then(data => {
            return data.getIdToken().getJwtToken();
          })
          .catch(err => {
            return err;
          })),
        // jwtToken: async () => (await Auth.currentSession()).getAccessToken().getJwtToken(),
      },
    });

Problem solved:

 For the import "buffer" to be bundled from
           commonjs-external:buffer, ensure the
           "rollup-plugin-node-builtins" plugin and
           "rollup-plugin-node-globals" plugin is installed and added to the
           stencil config plugins. Please see the bundling docs for more
           information.

=> added builtins and globals in stencil.config.ts:
export const config: Config = {
plugins: [
builtins(), // only needed if using node types
globals(),
],

Remaining problem

app.core.js:1834 TypeError: Cannot read property 'memoizedProperty' of undefined
at fl-agenda-page.md.entry.js:733 "http://localhost:3334/build/app/fl-agenda-page.md.entry.js"

To note, aws-sdk-js is causing troubles with StencilJS as well

You referenced in the past AWS Amplify, did you try Stencil + Ionic + AWS Amplify/AppSync ?

[cptflammin]

I found this concerning memoizedProperty according to aws/aws-sdk-js#1769 and implemend that ionic-team/ionic-app-scripts#130 in app-root.tsx

declare const AWS:any;
console.log(AWS);
let appSync = new AWS.AppSync({
  endpoint: awsmobile.aws_appsync_graphqlEndpoint,
});

This work for aws-sdk but is ugly and does not work for amplify-js and aws-mobile-appsync-sdk-js

Any idea on this ? I can try based on your input and post outcome here with code samples

[cptflammin]

@mhartington
Steps to reproduce issue, seems related to the underlying aws-sdk-js used by AWS Amplify but there may be something specifically related to rollup used by Stencil ?
@dotNetkow you referenced Amplify in your blog post, do you have contacts with AWS team to solve this issue ? https://blog.ionicframework.com/adding-aws-amplify-to-an-ionic-4-app/

using node v10.15.3 LTS

npm init stencil
=> Pick a starter: ionic-pwa
=> project name: amplify-goes-stenciljs

cd amplify-goes-stenciljs
npm i @stencil/core@latest --save-exact
npm i --save aws-amplify
npm i @types/node --save-dev
npm i rollup-plugin-node-builtins --save-dev
npm i rollup-plugin-node-globals --save-dev

Modify stencil.config.js:

import { Config } from '@stencil/core';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';

export const config: Config = {
  outputTargets: [{
    type: 'www',
  }],
  plugins: [
    builtins(),
    globals(),
  ],
  nodeResolve: {browser: true},
  globalScript: 'src/global/app.ts',
  globalStyle: 'src/global/app.css'
};

amplify init
amplify auth add (default config, all enter key press)
amplify push

In app-root.tsx, top of the file add:

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

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "esnext",
    "declaration": true, // false
    "strict": true,
    "removeComments": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
  },
  "include": [
    "src/**/*"
  ]
}

npm run start

In Chrome:

[ ERROR ]  Rollup: Illegal Reassignment: node_modules/aws-sdk/lib/browser_loader.js:64:2
           Error parsing:
           /Users/nico_fl/Development/amplify-goes-stenciljs/node_modules/aws-sdk/lib/browser_loader.js,
           line: 64, column: 2