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

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

{{#ui-container}}

{{#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}}

{{/ui-container}}

{{#ui-container}}

{{ui-title text='We love Ember'}}

{{#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}}

{{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}}

{{/ui-container}}

---

{{#ui-title style='headline'}} Meet the team {{/ui-title}}

{{#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}}

{{fa-icon 'github' prefix="fab"}} {{fa-icon 'twitter' prefix="fab"}}

{{#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}}

{{fa-icon 'github' prefix="fab"}} {{fa-icon 'twitter' prefix="fab"}}

---

{{#ui-container}}

{{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 Ember CLI Mirage. {{/ui-p}}

{{ui-title text='Follow us'}}

{{/ui-container}} ```

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

View terminal output

```sh 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 #

[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.