search

shakacode / react_on_rails

Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance.
https://www.shakacode.com/react-on-rails/docs/
MIT License
5.08k stars 627 forks source link

fix: replace Webpacker with Shakapacker #1622

Closed adriangohjw closed 4 days ago

adriangohjw commented 1 month ago

Summary

closes https://github.com/shakacode/react_on_rails/issues/1621 by replacing Webpacker.config.shakapacker_precompile? in configuration to Shakapacker.config.shakapacker_precompile?

Pull Request checklist

Remove this line after checking all the items here. If the item is not applicable to the PR, both check it out and wrap it by ~.

Other Information

Remove this paragraph and mention any other important and relevant information such as benchmarks.

This change is Reviewable

Summary by CodeRabbit

coderabbitai[bot] commented 1 month ago

Walkthrough

The changes focus on improving compatibility and updating the configurations across various workflows and source files. This involves introducing environment variables, adjusting step IDs, changing commands, updating version matrices, renaming methods for clarity, and handling the Shakapacker version updates efficiently.

Changes

Files and Paths Change Summaries
.github/workflows/examples.yml Introduced environment variable SKIP_YARN_COREPACK_CHECK, adjusted step IDs, added a step for dynamic shakapacker version setting, modified Node module installation step, and updated declarations for exported or public entities.
.github/workflows/lint-js-and-ruby.yml Simplified matrix strategy for Ruby and Node versions, fixed versions for Ruby and Node, adjusted caching keys, and removed unused yarn commands related to eslint and yalc.
.github/workflows/main.yml Replaced specific Ruby and Node matrices with labels, updated version references, dynamically adjusted Gemfile entries, added Git configuration step, and added steps for shakapacker version adjustments.
.github/workflows/package-js-tests.yml Modified matrix configuration for Node versions using generic labels oldest and newest, and adjusted Node version selection logic.
.github/workflows/rspec-package-specs.yml Renamed build job to rspec-package-tests, updated Ruby and Node versions, adjusted caching keys, dynamically modified Gemfile, added Git configuration and commit steps.
CONTRIBUTING.md Changed default capybara driver, provided instructions for converting development environment to Shakapacker v6.
Gemfile.development_dependencies Updated shakapacker gem version from 7.2.1 to 8.0.0.
lib/react_on_rails/packer_utils.rb Renamed WebpackerUtils to PackerUtils, added new methods related to shakapacker, refactored methods, updated references, and introduced error handling.
rakelib/example_type.rb Modified ExampleType class to initialize @all as a hash, accepted packer_type as an argument, updated method implementations.
rakelib/run_rspec.rake Refactored tasks for running RSpec, introduced tasks for webpacker and shakapacker, modified task structure, and added logic to load and process configurations.
rakelib/shakapacker_examples.rake Introduced tasks for generating example apps using gem's generator, added tasks for various options, and provided functionality to clobber and generate example apps.
rakelib/webpacker_examples.rake Renamed namespace, added path manipulations, modified ExampleType instantiation, updated gemfile generation tasks, and changed task definitions.
script/convert Introduced a script for file content replacements and renaming based on specified patterns.
spec/dummy/config/webpack/commonWebpackConfig.js Modified imports and declarations for webpack configuration, updated variable imports, introduced generateWebpackConfigAlias, and changed variable assignments.
spec/dummy/package.json Updated shakapacker version, added packageManager field.
spec/dummy/config/webpack/webpack.config.js Introduced alias generateWebpackConfigAlias; modified return statement for envSpecificConfig.

Assessment against linked issues

