Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

try removing webpacker lines from GitPod config #10137

Merged
merged 10 commits into from
Sep 21, 2021
Merged

try removing webpacker lines from GitPod config #10137

merged 10 commits into from
Sep 21, 2021

Conversation

jywarren
Copy link
Member

@jywarren jywarren commented Sep 7, 2021

re #9502

@gitpod-io
Copy link

gitpod-io bot commented Sep 7, 2021

@jywarren jywarren changed the title remove 'g' from webpacker commands in .gitpod.yml try removing webpacker lines from GitPod config Sep 7, 2021
.gitpod.yml Outdated Show resolved Hide resolved
@codecov
Copy link

codecov bot commented Sep 7, 2021

Codecov Report

Merging #10137 (5394db2) into main (f41f8e7) will decrease coverage by 0.14%.
The diff coverage is 84.21%.

Impacted file tree graph

@@            Coverage Diff             @@
##             main   #10137      +/-   ##
==========================================
- Coverage   82.13%   81.99%   -0.15%     
==========================================
  Files          98       98              
  Lines        5968     5977       +9     
==========================================
- Hits         4902     4901       -1     
- Misses       1066     1076      +10     
Impacted Files Coverage Δ
app/models/tag.rb 93.26% <44.44%> (-4.27%) ⬇️
app/controllers/tag_controller.rb 80.42% <50.00%> (ø)
app/controllers/home_controller.rb 96.05% <100.00%> (-2.62%) ⬇️
app/controllers/images_controller.rb 72.50% <100.00%> (+2.22%) ⬆️
app/controllers/notes_controller.rb 85.09% <100.00%> (+0.22%) ⬆️
app/helpers/application_helper.rb 87.62% <100.00%> (+2.21%) ⬆️
app/models/image.rb 82.05% <100.00%> (-0.45%) ⬇️
app/models/user.rb 86.12% <100.00%> (ø)
app/services/search_service.rb 94.89% <100.00%> (-0.21%) ⬇️
... and 3 more

@jywarren
Copy link
Member Author

jywarren commented Sep 7, 2021

hmm, now says:


ActionView::Template::Error (Webpacker can't find application.js in /workspace/plots2/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
):
    107: 
    108:   <script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/bootstrap-slider.min.js"></script>
    109:   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/css/bootstrap-slider.min.css" />
    110:   <%= javascript_pack_tag 'application' %>
    111:   </head>
    112: 

@noi5e
Copy link
Contributor

noi5e commented Sep 7, 2021

The manifest.json error @jywarren posted about appears in the GitPod:
Screen Shot 2021-09-07 at 10 51 40 AM

Could this be applicable here?

production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false

Does this count as a production environment? If so, maybe change this variable to true? 🤔

@@ -18,7 +18,6 @@ tasks:

yarn install

rails g webpacker:install && rails g webpacker:install:react && rails g react:install
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think i would guess it's 2) webpack has not yet re-run to reflect updates -- so, if we remove the g lines, which of these three ought we to keep if any?

rails webpacker:install && rails webpacker:install:react && rails g react:install

@jywarren
Copy link
Member Author

jywarren commented Sep 14, 2021

OK, building on notes in #9502, let's try linking each line to where we find what it does, in upstream source:

https://github.com/reactjs/react-rails#rails-5x describes all three commands, not sure of order:

  • app/javascript/components/ directory for your React components
  • ReactRailsUJS setup in app/javascript/packs/application.js
  • app/javascript/packs/server_rendering.js for server-side rendering

According to the above, we could maybe leave only rails g react:install which generates the manifest.json file?

@jywarren
Copy link
Member Author

Does this count as a production environment? If so, maybe change this variable to true? 🤔

I think not. I think if you turn it on, it'll try to on-the-fly compile in production. But we want that only to happen in development. And GitPod would be running in development mode unless we explicitly switched it.

@jywarren
Copy link
Member Author

Interesting possibly related error: rails/webpacker#1523 (but for vue)

@jywarren
Copy link
Member Author

Wait, ok, so on reading the error above once more, I wonder @noi5e do we need to check in manifest.json to version tracking?

@jywarren
Copy link
Member Author

