diff --git a/CHANGELOG.md b/CHANGELOG.md
index 42d0ef1b5e..3b210efab2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -36,6 +36,10 @@ Changes since the last non-beta release.
### Changed
- The global context is now accessed using `globalThis`. [PR 1727](https://github.com/shakacode/react_on_rails/pull/1727) by [alexeyr-ci2](https://github.com/alexeyr-ci2).
+- Generated client packs now import from `react-on-rails/client` instead of `react-on-rails`. [PR 1706](https://github.com/shakacode/react_on_rails/pull/1706) by [alexeyr-ci](https://github.com/alexeyr-ci).
+ - The "optimization opportunity" message when importing the server-side `react-on-rails` instead of `react-on-rails/client` in browsers is now a warning for two reasons:
+ - Make it more prominent
+ - Include a stack trace when clicked
### [15.0.0-alpha.2] - 2025-03-07
diff --git a/docs/guides/how-to-use-different-files-for-client-and-server-rendering.md b/docs/guides/how-to-use-different-files-for-client-and-server-rendering.md
index 3396da907e..4e347c83ee 100644
--- a/docs/guides/how-to-use-different-files-for-client-and-server-rendering.md
+++ b/docs/guides/how-to-use-different-files-for-client-and-server-rendering.md
@@ -9,7 +9,7 @@ Many projects will have different entry points for client and server rendering.
Your Client Entry can look like this:
```js
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails/client';
import App from './ClientApp';
ReactOnRails.register({ App });
```
@@ -22,7 +22,7 @@ import App from './ServerApp';
ReactOnRails.register({ App });
```
-Note that the only difference is on the second line of each of these examples.
+Note that the only difference is in the imports.
## B. Two Options for Using Webpack Resolve Alias in the Webpack Config
diff --git a/docs/javascript/code-splitting.md b/docs/javascript/code-splitting.md
index 76a48473e5..c33e7e93d7 100644
--- a/docs/javascript/code-splitting.md
+++ b/docs/javascript/code-splitting.md
@@ -39,7 +39,7 @@ Here's an example of how you might use this in practice:
#### clientRegistration.js
```js
-import ReactOnRails from 'node_package/lib/ReactOnRails';
+import ReactOnRails from 'react-on-rails/client';
import NavigationApp from './NavigationApp';
// Note that we're importing a different RouterApp than in serverRegistration.js
@@ -76,7 +76,7 @@ Note that you should not register a renderer on the server, since there won't be
#### RouterAppRenderer.jsx
```jsx
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails/client';
import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router/lib/Router';
diff --git a/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/registration.js.tt b/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/registration.js.tt
index 379de1f4fa..d20e720f2d 100644
--- a/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/registration.js.tt
+++ b/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/registration.js.tt
@@ -1,4 +1,4 @@
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails/client';
import <%= config[:component_name] %> from '<%= config[:app_relative_path] %>';
diff --git a/lib/react_on_rails/packs_generator.rb b/lib/react_on_rails/packs_generator.rb
index 420e706100..ae4169162f 100644
--- a/lib/react_on_rails/packs_generator.rb
+++ b/lib/react_on_rails/packs_generator.rb
@@ -107,7 +107,7 @@ def pack_file_contents(file_path)
relative_component_path = relative_component_path_from_generated_pack(file_path)
<<~FILE_CONTENT.strip
- import ReactOnRails from 'react-on-rails';
+ import ReactOnRails from 'react-on-rails/client';
import #{registered_component_name} from '#{relative_component_path}';
ReactOnRails.register({#{registered_component_name}});
diff --git a/node_package/src/ReactOnRails.full.ts b/node_package/src/ReactOnRails.full.ts
index 91ca57eb16..e89525c600 100644
--- a/node_package/src/ReactOnRails.full.ts
+++ b/node_package/src/ReactOnRails.full.ts
@@ -5,8 +5,9 @@ import type { RenderParams, RenderResult, ErrorOptions } from './types';
import Client from './ReactOnRails.client';
if (typeof window !== 'undefined') {
- console.log(
- 'Optimization opportunity: "react-on-rails" includes ~14KB of server-rendering code. Browsers may not need it. See https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352 (Requires creating a free account)',
+ // warn to include a collapsed stack trace
+ console.warn(
+ 'Optimization opportunity: "react-on-rails" includes ~14KB of server-rendering code. Browsers may not need it. See https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352 (Requires creating a free account). Click this for the stack trace.',
);
}
diff --git a/spec/dummy/app/views/pages/client_side_hello_world.html.erb b/spec/dummy/app/views/pages/client_side_hello_world.html.erb
index 596ff1d5b4..06e291d79b 100644
--- a/spec/dummy/app/views/pages/client_side_hello_world.html.erb
+++ b/spec/dummy/app/views/pages/client_side_hello_world.html.erb
@@ -22,7 +22,7 @@
import HelloWorld from '../components/HelloWorld';
- import ReactOnRails from 'react-on-rails';
+ import ReactOnRails from 'react-on-rails/client';
ReactOnRails.register({ HelloWorld });
diff --git a/spec/dummy/app/views/pages/server_side_hello_world.html.erb b/spec/dummy/app/views/pages/server_side_hello_world.html.erb
index f77853e041..8dcb1ea96e 100644
--- a/spec/dummy/app/views/pages/server_side_hello_world.html.erb
+++ b/spec/dummy/app/views/pages/server_side_hello_world.html.erb
@@ -48,7 +48,7 @@
import HelloWorld from '../components/HelloWorld';
- import ReactOnRails from 'react-on-rails';
+ import ReactOnRails from 'react-on-rails/client';
ReactOnRails.register({ HelloWorld });
diff --git a/spec/dummy/app/views/pages/server_side_redux_app.html.erb b/spec/dummy/app/views/pages/server_side_redux_app.html.erb
index d9c96b394d..b11ad675f8 100644
--- a/spec/dummy/app/views/pages/server_side_redux_app.html.erb
+++ b/spec/dummy/app/views/pages/server_side_redux_app.html.erb
@@ -37,7 +37,7 @@
import ReduxApp from './ClientReduxApp';
- import ReactOnRails from 'react-on-rails';
+ import ReactOnRails from 'react-on-rails/client';
ReactOnRails.register({ ReduxApp });
diff --git a/spec/dummy/app/views/pages/server_side_redux_app_cached.html.erb b/spec/dummy/app/views/pages/server_side_redux_app_cached.html.erb
index 494610d561..dec8fb17db 100644
--- a/spec/dummy/app/views/pages/server_side_redux_app_cached.html.erb
+++ b/spec/dummy/app/views/pages/server_side_redux_app_cached.html.erb
@@ -43,7 +43,7 @@
import ReduxApp from './ClientReduxApp';
- import ReactOnRails from 'react-on-rails';
+ import ReactOnRails from 'react-on-rails/client';
ReactOnRails.register({ ReduxApp });
diff --git a/spec/dummy/app/views/pages/xhr_refresh.html.erb b/spec/dummy/app/views/pages/xhr_refresh.html.erb
index f46cf080cc..fdad0ee637 100644
--- a/spec/dummy/app/views/pages/xhr_refresh.html.erb
+++ b/spec/dummy/app/views/pages/xhr_refresh.html.erb
@@ -32,7 +32,7 @@
import HellowWorldRehydratable from '../components/HellowWorldRehydratable';
- import ReactOnRails from 'react-on-rails';
+ import ReactOnRails from 'react-on-rails/client';
ReactOnRails.register({ HellowWorldRehydratable });
diff --git a/spec/dummy/client/app/startup/HelloWorldRehydratable.jsx b/spec/dummy/client/app/startup/HelloWorldRehydratable.jsx
index 8f367c4e0c..2b894ec399 100644
--- a/spec/dummy/client/app/startup/HelloWorldRehydratable.jsx
+++ b/spec/dummy/client/app/startup/HelloWorldRehydratable.jsx
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails/client';
import RailsContext from '../components/RailsContext';
class HelloWorldRehydratable extends React.Component {
diff --git a/spec/dummy/client/app/startup/ReduxSharedStoreApp.client.jsx b/spec/dummy/client/app/startup/ReduxSharedStoreApp.client.jsx
index 4a9dbf4d66..ba0bd726b1 100644
--- a/spec/dummy/client/app/startup/ReduxSharedStoreApp.client.jsx
+++ b/spec/dummy/client/app/startup/ReduxSharedStoreApp.client.jsx
@@ -1,9 +1,9 @@
-// Top level component for client side.
-// Compare this to the ./ServerApp.jsx file which is used for server side rendering.
+// Top level component for the client side.
+// Compare this to the ./ReduxSharedStoreApp.server.jsx file which is used for server side rendering.
import React from 'react';
import { Provider } from 'react-redux';
-import ReactOnRails from 'react-on-rails';
+import ReactOnRails from 'react-on-rails/client';
import ReactDOMClient from 'react-dom/client';
import HelloWorldContainer from '../components/HelloWorldContainer';
diff --git a/spec/dummy/client/app/startup/ReduxSharedStoreApp.server.jsx b/spec/dummy/client/app/startup/ReduxSharedStoreApp.server.jsx
index 1f2d3b11c6..5982ab4415 100644
--- a/spec/dummy/client/app/startup/ReduxSharedStoreApp.server.jsx
+++ b/spec/dummy/client/app/startup/ReduxSharedStoreApp.server.jsx
@@ -1,5 +1,5 @@
-// Top level component for serer side.
-// Compare this to the ./ClientReduxSharedStoreApp.jsx file which is used for client side rendering.
+// Top level component for the server side.
+// Compare this to the ./ReduxSharedStoreApp.client.jsx file which is used for client side rendering.
import React from 'react';
import ReactOnRails from 'react-on-rails';
diff --git a/spec/dummy/spec/packs_generator_spec.rb b/spec/dummy/spec/packs_generator_spec.rb
index 1e19610b9c..29331470a3 100644
--- a/spec/dummy/spec/packs_generator_spec.rb
+++ b/spec/dummy/spec/packs_generator_spec.rb
@@ -258,7 +258,7 @@ def self.configuration
component_name = "ReactClientComponentWithClientAndServer"
component_pack = "#{generated_directory}/#{component_name}.js"
pack_content = File.read(component_pack)
- expect(pack_content).to include("import ReactOnRails from 'react-on-rails';")
+ expect(pack_content).to include("import ReactOnRails from 'react-on-rails/client';")
expect(pack_content).to include("ReactOnRails.register({#{component_name}});")
expect(pack_content).not_to include("registerServerComponent")
end
@@ -294,7 +294,7 @@ def self.configuration
component_name = "ReactClientComponent"
component_pack = "#{generated_directory}/#{component_name}.js"
pack_content = File.read(component_pack)
- expect(pack_content).to include("import ReactOnRails from 'react-on-rails';")
+ expect(pack_content).to include("import ReactOnRails from 'react-on-rails/client';")
expect(pack_content).to include("ReactOnRails.register({#{component_name}});")
expect(pack_content).not_to include("registerServerComponent")
end
@@ -310,7 +310,7 @@ def self.configuration
component_name = "ReactServerComponent"
component_pack = "#{generated_directory}/#{component_name}.js"
pack_content = File.read(component_pack)
- expect(pack_content).to include("import ReactOnRails from 'react-on-rails';")
+ expect(pack_content).to include("import ReactOnRails from 'react-on-rails/client';")
expect(pack_content).to include("ReactOnRails.register({#{component_name}});")
expect(pack_content).not_to include("registerServerComponent")
end
@@ -326,7 +326,7 @@ def self.configuration
component_name = "ReactServerComponent"
component_pack = "#{generated_directory}/#{component_name}.js"
pack_content = File.read(component_pack)
- expect(pack_content).to include("import ReactOnRails from 'react-on-rails';")
+ expect(pack_content).to include("import ReactOnRails from 'react-on-rails/client';")
expect(pack_content).to include("ReactOnRails.register({#{component_name}});")
expect(pack_content).not_to include("registerServerComponent")
end