Cannot load TSLint rule and error instantiating Container

[aguacatedan]

Hi,

Setup is:

• Windows 10
• AEM 6.2
• Latest Archetype
• aem-react 4.3 (updated it manually in package.json)

I'm facing the following errors in tslint.json: Cannot load rule "label-undefined". Internal error while loading the rule with embedded TSLint 5.2.0: Rule is not a function. this happens for the following rules:

• "label-undefined": true
• "no-constructor-vars": true
• "no-duplicate-key": true
• "no-unreachable": true
• "use-strict": [ true, "check-module", "check-function" ]

Also, I'm seeing the following error in client.tsx and server.tsx: Supplied parameters do not match any signature of call target. in this line of code (14): let container: Container = new Container();

I'm no typescript expert, but I'm guessing the tslint rule no-constructor-vars could potentially solve the errors in client.tsx and server.tsx.

I tried updating tslint to a newer version but it requires me to update typescript to 2.1 at least and that breaks things even more.

I also tried taking the rules out of tslint.json and setting the constructor parameter as optional and that solved the errors in client.tsx and server.tsx. Like so: constructor(cqx?: Cq); in Container.d.ts

But now I get this error in the web console: Uncaught ReferenceError: Cqx is not defined here:

I'm guessing it's because of the change I made in Container.d.ts so I reverted all changes and I'm back to the errors in tslint.json, client.tsx and server.tsx

Another thing I want to point out is that in the React panel in web tools says waiting for roots to load and doesn't show anything. The webpage itself presents all data. I even manage to edit content, remove components and got a new component showing in the Sidekick but it doesn't render when dragged and dropped.

Please advice and thanks in advance.

[stemey]

Thanks, I will have a look at the tslint problems. In general tslint errors are just coding style issues, so I don't think it is a blocker.

If you see waiting for roots to load in the webconsole, then you are in the author mode. React components are not instantiated in the browser for the author mode because of interference with the existing AEM javascript and dom manipulations. Append ?wcmmode=disabledto your url to disable the author mode. Then the components will be present in the react dev tools.

[aguacatedan]

Ok I managed to get everything working. Here's what I did:

1. Got rid of tslint rules with errors.
2. Update server.tsx and client.tsx: new Container({} as any);. That line of code is outdated in the maven archetype, but not in the demo project.
3. Update components resourceType value to point to my apps folder.

I believe those changes can be implemented in a future archetype release.

[stemey]

Thanks, will update archetype.