search

shakacode / shakapacker

Use Webpack to manage app-like JavaScript modules in Rails
MIT License
414 stars 91 forks source link

What should I do about `Module not found: Error: Can't resolve '@hotwired/stimulus-loading'` #133

Closed jasonfb closed 2 years ago

jasonfb commented 2 years ago

I realize it is mixing separate paradigms but I have some sections of my app using Stimulus and want to mix Rails 7 stimulus + Turbo defaults with react_on_rails (not in the same sections of the app which I realize would be a little crazy)... I just happen to want both in the same app.

my application.js file is like so:

// this was the default Rails setup
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"

// added from Shakapacker docs with modifications for my React component 'Logo'
import React from 'react';
import {createRoot } from 'react-dom/client';
import Logo from './components/basic_elements/logo/Logo';

const container = document.getElementById('root');
const root = createRoot(container);

document.addEventListener('DOMContentLoaded', () => {
  root.render(<Logo name="World" />);
});

In addition to the standard install instructions, I had to add @hotwired/turbo-rails, @hotwired/stimulus, and styled-components using yarn

However, i seem to be stuck on this one: when I run bin/webpacker-dev-server

ERROR in ./app/javascript/controllers/index.js 4:0-70
Module not found: Error: Can't resolve '@hotwired/stimulus-loading' in '/Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/controllers'

this SO post says that this node package ('@hotwired/stimulus-loading') was built for importmap, and I should try @hotwired/stimulus-webpack-helpers. I attempted to add this with yarn add @hotwired/stimulus-webpack-helpers but it does not solve the issue.

FWIW, my intention for this app was not to use importmap but I will use it in parallel with shakapacker assuming that not a terrible idea(?) and the path of least resistance. what do you think?

Ruby version: 3.1.2 Node Version: 16.13.1 Rails version: 7.0.3 Webpacker version: 6.3 via 6.2.1 upgrade using workaround from ISSUE#123

FULL ERROR:

% bin/webpacker-dev-server                   
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3035/, http://127.0.0.1:3035/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
assets by path static/ 22.3 KiB
  asset static/Refactor-spinner-0_290x290-bc16e4b5dbd527ac51d0.png 17.4 KiB [emitted] [immutable] [from: app/javascript/images/Refactor-spinner-0_290x290.png] (auxiliary name: application)
  asset static/120-deg-arrow1-1cba889ed3cfce3ce26b.svg 1.49 KiB [emitted] [immutable] [from: app/javascript/images/120-deg-arrow1.svg] (auxiliary name: application)
  asset static/120-deg-arrow2-b6402b9ca3a35e39af6e.svg 1.4 KiB [emitted] [immutable] [from: app/javascript/images/120-deg-arrow2.svg] (auxiliary name: application)
  asset static/right-arrow-f71b9a76417162cf96db.svg 1.03 KiB [emitted] [immutable] [from: app/javascript/images/right-arrow.svg] (auxiliary name: application)
  asset static/120-deg-arrow3-19ff131865d761915c9f.svg 980 bytes [emitted] [immutable] [from: app/javascript/images/120-deg-arrow3.svg] (auxiliary name: application)
assets by path js/*.js 1.56 MiB
  assets by chunk 1.52 MiB (id hint: vendors)
    asset js/vendors-node_modules_hotwired_stimulus_dist_stimulus_js-node_modules_hotwired_turbo-rails_app-4383ca.js 1.49 MiB [emitted] (id hint: vendors) 1 related asset
    asset js/actioncable.chunk.js 29.5 KiB [emitted] (name: actioncable) (id hint: vendors) 1 related asset
  asset js/application.js 23.1 KiB [emitted] (name: application) 1 related asset
  asset js/runtime.js 12.5 KiB [emitted] (name: runtime) 1 related asset
asset manifest.json 1.51 KiB [emitted]

ERROR in ./app/javascript/controllers/index.js 4:0-70
**Module not found: Error: Can't resolve '@hotwired/stimulus-loading' in** '/Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/controllers'
resolve '@hotwired/stimulus-loading' in '/Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/controllers'
  Parsed request is a module
  using description file: /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/package.json (relative path: ./app/javascript/controllers)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript
        single file module
          using description file: /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/package.json (relative path: ./app/javascript/@hotwired/stimulus-loading)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/@hotwired/stimulus-loading doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/@hotwired/stimulus-loading.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/@hotwired/stimulus-loading.jsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/@hotwired/stimulus-loading.mjs doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/@hotwired/stimulus-loading.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/@hotwired/stimulus-loading.tsx doesn't exist
            .coffee
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/@hotwired/stimulus-loading.coffee doesn't exist
        /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/@hotwired/stimulus-loading doesn't exist
      /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/controllers/node_modules doesn't exist or is not a directory
      /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/javascript/node_modules doesn't exist or is not a directory
      /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/app/node_modules doesn't exist or is not a directory
      looking for modules in /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/node_modules
        single file module
          using description file: /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/package.json (relative path: ./node_modules/@hotwired/stimulus-loading)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/node_modules/@hotwired/stimulus-loading doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/node_modules/@hotwired/stimulus-loading.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/node_modules/@hotwired/stimulus-loading.jsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/node_modules/@hotwired/stimulus-loading.mjs doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/node_modules/@hotwired/stimulus-loading.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/node_modules/@hotwired/stimulus-loading.tsx doesn't exist
            .coffee
              Field 'browser' doesn't contain a valid alias configuration
              /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/node_modules/@hotwired/stimulus-loading.coffee doesn't exist
        /Users/jason/Work/_LEARNING/ReactOnRails/HelloShakapackerRails7C/node_modules/@hotwired/stimulus-loading doesn't exist
      /Users/jason/Work/_LEARNING/ReactOnRails/node_modules doesn't exist or is not a directory
      /Users/jason/Work/_LEARNING/node_modules doesn't exist or is not a directory
      /Users/jason/Work/node_modules doesn't exist or is not a directory
      /Users/jason/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

webpack 5.72.1 compiled with 1 error in 593 ms

This is reproduced here:

https://github.com/jasonfb/HelloShakapakerRails7C

tomdracz commented 2 years ago

Hey @jasonfb

Your problem is in the import "controllers" line. It loads https://github.com/jasonfb/HelloShakapakerRails7C/blob/main/app/javascript/controllers/index.js and it does some magic with import maps. Not sure how this all works, not using import maps. I've got an app that does what you're trying to do though!

Have a look at annotated PR here https://github.com/jasonfb/HelloShakapakerRails7C/pull/1 this should get you going!

tomdracz commented 2 years ago

As a side note, not using import maps is a perfectly viable solution. I would advise against mixing and matching the two. You'll be likely in world of pain trying to get them to play nicely 😂

If you're set on Shakapacker - use it as your bundler and pull in your bundles using _pack_tag helpers. Probably work removing the rails importmap stuff also - config, view helpers etc