Trouble getting codemod to run on my project

[samselikoff]

I tried to run this codemod on one of EmberMap's templates and I'm having trouble getting it to work. It's strange because I just used this on a different project the other day.

Here's the command I ran:

npx ember-angle-brackets-codemod http://localhost:4200 ./app/pods/about/template.hbs 

And the template seems pretty standard:

View template

{{page-info
  title='About EmberMap'
  replaceTitle=true
  description='Meet Sam and Ryan, the creators of EmberMap'}}

<div class="bg-black text-white">
  <div
    class='bg-cover lgg:bg-auto bg-center bg-no-repeat'
    style={{html-safe (concat
      "background-image: url("
      (img-url '/assets/images/about/hero.jpg')
      ")"
      )
    }}
  >
    {{#ui-container}}
      <div class="py-5">
        <div class='py-3'>
          {{#ui-p style='large narrow'}}
            We wanted a fast, easy and beautiful way to share conventional Ember.js techniques with our team.
          {{/ui-p}}
          {{#ui-p style='large narrow'}}
            So we made EmberMap.
          {{/ui-p}}
        </div>
      </div>
    {{/ui-container}}
  </div>
</div>

{{#ui-container}}
  <div class="py-5">
    <div class="mb-4">
      {{ui-title text='We love Ember'}}
      <div class="xs:flex">
        <div>
          {{#ui-p}}
            We’re strong believers in the power of conventions, and think a team that’s on board with the larger Ember community will be able to build products faster without accruing technical debt.
          {{/ui-p}}
        </div>

        <div class="xs:ml-5 mt-5 xs:mt-0 flex-grow lg:block">
          <img src="/assets/images/about/video-player.png"
               class="h-auto"
               width="320"
               height="202" />
        </div>
      </div>
    </div>

    <div class="mt-5 xs:mt-0">
      {{ui-title text="What we're making"}}
      {{#ui-p}}
        We’re creating high-quality, focused videos and articles that teams can use to onboard
        new developers, refine their process, and serve as a springboard for
        discussion on how to solve unique problems facing their own organization.
      {{/ui-p}}
    </div>
  </div>
{{/ui-container}}

<hr class="my-4 max-w-512 text-grey-light border border-t-1"/>

<div class="py-5 py-3 px-4 lg:px-0">
  <div class="text-center mb-5">
    {{#ui-title style='headline'}}
      Meet the team
    {{/ui-title}}
  </div>

  <div class="mx-auto max-w-768">

    <div class="flex items-center justify-center flex-col md:flex-row mb-6">
      <div class="p-4 mb-3 max-w-256">
        <img src="/assets/images/sam.jpg" class="rounded-full" />
      </div>

      <div class="md:ml-3">
        {{#ui-title}}
          Sam Selikoff
        {{/ui-title}}
        {{#ui-p}}
          Sam is the creator of Ember CLI Mirage, a top Ember addon. He loves teaching and helping teams effectively use Ember.
        {{/ui-p}}
        <div class="text-center md:text-left">
          <a href="https://github.com/samselikoff"
             class="inline-block pr-3 text-2 text-grey-darkest">{{fa-icon 'github' prefix="fab"}}</a>

          <a href="https://twitter.com/samselikoff"
             class="inline-block text-2 text-grey-darkest">{{fa-icon 'twitter' prefix="fab"}}</a>
        </div>
      </div>
    </div>

    <div class="flex items-center justify-center flex-col md:flex-row mb-4">
      <div class="p-4 mb-3 max-w-256">
        <img src="/assets/images/ryan.jpg" class="rounded-full" />
       </div>

      <div class="md:ml-3">
        {{#ui-title}}
          Ryan Toronto
        {{/ui-title}}
        {{#ui-p}}
          Since 2012 Ryan has shipped dozens of production Ember applications for
          both web and mobile devices, in addition to contributing code back to
          Ember.js.
        {{/ui-p}}
        <div class="text-center xs:text-left">
          <a href="https://github.com/ryanto"
             class="inline-block pr-3 text-2 text-grey-darkest">{{fa-icon 'github' prefix="fab"}}</a>

          <a href="https://twitter.com/ryantotweets"
             class="inline-block text-2 text-grey-darkest">{{fa-icon 'twitter' prefix="fab"}}</a>
        </div>
      </div>
    </div>

  </div>
</div>

<hr class="my-4 max-w-512 text-grey-light border border-t-1"/>

{{#ui-container}}
  <div class="my-6 xs:flex">
    <div class="xs:w-1/2 lg:w-auto">
      {{ui-title text='Open source work'}}
      {{#ui-p}}
        We believe open source is at the heart of the
        Ember community's success. This is why our videos focus on
        open-source solutions, and why we support projects like
        <a href="http://www.ember-cli-mirage.com/"
           class="text-em-orange no-underline">Ember CLI Mirage</a>.
      {{/ui-p}}
    </div>

    <div class="xs:w-1/2 lg:w-auto xs:pl-5 mt-5 xs:mt-0 text-center xs:text-left">
      {{ui-title text='Follow us'}}
      <div>
        <a href="https://github.com/embermap"
           class="inline-block w-64 mr-4">
          <img src="/assets/images/social/github.png"/>
        </a>

        <a href="https://twitter.com/ember_map"
           class="inline-block w-64 mr-4">
          <img src="/assets/images/social/twitter.png"/>
        </a>

        <a href="https://medium.com/embermap"
           class="inline-block w-64">
          <img src="/assets/images/social/medium.png"/>
        </a>
      </div>
    </div>
  </div>
{{/ui-container}}

The codemod runs then says that there was 1 unmodified file. There were some errors.

View terminal output

npx ember-angle-brackets-codemod http://localhost:4200 ./app/pods/about/template.hbs Downloading Chromium r686378 - 110.2 Mb [====================] 100% 0.0s 
error evaluating `@fortawesome/free-brands-svg-icons`: Cannot read property 'proto' of undefined
error evaluating `@fortawesome/free-solid-svg-icons`: Cannot read property 'proto' of undefined
error evaluating `@fortawesome/pro-regular-svg-icons`: Cannot read property 'proto' of undefined
error evaluating `ember-cli-mirage/db-collection`: Cannot set property default of #<Object> which has only a getter
error evaluating `ember-composable-helpers/-private/closure-action`: Cannot read property 'proto' of null
error evaluating `ember-map/components/code-snippet`: Could not find module `highlight.js` imported from `(require)`
error evaluating `ember-map/ember-focus-method/tests/app.lint-test`: QUnit is not defined
error evaluating `ember-map/pods/components/md-text/component`: Could not find module `ember-remarkable/components/md-text` imported from `ember-map/pods/components/md-text/
component`
error evaluating `ember-map/styles/tailwind`: module is not defined
error evaluating `ember-map/tests/mirage/mirage.lint-test`: QUnit is not defined
Processing 1 files... 
Spawning 1 workers...
Sending 1 files to free worker...
All done. 
Results: 
0 errors
1 unmodified
0 skipped
0 ok
Time elapsed: 9.506seconds 

Would appreciate any tips on how to go about debugging this!

[tylerturdenpants]

@samselikoff if I remember you use pods for EmberMap. The codemod does not support pods layout.

[tylerturdenpants]

My apologies that this is not in the readme. I will update it.

[samselikoff]

Oh wow that’s surprising. Even if I point at a specific file? Does it have to do with the resolver?

Is there a manual way to run it on a pods app?

[rajasegar]

@samselikoff Just throwing it from the top of my head, will this help

find ./app/pods -name "*.hbs" | xargs npx ember-angle-brackets-codemod http://localhost:4200

I haven't tried it.

[samselikoff]

The thing is I originally ran this

npx ember-angle-brackets-codemod http://localhost:4200 ./app/pods/about/template.hbs 

so I already pointed to an individual file, so I don't think that's it. Think it's something else in the code.

[tylerturdenpants]

There is also the issue with telemetry. Some of the logic works only with non-pod structures to determine helpers and components. The good news however is I am working on reducing the need to rely on telemetry and file paths to more of a “type of invocation” to figure out what is component/helper.

In regards to single file, it should work, but again the telemetry will likely block you.

[boskokuzmanovic]

Oh wow that’s surprising. Even if I point at a specific file? Does it have to do with the resolver?

Is there a manual way to run it on a pods app?

@samselikoff In order to use it with pods you'll have to use 1.4.12 version

You can install it locally like:

npm install --save https://github.com/ember-codemods/ember-angle-brackets-codemod/archive/v1.4.12.tar.gz

After that you can run it like:

npx ember-angle-brackets-codemod angle-brackets ./app/pods/about/template.hbs

And if you set config file correctly you'll be able to update some folder with templates at once

[eelke]

I ran into the problem as well, after Installing 1.4.12 I combined everything above into the following command, which worked for me:

yarn add https://github.com/ember-codemods/ember-angle-brackets-codemod/archive/v1.4.12.tar.gz
and
find ./app/pods -name "*.hbs" | xargs npx ember-angle-brackets-codemod angle-brackets.

Edit: I needed to remove the codemod from package.json afterwards, as running the server failed with an error: The "id" argument must be of type string. Received type undefined

[tomwayson]

I'm just curious, b/c I see both of the above examples mention ./app/pods, does that mean this codemod won't work only if you are using podModulePrefix, or will it not work are using pods at all (i.e. usePods: true).

[rwjblue]

I believe that the codemod cannot infer anything from telemetry when pods structure is in use.

[tomwayson]

Thank you.

So if #287 lands podModulePrefix users should be able to run:

npx ember-angle-brackets-codemod --no-telemetry ./app/pods/**/*.hbs 

or non podModulePrefix users like myself should be able to run:

npx ember-angle-brackets-codemod --no-telemetry ./app/**/*.hbs 

right?

[rwjblue]

Yes, I think that is correct.

[runspired]

@rwjblue is there anything fundamentally preventing this codemod from being used with pods with telemetry or is it just a matter of someone putting in the work?

[tylerturdenpants]

@runspired I know I'm not @rwjblue 😂 but the transform "should work" now since we infer as much as possible without using telemetry. I believe you can use the --no-telemetry on pods to get this to work. There are some caveats. Some helpers may need to be put in a skip config if it is too ambiguous to determine if they are a component. Additionally there is some limitation on converting some block parameters ( @Turbo87 has better detection code in ember-template-lint ) that would be awesome to port here.

I ran this on a 700+ file codebase with minimal interaction. I hope this helps.

[yuriyaran]

npx ember-angle-brackets-codemod --no-telemetry ./app/pods/**/*.hbs 

thanks, @tomwayson! worked for my app with pods structure like a charm 👍

[ijlee2]

For those who land on this issue, I wrote a codemod to un-pod Ember projects. Feel free to give it a try.