Could this be relevant?

https://github.com/rails/webpacker/blob/79c7b677ed20a650d45776ed173c7a5ecd6c4c6d/docs/troubleshooting.md#cant-find-hello_reactjs-in-manifestjson

If you get this error Can't find hello_react.js in manifest.json when loading a view in the browser it's because webpack is still compiling packs. Webpacker uses a manifest.json file to keep track of packs in all environments, however since this file is generated after packs are compiled by webpack. So, if you load a view in browser whilst webpack is compiling you will get this error. Therefore, make sure webpack (i.e ./bin/webpack-dev-server) is running and has completed the compilation successfully before loading a view.

@jywarren
Copy link
Member Author

more discussion in rails/webpacker#2071 too... for context...

@jywarren
Copy link
Member Author

OK, tried (in gitpod) running just rails g react:install:

gitpod /workspace/plots2 $ rails g react:install
W, [2021-09-14T18:37:02.203538 #7060]  WARN -- Skylight: [SKYLIGHT] [5.1.1] Running Skylight in development mode. No data will be reported until you deploy your app.
(To disable this message for all local apps, run `skylight disable_dev_warning`.)
       exist  app/javascript/components
   identical  app/javascript/components/.keep
warning Pattern ["file-saver@eligrey/FileSaver.js#1.3.8"] is trying to unpack in the same destination "/home/gitpod/.cache/yarn/v6/npm-file-saver-1.3.8/node_modules/file-saver" as pattern ["file-saver@^1.3.3"]. This could result in non-deterministic behavior, skipping.
warning " > @babel/preset-react@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".                       
warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-development@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-pure-annotations@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > leaflet-spin@1.1.0" has incorrect peer dependency "leaflet@^0.7.3".                                 
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".                    
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning Ignored scripts due to flag.                                                                            
File unchanged! The supplied flag value not found!  app/javascript/packs/application.js
   identical  app/javascript/packs/server_rendering.js

So, i think that's what webpack-dev-server is for? To compile this on the fly for development use?

I tried running it following the docs: https://github.com/webpack/webpack-dev-server#usage


gitpod /workspace/plots2 $ webpack-dev-server
bash: webpack-dev-server: command not found
gitpod /workspace/plots2 $ webpack serve
bash: webpack: command not found
gitpod /workspace/plots2 $ bin/webpack serve
The command moved into a separate package: @webpack-cli/serve
Would you like to install serve? (That will run yarn add -D @webpack-cli/serve) (yes/NO) : gitpod /workspace/plots2 $ npm run serve
npm ERR! Invalid version: "2.1"

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/gitpod/.npm/_logs/2021-09-14T18_46_26_222Z-debug.log
gitpod /workspace/plots2 $ bin/webpack serve
The command moved into a separate package: @webpack-cli/serve
Would you like to install serve? (That will run yarn add -D @webpack-cli/serve) (yes/NO) : yes
yarn add v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["file-saver@eligrey/FileSaver.js#1.3.8"] is trying to unpack in the same destination "/home/gitpod/.cache/yarn/v6/npm-file-saver-1.3.8/node_modules/file-saver" as pattern ["file-saver@^1.3.3"]. This could result in non-deterministic behavior, skipping.
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > @babel/preset-react@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-development@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-pure-annotations@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > leaflet-spin@1.1.0" has incorrect peer dependency "leaflet@^0.7.3".
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > @webpack-cli/serve@1.5.2" has unmet peer dependency "webpack-cli@4.x.x".
[4/4] Building fresh packages...
warning Ignored scripts due to flag.
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @webpack-cli/serve@1.5.2
info All dependencies
└─ @webpack-cli/serve@1.5.2
Done in 6.89s.
TypeError: Class constructor ServeCommand cannot be invoked without 'new'
    at runWhenInstalled (/workspace/plots2/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at /workspace/plots2/node_modules/webpack-cli/bin/utils/prompt-command.js:124:15
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
gitpod /workspace/plots2 $ 

@jywarren
Copy link
Member Author

OH! But actually the app loaded after bin/webpack serve and installing the cli with yes. It generated this manifest.json:

{
  "application.js": "/packs/js/application-1cd674b55ee7cddfadd4.js",
  "application.js.map": "/packs/js/application-1cd674b55ee7cddfadd4.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-1cd674b55ee7cddfadd4.js"
      ],
      "js.map": [
        "/packs/js/application-1cd674b55ee7cddfadd4.js.map"
      ]
    },
    "hello_react": {
      "js": [
        "/packs/js/hello_react-af487bc436f7f27d8ec9.js"
      ],
      "js.map": [
        "/packs/js/hello_react-af487bc436f7f27d8ec9.js.map"
      ]
    },
    "server_rendering": {
      "js": [
        "/packs/js/server_rendering-c2fc005ba852cce0103e.js"
      ],
      "js.map": [
        "/packs/js/server_rendering-c2fc005ba852cce0103e.js.map"
      ]
    }
  },
  "hello_react.js": "/packs/js/hello_react-af487bc436f7f27d8ec9.js",
  "hello_react.js.map": "/packs/js/hello_react-af487bc436f7f27d8ec9.js.map",
  "server_rendering.js": "/packs/js/server_rendering-c2fc005ba852cce0103e.js",
  "server_rendering.js.map": "/packs/js/server_rendering-c2fc005ba852cce0103e.js.map"
}

