Vue is not a constructor

Course Support Developing Web Interfaces For ROS
1

Hi,

I was working on the Developing Web Interfaces for ROS series and came across this error:

Uncaught TypeError: Vue is not a constructor

here is my screenshot:

Screen Shot 2022-03-16 at 14.04.54
Screen Shot 2022-03-16 at 14.04.541920×1200 228 KB

Any help would be appreciated.

2

Hi @ata2151 ,

The vue library might not be loaded properly.
Could you share the content of your index.html file?

3

Hi @marco.nc.arruda ,
Thank you for the response. here is my index.html file as requested:

<head>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
     crossorigin="anonymous">
    <!-- ROS stuff -->
    <script type="text/javascript" src="https://static.robotwebtools.org/EaselJS/current/easeljs.min.js">
    </script>
    <script type="text/javascript" src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js">
    </script>
    <script type="text/javascript" src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js">
    </script>
    <script type="text/javascript" src="https://static.robotwebtools.org/ros2djs/current/ros2d.min.js">
    </script>
    <!-- Vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue">
    </script>
</head>

<body>
    <div id="app" class="container">
        <div class="row">
            <div class="col-md-12 col-sm-6 text-center">
                <h3>Connection status</h3>
                <p class="text-danger" v-if="!connected">Not connected!</p>
                <p class="text-success" v-if="connected">Connected!</p>
                <label>ROSBridge address</label>
                <br>
                <input type="text" v-model="rosbridge_address" />
                <br><br>
                <button :disabled="loading" class="btn btn-danger" @click="disconnect"
                    v-if="connected">Disconnect!</button>
                <button :disabled="loading" class="btn btn-success" @click="connect" v-else>Connect!</button>
            </div>
            <div class="col-md-12 col-sm-6" style="overflow:auto;">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <h5>Action client data</h5>
                        <div>
                            <label>Goal</label>
                            <div>
                                <label>X</label>
                                <input type="number" v-model.number="action.goal.position.x" />
                            </div>
                            <div>
                                <label>Y</label>
                                <input type="number" v-model.number="action.goal.position.y" />
                            </div>
                            <button :disabled="!connected || action.status.status == 1" @click="sendGoal">Start</button>
                            <button :disabled="!connected || ![1].includes(action.status.status)" @click="cancelGoal">Cancel</button>
                        </div>
                        <hr />
                        <div>
                            <label class="text-muted">Feedback</label>
                            <p>Position: {{ action.feedback.position }}</p>
                            <p>State: {{ action.feedback.state }}</p>
                        </div>
                        <hr />
                        <div>
                            <label class="text-muted">Result</label>
                            <p>Succeeded? {{ action.result.success }}</p>
                        </div>
                        <hr />
                        <div>
                            <label class="text-muted">Status</label>
                            <p>{{ action.status.text }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="main.js">
    </script>
</body>

</html>

Note that the problem started after unit_05 of the course where we are asked to display the camera on the website. The problem persists in unit_12, this is the problem I have posted here.

4

Hi @ata2151 ,

Thank you for sharing, the issue is that Vue latest library has been updated, so we need to specify the version in the script tag

Please, replace the tag

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

By

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

We are updating it in the notebooks in the meantime.
Please, let me know if that works for you

2 Likes
5

This topic was automatically closed after 23 hours. New replies are no longer allowed.