Closed sebastianiorga closed 2 years ago
dhh
commented
3 years ago Ah yes. Problem is that we assume we're running in a jsbundling app, but don't actually enforce that. Need to enforce adding a jsbundler when using this. Doesn't work with import maps (and doesn't make sense, since you've already added node).
sebastianiorga
commented
3 years ago Right, I was wondering how it would handle the js part of bootstrap. Adding esbuild manually doesn't seem to fix it, since esbuild just errors. On the same app as above I do the jsbundling install steps
./bin/rails javascript:install:esbuild
yarn buildI get (among the rest of the log)
| yarn run v1.22.11
17:05:49 css.1 | $ sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch
17:05:49 js.1 | $ esbuild app/javascript/*.* --bundle --outdir=app/assets/builds --watch
17:05:49 js.1 | > app/javascript/application.js:2:7: error: Could not resolve "@hotwired/turbo-rails" (mark it as external to exclude it from the bundle)
17:05:49 js.1 | 2 │ import "@hotwired/turbo-rails"
17:05:49 js.1 | ╵ ~~~~~~~~~~~~~~~~~~~~~~~
17:05:49 js.1 |
17:05:49 js.1 | > app/javascript/application.js:3:7: error: Could not resolve "controllers" (use "./controllers" to reference the file "app/javascript/controllers/index.js")
17:05:49 js.1 | 3 │ import "controllers"
17:05:49 js.1 | ╵ ~~~~~~~~~~~~~
17:05:49 js.1 |
17:05:49 js.1 | 2 errors
17:05:49 js.1 | [watch] build finished, watching for changes...However a fresh install rails new css_alpha_test --css bootstrap -j esbuild works fine.
OK it all makes more sense now, I think I was just confused. So for pure JS dependencies, we could pull them with importmap from a CDN. If we want to include pure CSS dependencies we'd need to use cssbundling. And if there are mixed css and js dependencies like bootstrap, we need to switch fully from importmap to css/jsbundling?
Also plain fresh rails app just errors in Firefox(I assume this is because a shim is needed?
Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”. messages:28:7
Uncaught SyntaxError: unexpected token: identifier
b9c3fc59-e9b7-4440-9662-af9687afa6ed:1:24
Uncaught SyntaxError: unexpected token: identifier
d0bca922-dba7-4d0b-9c60-802ae8814c2d:1:25
```
It still errors if I add
<script async src="https://unpkg.com/es-module-shims@0.14.0/dist/es-module-shims.js"></script>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
Is it worth making obvious sort of issues like this as I test things out for myself next week or are you guys already gonna catch this type of setup stuff? Don't wanna just spam the tracker with trivialities.Closing via https://github.com/rails/rails/pull/43600
vknightbd
commented
1 year ago I don't have a Firefox issue, but my error output was identical to the one posted by sebastianiorga. I was running into a Bootstrap issue for months and I finally just fixed it just now. (My initial project did not have css set up; nor did my system have yarn installed initially.) I ran bin/setup and it seemed to get me farther, but I was still stuck with that esbuild error.
For posterity, anyone else having this Could not resolve "@hotwired/turbo-rails" and Could not resolve "controllers" error. This is how I fixed it on my system.
Create a fresh install as per sebastianiorga: rails new css_alpha_test --css bootstrap -j esbuild
@hotwired/turbo-rails"controllers" to "./controllers"I'm guessing when manually installing via bin/rails css:install:bootstrap, the installation forgets to add in the npm turbo-rails dependencies.
jmvbxx
commented
1 year ago Looks like this is still an ongoing issue. Here's my output:
$ yarn add @hotwired/turbo-rails
yarn add v1.22.19
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@hotwired%2fturbo-rails: connect ENETUNREACH 2606:4700::6810:1723:443".Here is the output in yarn-error.log:
Arguments:
/usr/bin/node /usr/bin/yarn add @hotwired/turbo-rails
PATH:
/home/jason/.rbenv/plugins/ruby-build/bin:/home/jason/.rbenv/shims:/home/jason/.rbenv/bin:/home/jason/.tfenv/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/snap/bin:/usr/local/go/bin
Yarn version:
1.22.19
Node version:
18.12.1
Platform:
linux x64
Trace:
Error: connect ENETUNREACH 2606:4700::6810:1723:443
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16)
npm manifest:
{
"name": "app",
"private": "true",
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
}
}
yarn manifest:
No manifest
Lockfile:
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1Any help is greatly appreciated. Thank you.
jmvbxx
commented
1 year ago I fixed the above with the following:
export NODE_OPTIONS="--dns-result-order=ipv4first"
To reproduce
Open localhost:3000/messages in Firefox(92.0 (64-bit)) and I get
in Chromium (Version 93.0.4577.82 (Official Build) snap (64-bit)) I get
Same situation in an existing app where I add bootstrap following the steps in the Readme.
Gemfile.lock