So we need to:

  1. ensure the extra package is installed (The command moved into a separate package: @webpack-cli/serve), and
  2. run bin/webpack serve in gitpod.
  3. think about the workflow for local developers if need be

@noi5e what do you think? I added a commit with the @webpack-cli/serve install, and will try adding bin/webpack serve to gitpod.yml.

@jywarren
Copy link
Member Author

Hmm, yeah ...

gitpod /workspace/plots2 $ bin/webpack serve
yarn run v1.22.4
error Command "webpack" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

so i think i did install it but am not inserting the correct serve command?

@jywarren
Copy link
Member Author

And now it's resulting in:


[Webpacker] Compiling...
[Webpacker] Compiling...
[Webpacker] Compilation failed:
yarn run v1.22.4
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.


error Command "webpack" not found.

Completed 500 Internal Server Error in 10698ms (ActiveRecord: 59.1ms)


Webpacker can't find application.js in /workspace/plots2/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment

so let me see again how to run serve

@jywarren
Copy link
Member Author

Huh, this is interesting -- in bin/ are 2 files, webpack and webpack-dev-server, both are ruby files!

image

I think the only difference is:

require "webpacker/webpack_runner" vs require "webpacker/dev_server_runner"

@jywarren
Copy link
Member Author

Slight clue in latest error:

4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
 excluded from capture: Not configured to send/capture in environment 'development'

@jywarren
Copy link
Member Author

i realized the npm module webpack wasn't installed, so added that, but still got the above error message

@jywarren
Copy link
Member Author

Oof, now i can't get the app to serve without the manifest.json error!

@jywarren
Copy link
Member Author

maybe in part because public/packs/manifest.json still doesn't exist?

@jywarren
Copy link
Member Author

@noi5e what command actually generated your manifest.json file, regardless of which directory it was in?

#10137 is actually further than i'm getting right now -- it actually had a manifest.json file, apparently.

@jywarren
Copy link
Member Author

@noi5e
Copy link
Contributor

noi5e commented Sep 20, 2021

I'm getting a little lost, I think I'm still behind where you're at in terms of understanding the issue.

Just to reiterate where I think we are right now:

  1. The goal of this PR is to remove the rails g webpacker:install && rails g webpacker:install:react && rails g react:install from GitPod config.
  2. The issue that we're dealing with now is that once those commands are removed, GitPod doesn't start. Instead, we get an empty manifest.json error.

@noi5e what command actually generated your manifest.json file, regardless of which directory it was in?

I think that's done in the install:react generator

I haven't logged as much time as you working on this issue, but my gut feeling is that the solution will probably be tweaking the config/webpacker.yml file's development settings. I think the webpacker docs will probably help.

I can also start drafting an issue for the react-rails people, but I think I need to understand what's going on with more clarity first.

@jywarren
Copy link
Member Author

yeah i'm sorry, i'm a bit lost myself, it's so hard to keep an eye on the goal in the weeds like this.

