question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

unable to inject af-el components

See original GitHub issue

Hi Eytan, first of all, great work here, this concept can allow people to save so much time.

In the latest version (0.7.3), the views generated by the appfairy command are a bit different and I don’t know how to use child components, could you provide a snippet as an example of how to use it? if you do, I can send you a PR with an up to date example.

The HTML bit exported from webflow is as follows. I’ll call it MainView

<body class="body">
  <div af-el="prod-form" af-sock="prod-form" class="div-block-2">
    <div class="w-form">
      <form id="wf-form-Producdt-Identification-Form" name="wf-form-Producdt-Identification-Form" data-name="Producdt Identification Form">
          <label for="name">Product Name</label>
          <input type="text" class="w-input" maxlength="256" name="name" af-sock="prod-name" data-name="Name" id="name" required="">
          [...]
          <input type="submit" value="Submit" data-wait="Please wait..." af-sock="prod-submit" class="w-button">
</form>
      <div class="w-form-done">
        <div>Thank you! Your submission has been received!</div>
      </div>
      <div class="w-form-fail">
        <div>Oops! Something went wrong while submitting the form.</div>
      </div>
    </div>
  </div>

In the generated MainView, in the place of the div with af-el=prod-form it generates some lines like these

<div className="af-class-body">
  <ProdFormView.Controller-af-sock-prod-form />
       {/* [if lte IE 9]><![endif] */}
</div>

Then in MainController I did the following, according to the ‘prefetch’ tutorial

import React from 'react';
import ProdFormController from './ProdFormController';
import MainView from '../views/MainView';

export default (params) => (
  <MainView>
      <prod-form {...params} />
  </MainView>
);

when running a project with this view and controller renderd by the Router, I get an error like this:

TypeError: Property property of MemberExpression expected node to be of a type ["Identifier","PrivateName"] but instead got "StringLiteral"

Trying to find out what’s wrong, I saw the view on your example, and it’s a bit different, there the af-el element would be parsed as

<div className="__af-container-2 __af-w-container">
            <h1 className="__af-heading-3">Registered Immigration Agent in Sydney, Australia</h1>
            {proxies['contact-form'] && <ContactFormView.Controller {...proxies['contact-form']}>{proxies['contact-form'].children}</ContactFormView.Controller>}
</div>

It doesn’t look like something generated by the current version.

Could you guide me on how the new parsed views are supposed to be used?

Thanks! keep up the great work!.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
Geofflewcommented, Apr 21, 2019

I get the same error when af-el and af-sock are assigned to the same Div. Got the error even with a clean project trying to follow the original tutorial video. Couldn’t figure out how to fix it though

1reaction
DAB0mBcommented, Nov 25, 2020

af-el and af-sock can now co-exist. I fixed that.

Read more comments on GitHub >

github_iconTop Results From Across the Web

angular - unable to inject into a component? - Stack Overflow
A parameterless constructor works but when I try to inject anything the page returns a runtime error of: Can't resolve all parameters for ......
Read more >
Inject Js Script: Error HRESULT E_FAIL has been returned ...
Inject Js Script: Error HRESULT E_FAIL has been returned from a call to a COM component. If someone can help to solve this...
Read more >
Untitled
52535 toyota parts, Estate development corporation mn, Risse carceri americani ... Atlante star hotel contact, Theatro athinorama club, Afel bocoum alkibar?
Read more >
Untitled
Acute compensated heart failure, Robbie dupree steal away jimmy fallon, ... Spangas filmpjes 2012, Ww horse trailer parts sale, Batman alarm clock ...
Read more >
Human allergy to cats: A review for veterinarians on ...
One study failed to show any benefits from weekly bathing, and one other showed ... induced a strong serum IgG response after a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found