Rspack spike #2
Rspack spike #2
Conversation
1. Relative path for Gem 2. Yalc source for package
Update lock for shakapacker Yalc for npm package update lockfile lockfile Setup yalc for local React on Rails development - Use yalc published react-on-rails package for local testing - Update package.json to use file:.yalc/react-on-rails - Enable testing of React on Rails changes without publishing to npm - Webpack now correctly bundles yalc version of the package This allows testing React on Rails library changes immediately in test apps. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
WalkthroughAdds React on Rails with Shakapacker/Rspack setup, Redux-based HelloWorld example with SSR, dev Procfiles and executables, asset/build configurations (Webpack/Rspack/Babel/TS), Rails controller/view/layout/route, and project tooling files (.gitignore, Gemfile, package.json). Introduces server/client bundles, dev servers, and environment-specific build configs. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant B as Browser
participant R as Rails Router
participant C as HelloWorldController
participant V as View (ERB)
participant RoR as ReactOnRails
participant SB as Server Bundle (SSR)
participant CL as Client Pack
B->>R: GET /hello_world
R->>C: route to index
C->>V: render with @hello_world_props
V->>RoR: react_component("HelloWorldApp", props, prerender: true)
RoR->>SB: render to string (SSR)
SB-->>RoR: HTML markup
RoR-->>V: inject prerendered HTML + asset tags
V-->>B: response (HTML)
B->>CL: load application/server/client packs
CL-->>B: hydrate HelloWorldApp
note over SB,CL: New/changed: SSR + client hydration paths
sequenceDiagram
autonumber
participant Dev as Developer
participant DV as bin/dev / Procfile.dev
participant RS as Rails Server (3000)
participant WPC as Rspack Dev Server (wp-client)
participant WPS as Shakapacker Watch (wp-server)
Dev->>DV: start
DV->>RS: bundle exec rails s -p 3000
DV->>WPC: WEBPACK_SERVE=true shakapacker-dev-server
DV->>WPS: SERVER_BUNDLE_ONLY=true shakapacker --watch
note over WPC: Serves client HMR assets
note over WPS: Rebuilds server-bundle.js
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (34)
.gitignore (1)
36-44: Solid ignores for packs and node tooling; consider a couple more dev logs.Add common npm/pnpm debug logs alongside Yarn to avoid noisy diffs.
/public/packs-test /node_modules /yarn-error.log yarn-debug.log* +.npm/_logs/* +npm-debug.log* +pnpm-debug.log* .yarn-integrity # Generated React on Rails packs **/generated/**app/views/layouts/application.html.erb (1)
22-22: Ensure chunked JS and extracted CSS are included when code‑splitting or extracting styles.
- If you use dynamic imports/code‑splitting, prefer
javascript_packs_with_chunks_tagso chunk tags are emitted.- If Rspack/Shakapacker extracts CSS in production, include
stylesheet_pack_tag "application"as well (Sprockets’stylesheet_link_tagwon’t load extracted pack CSS).- <%= javascript_pack_tag "application" %> + <%# Includes JS entry + any split chunks %> + <%= javascript_packs_with_chunks_tag "application", "data-turbo-track": "reload", defer: true %> + <%# If extracting CSS from packs in production, include: %> + <%#= stylesheet_pack_tag "application", media: "all", "data-turbo-track": "reload" %>app/javascript/packs/server-bundle.js (1)
1-3: Silence linter for generated import path to avoid CI noise.The generated file often isn’t present until after the generator runs; ESLint’s
import/no-unresolvedmay flag this.-// import statement added by react_on_rails:generate_packs rake task +/* eslint-disable import/no-unresolved */ +// import statement added by react_on_rails:generate_packs rake task import "./../generated/server-bundle-generated.js" // Placeholder comment - auto-generated imports will be prepended here by react_on_rails:generate_packsapp/javascript/src/HelloWorld/ror_components/HelloWorld.module.css (1)
1-4: OK; consider theming for accessibility.Pure “green” may fail contrast in some themes. Consider a design token (CSS variable) instead for dark/light modes.
-.bright { - color: green; +.bright { + color: var(--brand-success-foreground, green); font-weight: bold; }bin/setup (1)
18-20: Optional: assert Node tooling presence early for a smoother DX.Fail fast with a clearer message if Node is missing.
puts "== Installing dependencies ==" system("bundle check") || system!("bundle install") # Install JavaScript dependencies + system!("node -v >/dev/null 2>&1 || { echo 'Node.js is required. Please install >= 18.x'; exit 1; }")app/javascript/types/css-modules.d.ts (1)
1-15: Make CSS module types readonly — tsconfig already includes "app/javascript//*"**Readonly index signature prevents accidental mutation; tsconfig.json covers app/javascript, so the file is picked up. Apply the change below.
declare module "*.module.css" { - const classes: { [key: string]: string }; + const classes: { readonly [key: string]: string }; export default classes; } declare module "*.module.scss" { - const classes: { [key: string]: string }; + const classes: { readonly [key: string]: string }; export default classes; } declare module "*.module.sass" { - const classes: { [key: string]: string }; + const classes: { readonly [key: string]: string }; export default classes; }app/javascript/src/HelloWorldApp/constants/helloWorldConstants.ts (1)
1-1: Prefer targeted disable over file‑wide ESLint suppressionLimit the scope to the next line to avoid muting the rule globally.
Apply this diff:
-/* eslint-disable import/prefer-default-export */ +// eslint-disable-next-line import/prefer-default-exportconfig/webpack/development.js (1)
4-4: Remove unused imports
devServerandinliningCssaren’t used here.Apply this diff:
-const { devServer, inliningCss } = require('shakapacker'); +// const { devServer, inliningCss } = require('shakapacker'); // not used herebabel.config.js (2)
12-18: Remove unsupported preset option on @babel/preset-react.
useBuiltInsis not a valid option for@babel/preset-react; it’s silently ignored. Drop it to avoid confusion.'@babel/preset-react', { development: !isProductionEnv, - useBuiltIns: true, runtime: 'automatic' }
32-33: Avoid duplicate preset-react invocation; prefer updating the existing preset options.Appending another
@babel/preset-reactlikely duplicates work. Consider mapping existing presets to tweak options instead of concatenating.Example approach:
resultConfig.presets = resultConfig.presets.map((preset) => { const [name, opts] = Array.isArray(preset) ? preset : [preset, {}]; if (name === '@babel/preset-react') { return [name, { ...opts, development: !isProductionEnv, runtime: 'automatic' }]; } return preset; });config/rspack/production.js (1)
27-37: Align env switches with dev-server reality.Conditions reference
WEBPACK_SERVE. If rspack uses a different env var duringserve, consider including it (same suggestion as babel).-if (process.env.WEBPACK_SERVE || process.env.CLIENT_BUNDLE_ONLY) { +if (process.env.WEBPACK_SERVE || process.env.RSPACK_DEV_SERVER || process.env.CLIENT_BUNDLE_ONLY) {app/javascript/src/HelloWorldApp/components/HelloWorld.module.css (1)
1-4: Potential contrast issue; avoid relying on color alone.“green” text on white may fail WCAG for normal-sized text. Prefer a darker tokenized color and an additional non-color cue (icon/underline) if it conveys meaning.
Example:
.bright { color: var(--color-success-strong); /* e.g., #116611 */ font-weight: 600; }Procfile.dev (1)
1-5: Dev workflow LGTM; minor DX tweak optional.Consider binding Rails to 0.0.0.0 for container/devbox use, and documenting
overmind s -f Procfile.dev.-rails: bundle exec rails s -p 3000 +rails: bundle exec rails s -p 3000 -b 0.0.0.0app/javascript/src/HelloWorldApp/components/HelloWorld.tsx (1)
15-20: Prevent form submit page reload.Pressing Enter would submit and reload. Prevent default on the form.
Apply this diff:
- <form> + <form onSubmit={(e) => e.preventDefault()}> <label className={style.bright} htmlFor="name"> Say hello to: <input id="name" type="text" value={name} onChange={(e) => updateName(e.target.value)} /> </label> </form>app/views/layouts/hello_world.html.erb (1)
2-5: Addlang, CSP, and viewport for security and accessibility.Minor hardening and better defaults.
Apply this diff:
-<html> +<html lang="en"> <head> <title>ReactOnRailsWithShakapacker</title> <%= csrf_meta_tags %> + <%= csp_meta_tag %> + <meta name="viewport" content="width=device-width, initial-scale=1" />Confirm that calling
stylesheet_pack_tag/javascript_pack_tagwith no arguments returns empty output on your Shakapacker version (no exception). If not, remove these lines or pass explicit pack names.app/javascript/src/HelloWorldApp/containers/HelloWorldContainer.ts (1)
8-13: State mapping is correct for a single-slice store.Given the root state equals HelloWorldState, mapStateToProps is fine. Consider hooks (useSelector/useDispatch) later for simpler typing, but not required now.
config/webpack/webpack.config.js (1)
11-12: Improve error message with explicit NODE_ENV.Small DX tweak to surface the actual env value.
- throw new Error(`Could not find file to load ${path}, based on NODE_ENV`) + throw new Error(`Could not find file to load ${path}, based on NODE_ENV=${env.nodeEnv}`)app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.tsx (1)
14-15: Avoid recreating the Redux store on every props identity change.Recreating the store can drop client state during HMR or re-renders with new props objects. Initialize once at mount.
- const store = useMemo(() => configureStore(props), [props]); + // Initialize once; Rails props seed initial state at mount. + const store = useMemo(() => configureStore(props), []);If you expect props to change after mount and want to update state, confirm desired behavior; otherwise this change is safer for client interactivity.
config/webpack/generateWebpackConfigs.js (1)
16-20: Nit: fix comment typo.Minor polish.
- // For HMR, need to separate the the client and server webpack configurations + // For HMR, need to separate the client and server webpack configurationsconfig/rspack/development.js (1)
13-18: Prefer globalThis for broader runtime safety.For Node SSR, global works, but globalThis is universally available and avoids edge cases.
output: { - globalObject: 'global', + globalObject: 'globalThis', library:app/javascript/src/HelloWorldApp/store/helloWorldStore.ts (3)
6-10: Tighten RailsProps typing to actual preloaded state.Avoid any; make RailsProps the precise preloaded state shape to catch mismatches at compile time.
-// Rails props interface - customize based on your Rails controller -export interface RailsProps { - name: string; - [key: string]: any; // Allow additional props from Rails -} +// Rails props are the preloaded Redux state +export type RailsProps = PreloadedState<HelloWorldState>;
15-16: Leverage the stronger type for preloaded state.This aligns the param with Redux’s PreloadedState type.
-const configureStore = (railsProps: RailsProps): HelloWorldStore => - createStore(helloWorldReducer, railsProps as PreloadedState<HelloWorldState>); +const configureStore = (railsProps: RailsProps): HelloWorldStore => + createStore(helloWorldReducer, railsProps);This change impacts the import in HelloWorldApp.client.tsx where RailsProps is referenced; ensure type-only import continues to work.
1-4: Consider Redux Toolkit later.Legacy createStore works, but RTK simplifies setup and devtools. Optional for the spike.
config/rspack/rspack.config.js (1)
8-12: Mirror webpack DX tweak: include NODE_ENV in messages.Helps when multiple envs are tried in CI.
- console.log(`Loading ENV specific rspack configuration file ${path}`) + console.log(`Loading ENV specific rspack configuration file ${path} (NODE_ENV=${env.nodeEnv})`) - throw new Error(`Could not find file to load ${path}, based on NODE_ENV`) + throw new Error(`Could not find file to load ${path}, based on NODE_ENV=${env.nodeEnv}`)config/initializers/react_on_rails.rb (2)
50-57: Auto registry defaults: verify directory and perf.With
components_subdirectory = "ror_components"andauto_load_bundle = true, confirmapp/javascript/ror_components/**exists and monitor compile times on large trees. Consider disablingauto_load_bundleif perf regresses.
6-11: Be explicit about production build ownership.If you rely solely on
assets:precompilevia Shakapacker, setconfig.build_production_command = nilto avoid accidental double builds.- # config.build_production_command = nil + config.build_production_command = nilconfig/shakapacker.yml (4)
41-41: Loader selection: confirm Babel vs SWC under Rspack.Bundler is
rspack, yetwebpack_loader: 'babel'is set. Rspack commonly pairs with SWC. If Babel isn’t required, consider'swc'for speed, or confirm this setting is ignored under Rspack.
43-45: Enable version consistency checks.Helps catch mismatched gem/npm shakapacker versions early.
- ensure_consistent_versioning: false + ensure_consistent_versioning: true
82-85: Optional: turn on HMR for better DX.If desired, enable HMR and ensure
style-loaderis present.- hmr: false + hmr: true
122-133: Recommend enabling Subresource Integrity in production.Improves supply-chain defenses for client assets.
production: <<: *default @@ cache_manifest: true + # Enable SRI in production + integrity: + enabled: trueconfig/webpack/serverWebpackConfig.js (4)
4-4: Remove unused import.
mergeisn’t used.-const { merge, config } = require('shakapacker'); +const { config } = require('shakapacker');
105-109: Don’t force eval in production.Gate devtool on env to avoid eval in prod bundles.
- serverWebpackConfig.devtool = 'eval'; + serverWebpackConfig.devtool = process.env.NODE_ENV === 'production' ? false : 'eval';
48-56: Preserve existing output options when overriding.Safer to merge rather than replace the entire output object.
- serverWebpackConfig.output = { - filename: 'server-bundle.js', - globalObject: 'this', - // If using the React on Rails Pro node server renderer, uncomment the next line - // libraryTarget: 'commonjs2', - path: config.outputPath, - publicPath: config.publicPath, - // https://webpack.js.org/configuration/output/#outputglobalobject - }; + serverWebpackConfig.output = { + ...(serverWebpackConfig.output || {}), + filename: 'server-bundle.js', + globalObject: 'this', + // libraryTarget: 'commonjs2', // for Pro node server renderer + path: config.outputPath, + publicPath: config.publicPath, + };
21-25: Entry guard is good; add a tip in the error.Consider hinting expected path
app/javascript/packs/server-bundle.js.- "Create a pack with the file name 'server-bundle.js' containing all the server rendering files", + "Create app/javascript/packs/server-bundle.js containing all server-rendered entries",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
Gemfile.lockis excluded by!**/*.lockpackage-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (43)
.gitignore(1 hunks)Gemfile(1 hunks)Procfile.dev(1 hunks)Procfile.dev-prod-assets(1 hunks)Procfile.dev-static-assets(1 hunks)app/controllers/hello_world_controller.rb(1 hunks)app/javascript/packs/application.js(1 hunks)app/javascript/packs/server-bundle.js(1 hunks)app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css(1 hunks)app/javascript/src/HelloWorldApp/actions/helloWorldActionCreators.ts(1 hunks)app/javascript/src/HelloWorldApp/components/HelloWorld.module.css(1 hunks)app/javascript/src/HelloWorldApp/components/HelloWorld.tsx(1 hunks)app/javascript/src/HelloWorldApp/constants/helloWorldConstants.ts(1 hunks)app/javascript/src/HelloWorldApp/containers/HelloWorldContainer.ts(1 hunks)app/javascript/src/HelloWorldApp/reducers/helloWorldReducer.ts(1 hunks)app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.tsx(1 hunks)app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.server.tsx(1 hunks)app/javascript/src/HelloWorldApp/store/helloWorldStore.ts(1 hunks)app/javascript/types/css-modules.d.ts(1 hunks)app/views/hello_world/index.html.erb(1 hunks)app/views/layouts/application.html.erb(1 hunks)app/views/layouts/hello_world.html.erb(1 hunks)babel.config.js(1 hunks)bin/dev(1 hunks)bin/setup(1 hunks)bin/shakapacker(1 hunks)bin/shakapacker-dev-server(1 hunks)config/initializers/react_on_rails.rb(1 hunks)config/routes.rb(1 hunks)config/rspack/development.js(1 hunks)config/rspack/production.js(1 hunks)config/rspack/rspack.config.js(1 hunks)config/shakapacker.yml(1 hunks)config/webpack/clientWebpackConfig.js(1 hunks)config/webpack/commonWebpackConfig.js(1 hunks)config/webpack/development.js(1 hunks)config/webpack/generateWebpackConfigs.js(1 hunks)config/webpack/production.js(1 hunks)config/webpack/serverWebpackConfig.js(1 hunks)config/webpack/test.js(1 hunks)config/webpack/webpack.config.js(1 hunks)package.json(1 hunks)tsconfig.json(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (17)
config/webpack/clientWebpackConfig.js (3)
config/webpack/commonWebpackConfig.js (2)
commonWebpackConfig(16-16)require(5-5)config/webpack/serverWebpackConfig.js (2)
commonWebpackConfig(5-5)require(4-4)config/webpack/generateWebpackConfigs.js (1)
clientConfig(8-8)
config/webpack/production.js (2)
config/webpack/development.js (2)
generateWebpackConfigs(6-6)require(4-4)config/webpack/test.js (1)
generateWebpackConfigs(4-4)
app/javascript/src/HelloWorldApp/containers/HelloWorldContainer.ts (1)
app/javascript/src/HelloWorldApp/reducers/helloWorldReducer.ts (1)
HelloWorldState(6-8)
config/rspack/development.js (1)
config/rspack/rspack.config.js (3)
require(1-1)require(2-2)require(3-3)
config/webpack/serverWebpackConfig.js (3)
config/webpack/commonWebpackConfig.js (2)
require(5-5)commonWebpackConfig(16-16)config/webpack/clientWebpackConfig.js (1)
commonWebpackConfig(4-4)config/webpack/generateWebpackConfigs.js (1)
serverWebpackConfig(5-5)
app/javascript/src/HelloWorldApp/actions/helloWorldActionCreators.ts (1)
app/javascript/src/HelloWorldApp/constants/helloWorldConstants.ts (1)
HELLO_WORLD_NAME_UPDATE(3-3)
babel.config.js (4)
config/webpack/commonWebpackConfig.js (1)
require(5-5)config/webpack/development.js (1)
require(4-4)config/webpack/serverWebpackConfig.js (1)
require(4-4)config/webpack/webpack.config.js (3)
require(1-1)require(2-2)require(3-3)
config/webpack/generateWebpackConfigs.js (5)
config/webpack/commonWebpackConfig.js (1)
require(5-5)config/webpack/development.js (1)
require(4-4)config/webpack/serverWebpackConfig.js (2)
require(4-4)serverWebpackConfig(14-14)config/webpack/webpack.config.js (3)
require(1-1)require(2-2)require(3-3)config/webpack/clientWebpackConfig.js (1)
clientConfig(7-7)
config/webpack/commonWebpackConfig.js (3)
config/webpack/development.js (1)
require(4-4)config/webpack/serverWebpackConfig.js (2)
require(4-4)commonWebpackConfig(5-5)config/webpack/clientWebpackConfig.js (1)
commonWebpackConfig(4-4)
app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.tsx (1)
app/javascript/src/HelloWorldApp/store/helloWorldStore.ts (1)
RailsProps(7-10)
config/rspack/production.js (1)
config/rspack/rspack.config.js (3)
require(1-1)require(2-2)require(3-3)
app/javascript/src/HelloWorldApp/store/helloWorldStore.ts (1)
app/javascript/src/HelloWorldApp/reducers/helloWorldReducer.ts (1)
HelloWorldState(6-8)
config/webpack/development.js (2)
config/webpack/commonWebpackConfig.js (1)
require(5-5)config/webpack/generateWebpackConfigs.js (1)
clientWebpackConfig(4-4)
config/webpack/test.js (3)
config/webpack/development.js (2)
generateWebpackConfigs(6-6)require(4-4)config/webpack/production.js (1)
generateWebpackConfigs(4-4)config/webpack/commonWebpackConfig.js (1)
require(5-5)
config/rspack/rspack.config.js (2)
config/rspack/development.js (1)
require(1-1)config/rspack/production.js (1)
require(1-1)
app/javascript/src/HelloWorldApp/reducers/helloWorldReducer.ts (2)
app/javascript/src/HelloWorldApp/actions/helloWorldActionCreators.ts (1)
HelloWorldAction(12-12)app/javascript/src/HelloWorldApp/constants/helloWorldConstants.ts (1)
HELLO_WORLD_NAME_UPDATE(3-3)
app/javascript/src/HelloWorldApp/components/HelloWorld.tsx (2)
app/javascript/src/HelloWorldApp/containers/HelloWorldContainer.ts (1)
PropsFromRedux(15-15)app/javascript/src/HelloWorldApp/actions/helloWorldActionCreators.ts (1)
updateName(15-18)
🔇 Additional comments (29)
Procfile.dev-static-assets (1)
1-2: LGTM for static-asset workflow (Rails + shakapacker watch).This setup is straightforward and avoids the dev server complexity.
If you develop inside containers/VMs, file watching can miss changes. Consider enabling polling:
-js: bin/shakapacker --watch +js: CHOKIDAR_USEPOLLING=1 bin/shakapacker --watchapp/javascript/packs/application.js (1)
1-16: Boilerplate is fine.No action needed.
tsconfig.json (1)
1-20: TS config is modern and strict—LGTMSettings align with bundler workflows and React JSX. No changes needed.
config/webpack/production.js (1)
6-10: Production hook scaffolding is fineNo-ops are acceptable until you need prod-only tweaks. Exports match the shared generator.
app/javascript/src/HelloWorldApp/reducers/helloWorldReducer.ts (1)
10-18: Approve — confirm UpdateNameAction includes text: stringReducer typing looks correct; repo search returned no matches for UpdateNameAction so the action shape couldn't be verified. Confirm UpdateNameAction defines text: string or narrow the action in the reducer before using action.text.
package.json (1)
15-25: Missing webpack dependency while webpack plugins/config are present — confirm intended bundler.
package.json lists webpack-related plugins/types but no webpack or webpack-dev-server; config/webpack/production.js exists and package.json also contains @rspack/cli and @rspack/core. Add webpack (and webpack-dev-server) for classic webpack flows, or remove/replace webpack-only deps/configs if you’ve switched to rspack.
Locations: package.json (devDependencies), config/webpack/production.jsProcfile.dev-prod-assets (1)
5-5: Use "web" process type and enable static file serving for precompiled assetsApply diff (Procfile.dev-prod-assets: line 5):
-rails: bundle exec rails s -p 3001 +web: RAILS_SERVE_STATIC_FILES=1 bundle exec rails s -p 3001Sandbox precompile attempt failed: /usr/bin/env: 'ruby': No such file or directory — cannot verify assets here. Run locally: bin/rails assets:clobber assets:precompile and confirm precompiled assets exist before using this Procfile.
config/webpack/development.js (1)
8-19: Guard plugin array and prevent duplicate insertionFile: config/webpack/development.js — ensure
pluginsexists and avoid adding ReactRefresh twice; apply this diff:if (process.env.WEBPACK_SERVE) { // eslint-disable-next-line global-require const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); - clientWebpackConfig.plugins.push( - new ReactRefreshWebpackPlugin({ - // Use default overlay configuration for better compatibility - }), - ); + clientWebpackConfig.plugins ||= []; + const hasRefresh = clientWebpackConfig.plugins.some( + (p) => p && p.constructor && p.constructor.name === 'ReactRefreshWebpackPlugin', + ); + if (!hasRefresh) { + clientWebpackConfig.plugins.push(new ReactRefreshWebpackPlugin({})); + } }Verified: repo defaults to rspack (config/shakapacker.yml) and @rspack/plugin-react-refresh is present — rspack uses config/rspack/*, so this webpack change only affects the webpack bundler path.
app/javascript/src/HelloWorldApp/actions/helloWorldActionCreators.ts (1)
15-18: Typed, minimal action creator looks good.Clean TS types with string-literal action type; no issues spotted.
config/routes.rb (1)
2-2: Route addition is straightforward and scoped.
GET /hello_worldtohello_world#indexis fine.bin/shakapacker-dev-server (1)
1-13: Entrypoint looks correct and minimal.Sets up bundler, requires Shakapacker, and runs the dev server runner from the app root. No changes needed.
config/rspack/production.js (1)
10-25: Server bundle settings OK for SSR — confirm externals are configuredlibrary: { type: 'commonjs2' }, globalObject: 'global', and optimization.minimize: false are appropriate for Node SSR; no blockers.
Quick check (rg -nC2 'externals' config/rspack) returned no matches — confirm externals are configured in the base config or elsewhere to avoid bundling Node built-ins/large deps.
babel.config.js (2)
21-29: Don't check RSPACK_DEV_SERVER — use a shared dev-server flag or NODE_ENVRspack does not set RSPACK_DEV_SERVER; it sets process.env.NODE_ENV='development' and injects import.meta.env.* into bundles, so the suggested isDevServer helper (checking RSPACK_DEV_SERVER) won't work. Recommend either: (a) introduce a single explicit DEV_SERVER env var in dev scripts and gate react-refresh on process.env.WEBPACK_SERVE || process.env.DEV_SERVER (recommended); or (b) as a fallback gate on process.env.NODE_ENV === 'development' (broader, may enable refresh outside a running dev server).
Likely an incorrect or invalid review comment.
24-28: Deps present — no action required (react-refresh, babel-plugin-transform-react-remove-prop-types)
Both are declared in package.json (babel-plugin-transform-react-remove-prop-types: ^0.4.24 — package.json:21; react-refresh: ^0.17.0 — package.json:43) and referenced in babel.config.js (react-refresh/babel at line 23; transform plugin at line 24).config/webpack/test.js (1)
6-10: Test hook wiring looks good.No‑op hook is fine and keeps parity with other env configs.
bin/dev (1)
29-34: Sane default route injection.Cleanly appends
--routeonly when absent; good UX for first‑run.app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.server.tsx (1)
1-5: Simple re‑export for SSR is fine.Keeps server entry decoupled; ready for future server‑only concerns.
bin/shakapacker (1)
10-25: Runtime dispatcher LGTM.Clean separation between Rspack/Webpack runners based on config; sensible env selection.
config/webpack/webpack.config.js (1)
5-15: Verified — env files present.
development.js, test.js, production.js are present in config/webpack/.config/rspack/rspack.config.js (1)
5-13: Verified: env-specific files exist.
Found config/rspack/development.js and config/rspack/production.js. test.js not present — add only if needed.app/controllers/hello_world_controller.rb (1)
3-9: Approve — controller, layout, and route verifiedLayout file present and route wired: app/views/layouts/hello_world.html.erb exists and config/routes.rb contains get 'hello_world', to: 'hello_world#index'.
config/webpack/generateWebpackConfigs.js (1)
15-30: Confirm env flags behavior across scripts.
- Webpack and Rspack configs both check WEBPACK_SERVE / CLIENT_BUNDLE_ONLY / SERVER_BUNDLE_ONLY (config/webpack/generateWebpackConfigs.js, config/rspack/{development,production}.js); babel.config.js and config/webpack/development.js reference WEBPACK_SERVE too.
- Procfile.dev sets WEBPACK_SERVE=true (wp-client) and SERVER_BUNDLE_ONLY=true (wp-server) but does not set CLIENT_BUNDLE_ONLY — add or document CLIENT_BUNDLE_ONLY if you intend to use it.
config/rspack/development.js (1)
15-17: No change needed — keep library.type: 'commonjs2'Rspack/webpack use "commonjs2" to assign the bundle to module.exports (what Node/SSR expects); "commonjs" assigns to exports and can break default/module.exports semantics.
File: config/rspack/development.js Lines: 15-17
library: { type: 'commonjs2' }config/initializers/react_on_rails.rb (2)
28-28: Test build command is reasonable for RSpec asset compilation.Looks fine with test compile enabled in shakapacker.yml. Ensure CI sets NODE_ENV/RAILS_ENV to test when invoking this.
44-44: Filename alignment confirmed — server-bundle.js present and correctly configured.Found app/javascript/packs/server-bundle.js; config/webpack/serverWebpackConfig.js declares the 'server-bundle' entry and outputs filename 'server-bundle.js'; clientWebpackConfig explicitly removes that entry from the client build.
config/shakapacker.yml (1)
109-111: CORS wildcard is fine for dev; confirm it’s not used elsewhere.Just a sanity check that this header block isn’t copied into non-dev envs.
config/webpack/serverWebpackConfig.js (3)
9-16: Overall approach is solid.Cloning the common config and constraining to a single server entry avoids cross-mutation of the client config.
110-114: Target remains 'web' by default: OK for ExecJS; switch to 'node' if using Pro node renderer.Leave as-is unless you adopt the Pro node renderer or libraries requiring a node target.
71-103: Verify CSS/assets behavior under RspackScript output shows config/webpack/serverWebpackConfig.js still references MiniCssExtractPlugin (lines 59, 63) and contains url-loader/file-loader rules/comments (lines 31, 70, 100); add/run a verification script to assert MiniCssExtractPlugin is removed/replaced with CssExtractRspackPlugin and that file/url loaders are migrated to asset modules or handled (emitFile=false or null-loader) for SSR.
| @@ -0,0 +1,2 @@ | |||
| <h1>Hello World</h1> | |||
| <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %> | |||
There was a problem hiding this comment.
🧩 Analysis chain
Verify component registration for SSR.
Ensure HelloWorldApp is registered with React on Rails in both client and server bundles; otherwise SSR will raise “Component not registered.”
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
rg -nC2 "ReactOnRails\.register\((\s*)\{?.*HelloWorldApp" app/javascript || echo "Registration not found"
rg -n "HelloWorldApp" app/javascript | wc -lLength of output: 24
Register HelloWorldApp with ReactOnRails for SSR.
No ReactOnRails.register for HelloWorldApp was found under app/javascript (script output: "Registration not found"; "HelloWorldApp" occurrences: 5). app/views/hello_world/index.html.erb uses prerender: true — add the ReactOnRails registration for HelloWorldApp in both the server and client entrypoints under app/javascript so SSR can locate the component.
| # Install JavaScript dependencies | ||
| system!("npm install") | ||
|
|
There was a problem hiding this comment.
Use the repo’s lockfile to pick the right package manager; avoid cross‑lockfile drift.
Hard‑coding npm install can create a package-lock.json in a Yarn/PNPM repo and produce inconsistent dependency graphs.
- # Install JavaScript dependencies
- system!("npm install")
+ # Install JavaScript dependencies honoring the repo's lockfile
+ if File.exist?("yarn.lock")
+ # Use Corepack-managed Yarn if available
+ system!("corepack enable") rescue nil
+ system!("yarn --version") || abort("Yarn not found. Install via Corepack or npm i -g yarn.")
+ system!("yarn install --immutable || yarn install")
+ elsif File.exist?("pnpm-lock.yaml")
+ system!("corepack enable") rescue nil
+ system!("pnpm --version") || abort("pnpm not found. Install via Corepack or npm i -g pnpm.")
+ system!("pnpm install --frozen-lockfile || pnpm install")
+ elsif File.exist?("package-lock.json")
+ system!("npm ci || npm install")
+ else
+ system!("npm install")
+ end📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # Install JavaScript dependencies | |
| system!("npm install") | |
| # Install JavaScript dependencies honoring the repo's lockfile | |
| if File.exist?("yarn.lock") | |
| # Use Corepack-managed Yarn if available | |
| system!("corepack enable") rescue nil | |
| system!("yarn --version") || abort("Yarn not found. Install via Corepack or npm i -g yarn.") | |
| system!("yarn install --immutable || yarn install") | |
| elsif File.exist?("pnpm-lock.yaml") | |
| system!("corepack enable") rescue nil | |
| system!("pnpm --version") || abort("pnpm not found. Install via Corepack or npm i -g pnpm.") | |
| system!("pnpm install --frozen-lockfile || pnpm install") | |
| elsif File.exist?("package-lock.json") | |
| system!("npm ci || npm install") | |
| else | |
| system!("npm install") | |
| end |
🤖 Prompt for AI Agents
In bin/setup around lines 18-20, the script always runs "npm install" which can
create/override a package-lock.json and cause cross-lockfile drift; change it to
detect which lockfile exists (pnpm-lock.yaml, yarn.lock, or package-lock.json)
and run the corresponding installer with lockfile-respecting flags (e.g., pnpm
install --frozen-lockfile if pnpm-lock.yaml exists; yarn install
--frozen-lockfile if yarn.lock exists; npm ci --prefer-offline or npm ci
--no-audit if package-lock.json exists), falling back to a safe installer only
if no lockfile is present.
| // server-bundle is special and should ONLY be built by the serverConfig | ||
| // In case this entry is not deleted, a very strange "window" not found | ||
| // error shows referring to window["webpackJsonp"]. That is because the | ||
| // client config is going to try to load chunks. | ||
| delete clientConfig.entry['server-bundle']; | ||
|
|
There was a problem hiding this comment.
Guard against undefined or functional entry before deleting server-bundle.
Avoids a TypeError if clientConfig.entry is undefined or not an object.
Apply this diff:
// server-bundle is special and should ONLY be built by the serverConfig
// In case this entry is not deleted, a very strange "window" not found
// error shows referring to window["webpackJsonp"]. That is because the
// client config is going to try to load chunks.
- delete clientConfig.entry['server-bundle'];
+ const entry = clientConfig.entry;
+ if (entry && typeof entry === 'object' && 'server-bundle' in entry) {
+ delete entry['server-bundle'];
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // server-bundle is special and should ONLY be built by the serverConfig | |
| // In case this entry is not deleted, a very strange "window" not found | |
| // error shows referring to window["webpackJsonp"]. That is because the | |
| // client config is going to try to load chunks. | |
| delete clientConfig.entry['server-bundle']; | |
| // server-bundle is special and should ONLY be built by the serverConfig | |
| // In case this entry is not deleted, a very strange "window" not found | |
| // error shows referring to window["webpackJsonp"]. That is because the | |
| // client config is going to try to load chunks. | |
| const entry = clientConfig.entry; | |
| if (entry && typeof entry === 'object' && 'server-bundle' in entry) { | |
| delete entry['server-bundle']; | |
| } |
🤖 Prompt for AI Agents
In config/webpack/clientWebpackConfig.js around lines 9 to 14, guard the delete
operation against clientConfig.entry being undefined or a function: check that
clientConfig.entry is a plain object (e.g., typeof clientConfig.entry ===
'object' && clientConfig.entry !== null && !Array.isArray(clientConfig.entry))
before attempting to delete clientConfig.entry['server-bundle']; if that check
fails, skip the delete to avoid a TypeError and preserve existing behavior.
| const commonOptions = { | ||
| resolve: { | ||
| extensions: ['.css', '.ts', '.tsx'], | ||
| }, | ||
| }; | ||
|
|
||
| // Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals | ||
| const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions); |
There was a problem hiding this comment.
Array overwrite bug: resolve.extensions replaces, dropping .js and others.
merge replaces arrays; current code likely breaks JS resolution. Build may fail.
Apply this diff to preserve existing extensions and add only the extras:
-const commonOptions = {
- resolve: {
- extensions: ['.css', '.ts', '.tsx'],
- },
-};
-
-// Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
-const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions);
+// Copy the object using merge b/c the baseClientWebpackConfig is a mutable global
+const commonWebpackConfig = () => {
+ const existingExt =
+ (baseClientWebpackConfig.resolve && baseClientWebpackConfig.resolve.extensions) || [];
+ const extras = ['.css', '.ts', '.tsx'];
+ const extensions = Array.from(new Set([...existingExt, ...extras]));
+ return merge({}, baseClientWebpackConfig, { resolve: { extensions } });
+};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const commonOptions = { | |
| resolve: { | |
| extensions: ['.css', '.ts', '.tsx'], | |
| }, | |
| }; | |
| // Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals | |
| const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions); | |
| // Copy the object using merge b/c the baseClientWebpackConfig is a mutable global | |
| const commonWebpackConfig = () => { | |
| const existingExt = | |
| (baseClientWebpackConfig.resolve && baseClientWebpackConfig.resolve.extensions) || []; | |
| const extras = ['.css', '.ts', '.tsx']; | |
| const extensions = Array.from(new Set([...existingExt, ...extras])); | |
| return merge({}, baseClientWebpackConfig, { resolve: { extensions } }); | |
| }; |
🤖 Prompt for AI Agents
In config/webpack/commonWebpackConfig.js around lines 9 to 16, the current merge
replaces resolve.extensions and drops existing entries like '.js'; change the
logic to merge extensions instead of overwriting: when building the final
config, combine baseClientWebpackConfig.resolve.extensions (if present) with
['.css','.ts','.tsx'], remove duplicates while preserving order, and assign that
array to result.resolve.extensions (or use a mergeWith/arrayMerge strategy that
concatenates uniquely) so existing extensions are preserved and the extras are
appended.
| // Remove the mini-css-extract-plugin from the style loaders because | ||
| // the client build will handle exporting CSS. | ||
| // replace file-loader with null-loader | ||
| serverWebpackConfig.module.rules.forEach((loader) => { | ||
| if (loader.use && loader.use.filter) { | ||
| loader.use = loader.use.filter( | ||
| (item) => !(typeof item === 'string' && item.match(/mini-css-extract-plugin/)), | ||
| ); | ||
| } | ||
| }); |
There was a problem hiding this comment.
De-duplicate and harden SSR loader adjustments.
You filter CSS loaders twice and rely on Webpack-era loader names. With Rspack, CSS extraction uses CssExtractRspackPlugin and assets often use asset modules, not url-loader/file-loader. Consolidate to one pass, only set exportOnlyLocals when CSS Modules are enabled, and disable asset emission via asset module generator.
- // Remove the mini-css-extract-plugin from the style loaders because
- // the client build will handle exporting CSS.
- // replace file-loader with null-loader
- serverWebpackConfig.module.rules.forEach((loader) => {
- if (loader.use && loader.use.filter) {
- loader.use = loader.use.filter(
- (item) => !(typeof item === 'string' && item.match(/mini-css-extract-plugin/)),
- );
- }
- });
+ // Consolidated SSR rule adjustments:
+ // - remove style injection & CSS extraction loaders
+ // - only set exportOnlyLocals for CSS Modules
+ // - disable emitting asset files during SSR
+ const rules = serverWebpackConfig.module.rules;
+ rules.forEach((rule) => {
+ if (Array.isArray(rule.use)) {
+ rule.use = rule.use.filter((item) => {
+ const name = typeof item === 'string' ? item : item && item.loader;
+ return !(
+ name === 'style-loader' ||
+ (typeof name === 'string' && name.includes('mini-css-extract-plugin')) ||
+ (typeof name === 'string' && name.toLowerCase().includes('cssextractrspackplugin'))
+ );
+ });
+ const cssLoader = rule.use.find((item) => {
+ const name = typeof item === 'string' ? item : item && item.loader;
+ return typeof name === 'string' && name.includes('css-loader');
+ });
+ if (cssLoader && cssLoader.options && cssLoader.options.modules) {
+ // Preserve existing modules config and add exportOnlyLocals
+ cssLoader.options.modules = {
+ ...(cssLoader.options.modules === true ? {} : cssLoader.options.modules),
+ exportOnlyLocals: true,
+ };
+ }
+ }
+ // Asset modules (Rspack/Webpack 5)
+ if (rule.type && (rule.type === 'asset' || rule.type === 'asset/resource' || rule.type === 'asset/inline')) {
+ rule.generator = { ...(rule.generator || {}), emit: false };
+ }
+ // Legacy loaders (in case they’re present)
+ if (rule.use && (rule.use.loader === 'url-loader' || rule.use.loader === 'file-loader')) {
+ rule.use.options = { ...(rule.use.options || {}), emitFile: false };
+ }
+ });Also applies to: 71-103
🤖 Prompt for AI Agents
In config/webpack/serverWebpackConfig.js around lines 29 to 38 (and apply same
changes to lines 71-103), consolidate the SSR loader adjustments into a single
pass over module.rules: remove any CSS extraction loaders for both webpack and
rspack by filtering strings/classes matching
/mini-css-extract-plugin|CssExtractRspackPlugin/, detect CSS loader entries and
only set exportOnlyLocals: true when that specific rule has modules enabled, and
for asset rules using file/url loaders or asset modules replace emitter behavior
by disabling emission via the asset generator (e.g. set generator.emit = false)
instead of relying on legacy file-loader; ensure the filtering logic is robust
to loader objects and strings and runs once for all rules.
| serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter( | ||
| (plugin) => | ||
| plugin.constructor.name !== 'WebpackAssetsManifest' && | ||
| plugin.constructor.name !== 'MiniCssExtractPlugin' && | ||
| plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin', | ||
| ); |
There was a problem hiding this comment.
Filter Rspack’s CSS extraction plugin too.
Account for CssExtractRspackPlugin.
serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter(
(plugin) =>
plugin.constructor.name !== 'WebpackAssetsManifest' &&
- plugin.constructor.name !== 'MiniCssExtractPlugin' &&
+ plugin.constructor.name !== 'MiniCssExtractPlugin' &&
+ plugin.constructor.name !== 'CssExtractRspackPlugin' &&
plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin',
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter( | |
| (plugin) => | |
| plugin.constructor.name !== 'WebpackAssetsManifest' && | |
| plugin.constructor.name !== 'MiniCssExtractPlugin' && | |
| plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin', | |
| ); | |
| serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter( | |
| (plugin) => | |
| plugin.constructor.name !== 'WebpackAssetsManifest' && | |
| plugin.constructor.name !== 'MiniCssExtractPlugin' && | |
| plugin.constructor.name !== 'CssExtractRspackPlugin' && | |
| plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin', | |
| ); |
🤖 Prompt for AI Agents
In config/webpack/serverWebpackConfig.js around lines 60 to 65, the plugin
filter currently excludes WebpackAssetsManifest, MiniCssExtractPlugin and
ForkTsCheckerWebpackPlugin but does not exclude Rspack’s CSS extraction plugin;
update the filter to also exclude plugin.constructor.name ===
'CssExtractRspackPlugin' (or add it to the list of names checked) so the Rspack
CSS extraction plugin is filtered out the same way as the others.
| gem "react_on_rails", path: "../../react_on_rails" | ||
|
|
||
| gem "shakapacker", path: "/Users/justin/shakacode/shakapacker/shakapacker-popmenu" |
There was a problem hiding this comment.
🧩 Analysis chain
Absolute path gems will break CI and other machines—gate via ENV and provide fallback
Local paths are non-portable. Add ENV-gated overrides with a default to published gems.
Apply this diff:
-# gem "react_on_rails", "= 15.0"
-
-gem "react_on_rails", path: "../../react_on_rails"
-
-gem "shakapacker", path: "/Users/justin/shakacode/shakapacker/shakapacker-popmenu"
+# Prefer released gems; allow local overrides via ENV for development
+if ENV['REACT_ON_RAILS_PATH']
+ gem "react_on_rails", path: ENV['REACT_ON_RAILS_PATH']
+else
+ gem "react_on_rails"
+end
+
+if ENV['SHAKAPACKER_PATH']
+ gem "shakapacker", path: ENV['SHAKAPACKER_PATH']
+else
+ gem "shakapacker"
+endAlternatively, keep Gemfile clean and use Bundler locals:
bundle config local.react_on_rails ../../react_on_rails and
bundle config local.shakapacker /path/to/shakapacker.
Please confirm CI can bundle without local paths.
🏁 Script executed:
#!/bin/bash
# Display lines around the local gem definitions in Gemfile
sed -n '50,80p' Gemfile
echo -e "\nSearching for Bundler local override configurations..."
rg -n "bundle config local.react_on_rails" -n .
rg -n "bundle config local.shakapacker" -n .
echo -e "\nChecking for .bundle/config file..."
if [ -f .bundle/config ]; then
echo ".bundle/config contents:"
sed -n '1,200p' .bundle/config
else
echo ".bundle/config not found"
fiLength of output: 435
Absolute local gem paths will break CI — gate via ENV or use Bundler locals
Gemfile contains local paths for react_on_rails and shakapacker (lines 59–61); .bundle/config not found — CI/other machines will fail to bundle.
Apply this diff:
-# gem "react_on_rails", "= 15.0"
-
-gem "react_on_rails", path: "../../react_on_rails"
-
-gem "shakapacker", path: "/Users/justin/shakacode/shakapacker/shakapacker-popmenu"
+# Prefer released gems; allow local overrides via ENV for development
+if ENV['REACT_ON_RAILS_PATH']
+ gem "react_on_rails", path: ENV['REACT_ON_RAILS_PATH']
+else
+ gem "react_on_rails"
+end
+
+if ENV['SHAKAPACKER_PATH']
+ gem "shakapacker", path: ENV['SHAKAPACKER_PATH']
+else
+ gem "shakapacker"
+endAlternatively set per-developer bundler locals: bundle config local.react_on_rails ../../react_on_rails and bundle config local.shakapacker /path/to/shakapacker.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| gem "react_on_rails", path: "../../react_on_rails" | |
| gem "shakapacker", path: "/Users/justin/shakacode/shakapacker/shakapacker-popmenu" | |
| # Prefer released gems; allow local overrides via ENV for development | |
| if ENV['REACT_ON_RAILS_PATH'] | |
| gem "react_on_rails", path: ENV['REACT_ON_RAILS_PATH'] | |
| else | |
| gem "react_on_rails" | |
| end | |
| if ENV['SHAKAPACKER_PATH'] | |
| gem "shakapacker", path: ENV['SHAKAPACKER_PATH'] | |
| else | |
| gem "shakapacker" | |
| end |
🤖 Prompt for AI Agents
Gemfile around lines 59 to 61: the Gemfile currently hardcodes local paths for
react_on_rails and shakapacker which will break CI and other machines; update
the Gemfile to conditionally use local paths only when a developer enables them
via an ENV flag (e.g. if ENV["USE_LOCAL_GEMS"] then use path: "..."), otherwise
depend on the published gems, or remove the path entries and document using
per-developer Bundler locals (bundle config local.react_on_rails
../../react_on_rails and bundle config local.shakapacker /path/to/shakapacker);
ensure CI does not set the ENV flag and add a short comment explaining the
developer-local workflow.
| "react-on-rails": "file:.yalc/react-on-rails", | ||
| "react-redux": "^9.2.0", | ||
| "redux": "^5.0.1", | ||
| "rspack-manifest-plugin": "^5.1.0", | ||
| "shakapacker": "file:.yalc/shakapacker", | ||
| "style-loader": "^4.0.0", | ||
| "terser-webpack-plugin": "^5.3.14" |
There was a problem hiding this comment.
🧩 Analysis chain
file:.yalc dependencies are not installable in fresh clones/CI
These will fail outside your machine. Replace with published versions, git urls, or ENV/lerna/workspace links.
Suggested approaches:
- Use released versions (preferred) and override locally with
yalcornpm linkwithout committing file: refs. - Or use Git refs (e.g., github:org/repo#branch) if testing unreleased code.
Verify a clean CI install:
🏁 Script executed:
#!/bash
jq -r '.dependencies | to_entries[] | select(.value|test("^file:\\\\.yalc")) | .key + " => " + .value' package.jsonLength of output: 0
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "PWD: $(pwd)"
echo "--- ripgrep search for 'file:.yalc' ---"
if command -v rg >/dev/null 2>&1; then
rg -n --hidden -S 'file:\.yalc' || true
else
echo "rg not found, falling back to grep"
grep -RIn --exclude-dir=node_modules 'file:\.yalc' . || true
fi
echo ""
echo "--- listing package.json files (first 240 lines each) ---"
find . -name package.json -print -exec sed -n '1,240p' {} \; || trueLength of output: 1839
Replace file:.yalc dependencies — will break fresh/CI installs
Confirmed: package.json contains "react-on-rails": "file:.yalc/react-on-rails" (line 29) and "shakapacker": "file:.yalc/shakapacker" (line 33); package-lock.json also references shakapacker (line 34).
- Replace file:.yalc refs with published NPM versions (preferred). Locally override with yalc/npm link without committing file: refs.
- If testing unreleased code, use Git refs (e.g., github:org/repo#branch) or workspace/lerna links.
- Run a clean install to regenerate package-lock.json and verify CI succeeds.
🤖 Prompt for AI Agents
In package.json around lines 29-35, there are file:.yalc entries for
"react-on-rails" and "shakapacker" which will break fresh/CI installs; replace
these file:.yalc refs with appropriate published npm versions (preferred) or
with explicit Git refs (e.g., github:org/repo#branch) or workspace/lerna links
if you need an unreleased build, remove any .yalc references in
package-lock.json, then run a clean install (rm -rf node_modules
package-lock.json && npm install or pnpm install) to regenerate lockfile and
verify CI; keep local testing via yalc/npm link but do not commit file:.yalc
refs.
1 participant
Summary by CodeRabbit
New Features
Chores