Ember - Compile Error: bs-form-element is not a helper

Question

Recently i update my existing ember ember project to 2.10.0 version after update i try to run the project but it shows some compile error

uncaught Error: Compile Error: bs-form-element is not a helper

I include this in login page on my project like this

 <div class="panel-body">
                {{#bs-form formLayout="vertical" model=this action="loginAction" class="form-signin"}}
                    <fieldset>
                        {{bs-form-element controlType="text" placeholder="Bank ID" property="userid" value=userid elementId="userid" required="required" autofocus="autofocus" style="text-align:left" maxlength="7"}} 
                        {{bs-form-element controlType="password" placeholder="Password" property="password" value=password elementId="password" required="required" style="text-align:left" maxlength="10"}}
                        <!--div class="checkbox">
                            <label>
                                <input name="remember" type="checkbox" value="Remember Me">Remember Me
                            </label>
                        </div-->
                        {{bs-button defaultText="Login" class="btn btn-lg btn-primary btn-block" buttonType="submit" }}
                    </fieldset>
                {{/bs-form}}
            </div>

I am not sure whether this is plugin related issue or something could some one please help to sort this issue

Answer 1

Ember throws this error if there is no component or helper with the given name found in your project or your dependent addon's.

Check your package.json and the version of ember-bootstrap. I think your app used pre 1.0, because bs-form-element is old api.

Maybe the addon was updated accidentally to >= 1.0, while updating ember.

Answer 2

Another possible oversight to check for, specific to ember-bootstrap and black/white lists, is accidentally including or excluding the needed component from the black/white lists. For example, if you're using a whitelist, make sure the needed component is referenced in it:

// ember-cli-build.js
'ember-bootstrap': {
    'whitelist': [
        'bs-form'
    ],
}