# Turbo drive with Stimulus getting "Turbo is not defined"

**URL:** <https://discuss.hotwired.dev/t/turbo-drive-with-stimulus-getting-turbo-is-not-defined/2226>\
**Category:** General\
**Created:** [February 4, 2021, 3:13pm UTC](https://discuss.hotwired.dev/t/turbo-drive-with-stimulus-getting-turbo-is-not-defined/2226 "2021-02-04T15:13:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kfk](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/kfk/32/1523_2.png) [@kfk](https://discuss.hotwired.dev/u/kfk)\
**Post date:** [February 4, 2021, 3:13pm UTC](https://discuss.hotwired.dev/t/turbo-drive-with-stimulus-getting-turbo-is-not-defined/2226/1 "2021-02-04T15:13:15Z")

</div>

I am trying to make `Turbo.visit` work inside a Stimulus controller without using a js build system like webpack.

Here is my html head:

```auto
<head>
    <script type="module">import hotwiredTurbo from 'https://cdn.skypack.dev/@hotwired/turbo';</script>
    <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
    <script src="/static/js/controllers/dropdown_controller.js"></script>
    <script src="/static/js/controllers/visit_controller.js"></script>
</head>

```

And here is my Stimulus controller:

```javascript
(() => {
    const application = Stimulus.Application.start()

    application.register("visit", class extends Stimulus.Controller {
        static get targets() {
            return ["dropdownItem", "userinput", "ddContent"]
        };
        go() {
            Turbo.clearCache();
            Turbo.visit("/hello");
        };
    })
})()

```

And I get a `Turbo is not defined`. I must be doing something wrong with the imports because the controller code is correct.

---

<div class="post-metadata">

**Author:** ![n4cr](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/n4cr/32/1504_2.png) [@n4cr](https://discuss.hotwired.dev/u/n4cr)\
**Post date:** [February 4, 2021, 4:54pm UTC](https://discuss.hotwired.dev/t/turbo-drive-with-stimulus-getting-turbo-is-not-defined/2226/2 "2021-02-04T16:54:20Z")

</div>

It seems you’re importing `hotwiredTurbo` from the package but refereing to it as `Turbo`. Perhaps do:

`import Turbo from "@hotwired/turbo"`

---

<div class="post-metadata">

**Author:** ![kfk](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/kfk/32/1523_2.png) [@kfk](https://discuss.hotwired.dev/u/kfk)\
**Post date:** [February 4, 2021, 4:59pm UTC](https://discuss.hotwired.dev/t/turbo-drive-with-stimulus-getting-turbo-is-not-defined/2226/3 "2021-02-04T16:59:11Z")

</div>

Thanks! I did the change like below but it still gives me the same error.

```auto
<head>
    <script type="module">import Turbo from 'https://cdn.skypack.dev/@hotwired/turbo';</script>
    <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
    <script src="/static/js/controllers/dropdown_controller.js"></script>
    <script src="/static/js/controllers/visit_controller.js"></script>
</head>

```

---

<div class="post-metadata">

**Author:** ![tleish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/tleish/32/920_2.png) [@tleish](https://discuss.hotwired.dev/u/tleish)\
**Post date:** [February 5, 2021, 6:30pm UTC](https://discuss.hotwired.dev/t/turbo-drive-with-stimulus-getting-turbo-is-not-defined/2226/4 "2021-02-05T18:30:13Z")

</div>

I’ve seen other suggest:

```auto
    <script type="module">
      import * as Turbo from 'https://cdn.skypack.dev/@hotwired/turbo';
      window.Turbo = Turbo;
    </script>

```

---

<div class="post-metadata">

**Author:** ![kfk](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/kfk/32/1523_2.png) [@kfk](https://discuss.hotwired.dev/u/kfk)\
**Post date:** [February 8, 2021, 8:33am UTC](https://discuss.hotwired.dev/t/turbo-drive-with-stimulus-getting-turbo-is-not-defined/2226/5 "2021-02-08T08:33:11Z")

</div>

Thank you all for your answers. I ended up implementing webpack. The docs on running w/o a build system are not yet super clear and setting up webpack was half an hour of work.

---

<div class="post-metadata">

**Author:** ![leoc](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/leoc/32/2168_2.png) [@leoc](https://discuss.hotwired.dev/u/leoc)\
**Post date:** [August 9, 2021, 5:03pm UTC](https://discuss.hotwired.dev/t/turbo-drive-with-stimulus-getting-turbo-is-not-defined/2226/6 "2021-08-09T17:03:04Z")

</div>

Thank you @tleish – this approach worked for me when trying to use _both_ Stimulus and Turbo via Skypack. Although oddly (?) given @kfk’s experience, it doesn’t seem to be necessary to do the same for Turbo at this point.

```auto
<script type="module">
  import Turbo from 'https://cdn.skypack.dev/@hotwired/turbo';
  import * as Stimulus from 'https://cdn.skypack.dev/stimulus';
  window.Stimulus = Stimulus;
</script>

```

---

<div class="post-metadata">

**Author:** ![tleish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/tleish/32/920_2.png) [@tleish](https://discuss.hotwired.dev/u/tleish)\
**Post date:** [August 9, 2021, 9:47pm UTC](https://discuss.hotwired.dev/t/turbo-drive-with-stimulus-getting-turbo-is-not-defined/2226/7 "2021-08-09T21:47:55Z")

</div>

@leoc - you are correct, starting with [v7.0.0-beta.6](https://github.com/hotwired/turbo/releases/tag/v7.0.0-beta.6) release it now sets `window.Turbo` “automatically on import to accommodate the needs of the native mobile adapters and ease of use”