Failed to autoload controller popper js

Using popper.js, stimulus.js, rails 6, hotwire and tailwind.

Failed to autoload controller: popper Error: Unable to resolve specifier '@popperjs/core' from http://0.0.0.0:3000/assets/controllers/popper_controller-9551ce655873804eb01eade8d7ef77bc460af5cf2da4ebeaa24dbe05675c13e0.js at throwUnresolved (es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js:472:11) at resolve (es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js:468:99) at es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js:427:26 at Array.map (<anonymous>) at es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js:426:39 at async loadAll (es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js:237:5) at async topLevelLoad (es-module-shims-c4493e644afb380789c8f0d44266900b8631ec442f8f95886997dac9f98893f1.js:256:5)

popper_controler.js:

`import { Controller } from "stimulus"; import { createPopper } from "@popperjs/core";

export default class extends Controller { static get targets() { return [ "element", "tooltip"] } static values = { placement: { type: String, default: "top" }, offset: { type: Array, default: [0, 8] }, };

connect() {
    // Create a new Popper instance
    this.popperInstance = createPopper(this.elementTarget, this.tooltipTarget, {
        placement: this.placementValue,
        modifiers: [
            {
                name: "offset",
                options: {
                    offset: this.offsetValue,
                },
            },
        ],
    });
}

show(event) {
    this.tooltipTarget.setAttribute("data-show", "");

    // We need to tell Popper to update the tooltip position
    // after we show the tooltip, otherwise it will be incorrect
    this.popperInstance.update();
}

hide(event) {
    this.tooltipTarget.removeAttribute("data-show");
}

// Destroy the Popper instance
disconnect() {
    if (this.popperInstance) {
        this.popperInstance.destroy();
    }
}

app/javascript/packs/application.js:

`// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled.

import "@hotwired/turbo-rails" import * as ActiveStorage from "@rails/activestorage" import "channels" import "../stylesheets/application.scss" import "../stylesheets/popper.scss" // require("../stylesheets/application.scss")

ActiveStorage.start()

require("trix") require("@rails/actiontext") `

spp/javascript/stylesheets/application.scss: `@tailwind base; @tailwind components; @tailwind utilities;

@import "../stylesheets/actiontext.scss";

/ block out first/last segment of background HR / section.order-workflow ol li { position: relative; flex: 1;

{ position: relative; } // blockers for left/right sides &:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 50%; background: white; } &:last-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; background: white; } } } `

hotwired / stimulus-rails

Failed to autoload controller popper js #99