CommonJS generated components are not usable

[johnpc]

I have a component with the following definition:

{
  "name": "Frame",
  "children": [
    {
      "children": [],
      "name": "Frame2",
      "componentType": "Box",
      "properties": {
        "width": {
          "value": "133px"
        },
        "height": {
          "value": "55px"
        },
        "padding": {
          "value": "0px 0px 0px 0px"
        },
        "backgroundColor": {
          "value": "rgb(255,255,255)"
        }
      },
      "overrides": {},
      "variants": []
    }
  ],
  "id": "7:6",
  "bindingProperties": {},
  "componentType": "Box",
  "properties": {
    "width": {
      "value": "291px"
    },
    "height": {
      "value": "158px"
    },
    "padding": {
      "value": "0px 0px 0px 0px"
    },
    "backgroundColor": {
      "value": "rgb(255,255,0)"
    }
  },
  "overrides": {},
  "variants": []
}

I run this through codegen with the following config:

new AmplifyRenderer(component, {
    module: ModuleKind.CommonJS,
    target: ScriptTarget.ES2015,
    script: ScriptKind.JS,
  })

The resulting code looks like this:

/***************************************************************************
 * The contents of this file were generated with Amplify Studio.           *
 * Please refrain from making any modifications to this file.              *
 * Any changes to this file will be overwritten when running amplify pull. *
 **************************************************************************/

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable */
const react_1 = require("react");
const ui_react_1 = require("@aws-amplify/ui-react");
function Frame1(props) {
  const {} = props;
  return react_1.default.createElement(
    ui_react_1.View,
    Object.assign(
      {
        width: "291px",
        padding: "0px 0px 0px 0px",
        backgroundColor: "rgb(255,255,0)",
        height: "158px",
      },
      props,
      ui_react_1.getOverrideProps(props.overrides, "Box")
    ),
    react_1.default.createElement(
      ui_react_1.View,
      Object.assign(
        {
          width: "133px",
          padding: "0px 0px 0px 0px",
          backgroundColor: "rgb(255,255,255)",
          height: "55px",
        },
        ui_react_1.getOverrideProps(props.overrides, "Box.Box")
      )
    )
  );
}
exports.default = Frame1;

When imported into my react app, I get the following error:

TypeError: Cannot read properties of undefined (reading 'createElement')

  11 | const ui_react_1 = require("@aws-amplify/ui-react");
  12 | function Frame1(props) {
  13 |   const {} = props;
> 14 |   return react_1.default.createElement(
  15 |     ui_react_1.View,
  16 |     Object.assign(
  17 |       {

[johnpc]

Actually this might just be me being dumb - I tried to npm install @aws-amplify/ui-react, but it does not seem to export a lot of what's needed for the code to work - specifically View and getOverrideProps

What version of this library do I need to be using?

[cwoolum]

The UI Components team just published them as @aws-amplify/ui-react@next. That should have everything you need. If not, talk to @hvergara

[johnpc]

Beautiful, that works!

[johnpc]

Actually never mind, it doesn't work. I am seeing this error:

[hvergara]

are you using the dev tarballs? package names should be @aws-amplify/ui-react-next and @aws-amplify/ui-next instead

[dpilch]

This seems to be a React issue when transpiling to ES5. As a work around for now you can use ES6.

Could you try manually updating the generated component to remove the default after react_1 and see if that works?

[johnpc]

Removing .default fixed it! I'll leave this open to track the fix on your end, but for now I'll use ES6 as you suggested.

[frimfram]

what is the JSON that goes with this problem - JSON would be great because then I can run it in my test program.

[johnpc]

The json is in the description

[johnpc]

@dpilch - it does not work with even the latest ES versions. Same issue.

[dpilch]

You will likely need to change the module type (or omit) on the render config as well.

new AmplifyRenderer(component, {
  module: ModuleKind.ESNext,
  target: ScriptTarget.ES2017,
  script: ScriptKind.JS,
})

The typescript transpiler we are using underneath seems to ignore other settings if CommonJS is set. We can add errors for that in the future.

[renebrandel]

Asana tracking link: https://app.asana.com/0/1200599634514309/1200993480703740/f