Unable to specify multiple server rendering files when using web packer dev server #1034
Description
Steps to reproduce
Here is an example set up of the files:
Procfile.dev
web: DB_CONNECTION_POOL=${WEB_DB_CONN_POOL:-5} bundle exec puma -C config/puma.rb
worker: DB_CONNECTION_POOL=${SIDEKIQ_DB_CONN_POOL:-5} MALLOC_ARENA_MAX=2 bundle exec sidekiq -C config/sidekiq.yml -t 25
webpacker: ./bin/webpack-dev-server
config/webpacker/yml
development:
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'config/application.rb
...
config.react.server_renderer_options = {
files: ["ssr_pack_one.js", "ssr_pack_two.js"], # files to load for prerendering
}
...packs/application.js
import ReactRailsUJS from 'react_ujs';
import Rails from 'rails-ujs';
Rails.start();
const componentRequireContext = require.context('react/ssr_comps_one', true);
ReactRailsUJS.useContext(componentRequireContext);packs/ssr_pack_one.js
import ReactRailsUJS from 'react_ujs';
const componentRequireContext = require.context('react/ssr_comps_one', true);
ReactRailsUJS.useContext(componentRequireContext);packs/ssr_pack_two.js
import ReactRailsUJS from 'react_ujs';
const componentRequireContext = require.context('react/ssr_comps_two', true);
ReactRailsUJS.useContext(componentRequireContext);react/ssr_comps_one/TestComponent.js
import React from 'react';
export default () => <div> Test Component</div>;react/ssr_comps_two/TestComponentTwo.js
import React from 'react';
export default () => <div> Test ComponentTwo</div>;application.html.erb
<!DOCTYPE html>
<html lang="en-nz">
<head>
<%= stylesheet_pack_tag "application" %>
<%= javascript_pack_tag("application", nonce: true) %>
</head>
<body>
<%= react_component("TestComponent", { }, prerender: true) %>
</body>
</html>Expected behavior
When using webpack dev server we should be able to specify more than one file to compile for server rendering, which can prerender a component.
Actual behavior
We get an error from the server:
Uncaught SyntaxError: Illegal return statement at undefined:30402:10
System configuration
Sprockets or Webpacker version: 4.0.1
React-Rails version: 2.4.7
React_UJS version:
Rails version: 5.2
Ruby version: 2.6.5
We want to be able to have two separate server rending packs so that we are not compiling all components when some are not needed.
During development, using the webpack-dev-server, adding a second file results in:
Uncaught SyntaxError: Illegal return statement at undefined:30402:10
Removing the file solves the issue.
It also seems to work fine when not using webpack-dev-server.
Hopefully I've provided enough information, but let me know if I can provide some more