Objective (Issue) Addressed Explanation
Fix uninitialized constant Webpacker (Issue #1621) ✅

Poem

In lines of code where errors lurk, Shakapacker rises with a jerk. New versions dance, the configs change, Code refactors, error rearrange. The rabbit smiles with paws so light, To celebrate this coding night. 🐇✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
justin808 commented 1 month ago

@Judahmeek please review.

justin808 commented 1 month ago

@adriangohjw can you please add a changelog entry.

adriangohjw commented 1 month ago

@adriangohjw can you please add a changelog entry.

@justin808 oops my bad, saw that it has been addressed in https://github.com/shakacode/react_on_rails/pull/1622/commits/9ae6922153b8144c9d36553ae12434f23bdaf987 - thanks @Judahmeek !

justin808 commented 1 month ago

I'll ship once CI passes!

justin808 commented 1 month ago

@adriangohjw please check CI failures.

adriangohjw commented 1 month ago

@justin808 since Shakapacker v8 removed backward compatibility for Webpacker, and we are updating this to use v8 as per https://github.com/shakacode/react_on_rails/issues/1621#issuecomment-2121913676, should we also drop the support for Shakapacker v6 and v7?

Judahmeek commented 1 month ago

@adriangohjw Shakapacker v6 & v8 are incompatible since v6 uses the Webpacker constant. Shakapacker v7 contains both Shakapacker & Webpacker constants & should be compatible with v8, so let's just drop support for v6.

adriangohjw commented 1 month ago

@Judahmeek

can you advise? thank you!

Judahmeek commented 1 month ago
  • i'm not sure if i'm making the correct changes

Your changes look promising. However, there are some CI failures to resolve.

  • i'm also unsure if I should change WebpackerUtils to ShakapackerUtils

Yes, please do.

adriangohjw commented 1 month ago

@Judahmeek

Judahmeek commented 1 month ago

I greatly appreciate your work on that. 👍

  • given that we are dropping support for shakapacker v6, perhaps the new version should not be 14.0.2?

Correct. Any time we change supported dependency version ranges, then the next release of ReactOnRails will be a new major version since it is a breaking change.

adriangohjw commented 1 month ago

@Judahmeek any update on this? I think the workflow got stuck (might be due to the Github actions incident last week - https://www.githubstatus.com/incidents/nj47vccwm2zj). Thanks!

vaukalak commented 1 month ago

@justin808 I've tested this branch, and it did work fine.

timkrins commented 1 month ago

Thanks for this - I gave it a try locally.

The file lib/generators/react_on_rails/templates/base/base/config/shakapacker.yml generates config that is no longer in-line with the Shackapacker v8 default lib/install/config/shakapacker.yml file.

After running rails generate react_on_rails:install, and running ./bin/dev, Webpack (webpack-cli 5.1.4) does not compile, instead raising:

wp-client | [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
wp-client |  - options has an unknown property 'https'. These properties are valid:
wp-client |    object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, ipc?, liveReload?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
wp-client | Exited with code 2

This is because Webpack dropped the https: ... key in favor of server: https. The default config in shakapacker.yml was changed in https://github.com/shakacode/shakapacker/pull/277

adriangohjw commented 1 month ago

This is because Webpack dropped the https: ... key in favor of server: https.

thanks @timkrins - will make the change

@justin808 should we copy-paste the config from https://github.com/shakacode/shakapacker/blob/main/lib/install/config/shakapacker.yml?

justin808 commented 1 month ago

This is because Webpack dropped the https: ... key in favor of server: https.

thanks @timkrins - will make the change

@justin808 should we copy-paste the config from https://github.com/shakacode/shakapacker/blob/main/lib/install/config/shakapacker.yml?

Yes, as it's the current one and the current version is the default.

Judahmeek commented 3 weeks ago

@adriangohjw Once again, thanks for your work.

Justin decided that he wanted to use an adapter module instead of having to make any breaking changes so I'm incorporating work from an old PR of mine.

justin808 commented 2 weeks ago

@G-Rath any opinions on this PR?

vaukalak commented 1 week ago

Closing, since the issue has been fixed by: https://github.com/shakacode/react_on_rails/pull/1629 CC: @justin808

Judahmeek commented 1 week ago

@vaukalak #1629 doesn't resolve all the incompatibilities regarding Shakapacker v8.

It unfortunately doesn't even resolve the generator issues because the Examples job was failing to actually run the expected test suite due to an id mismatch between changed-files-specific and steps.changed-files.outputs.any_changed