But, i just realized one thing - i've been adding extra modules via yarn to try to get this to work. But, i think i was getting a webpack version mismatch because i manually installed webpack via yarn! I tried uninstalling webpack via yarn and the site loaded correctly - i think my manual install was overriding the in-built version of webpack that comes in the rails/webpack gem!

So, i may need to look at removing the webpack-cli stuff too? and that bin/webpack serve stuff was a red herring - it should already be built in and managed by the rails/webpack gem.

@noi5e
Copy link
Contributor

noi5e commented Sep 20, 2021

that bin/webpack serve stuff was a red herring - it should already be built in and managed by the rails/webpack gem.

I think that's right! I've been browsing issues and solutions for this kind of thing (and we're not the only people dealing with this config stuff), and it seems like the solutions are usually more about tweaking lines in a config file.

i think i was getting a webpack version mismatch because i manually installed webpack via yarn! I tried uninstalling webpack via yarn and the site loaded correctly - i think my manual install was overriding the in-built version of webpack that comes in the rails/webpack gem!

In reading through these issues, I have also noticed that issues can crop up because of how these packages are installed.

@jywarren
Copy link
Member Author

OK, i'll try running this on a freshly prebuilt gitpod...

@jywarren
Copy link
Member Author

I think @noi5e is right and we will have to also include a rails g react:install run. But let's see what happens now.

@jywarren
Copy link
Member Author

Yes!!! rails g react:install makes it work, after initially seeing an error. Adding that and running prebuild once more...

@jywarren
Copy link
Member Author

output was:

gitpod /workspace/plots2 $ rails g react:install
W, [2021-09-21T00:07:48.065496 #7847]  WARN -- Skylight: [SKYLIGHT] [5.1.1] Running Skylight in development mode. No data will be reported until you deploy your app.
(To disable this message for all local apps, run `skylight disable_dev_warning`.)
       exist  app/javascript/components
   identical  app/javascript/components/.keep
warning Pattern ["file-saver@eligrey/FileSaver.js#1.3.8"] is trying to unpack in the same destination "/home/gitpod/.cache/yarn/v6/npm-file-saver-1.3.8/node_modules/file-saver" as pattern ["file-saver@^1.3.3"]. This could result in non-deterministic behavior, skipping.
warning " > @babel/preset-react@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-display-name@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx-development@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-pure-annotations@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > leaflet-spin@1.1.0" has incorrect peer dependency "leaflet@^0.7.3".
warning " > webpack-dev-server@4.2.1" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@5.1.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning Ignored scripts due to flag.                                   
File unchanged! The supplied flag value not found!  app/javascript/packs/application.js
   identical  app/javascript/packs/server_rendering.js

but, despite the warnings and "file unchanged" it seems to do the trick.

@codeclimate
Copy link

codeclimate bot commented Sep 21, 2021

Code Climate has analyzed commit 5394db2 and detected 0 issues on this pull request.

View more on Code Climate.

@jywarren
Copy link
Member Author

Perfect. This worked. Merging!!

@jywarren jywarren merged commit 6ba0ab3 into main Sep 21, 2021
@sentry-io
Copy link

sentry-io bot commented Oct 12, 2021

Sentry issue: PLOTS2-1HG

reginaalyssa pushed a commit to reginaalyssa/plots2 that referenced this pull request Oct 16, 2021
* remove 'g' from webpacker commands in .gitpod.yml

re publiclab#9502

* remove all 3 webpacker/react install lines from .gitpod.yml

* added @webpack-cli/serve npm module

* added webpack/serve to gitpod.yml

* yarn.lock

* add webpack-cli

* remove yarn-based webpack deps

* more removal

* re-add rails g react:install
billymoroney1 pushed a commit to billymoroney1/plots2 that referenced this pull request Dec 28, 2021
* remove 'g' from webpacker commands in .gitpod.yml

re publiclab#9502

* remove all 3 webpacker/react install lines from .gitpod.yml

* added @webpack-cli/serve npm module

* added webpack/serve to gitpod.yml

* yarn.lock

* add webpack-cli

* remove yarn-based webpack deps

* more removal

* re-add rails g react:install
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants