Error when trying to insert a view using web API with ember template

Question

I am trying to insert a simple view and I am getting an error in the browser console:

"You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead".

I only get his error when it's a web API project with ember template and don't get it if I start from a fresh html page. Here are my codes. I put everything in app.cshtml so it's easier for people to see.

  <script>
    window.App = Ember.Application.create({

    });

    App.FinanceView = Ember.View.extend({
        templateName: 'test',
        didInsertElement: function () {
        }
    });


    App.IndexController = Ember.ObjectController.extend({
        actions: {
            test: function () {
                var divName = '.testFinance';

                var view = App.FinanceView.create();
                view.appendTo(divName);
            }
        }
    });
</script>

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    <div class="row">
        <div class="col-md-12 testFinance" align="left"></div>
    </div>
    <button {{action test}}>Test</button>
</script>

<script type="text/x-handlebars" data-template-name="test">
    this is from template
</script>

Answer 1

I finally got it using process of elimination. When using the ember template and getting ember using Nuget in Visual studio, not sure which of the two, it comes with a version of ember file in addition to ember.js and ember.min.js, is ember.debug.js. The BundleConfig uses ember.debug version in debug mode and for whatever reason, this version of ember was spitting out the error while the other two didn't.