Server rendering with CommonsChunkPlugin raises webpackJsonp is not defined #863
Comments
|
@raapperez You might find you solution in rails/webpacker#119 or webpack/webpack#368 |
|
I'm running into the same issue. Can you be more specific with where the solution is in those threads? They are rather long threads. |
|
The simple solution is make sure your The first possible solution is that there is some sort of name conflict with the chunk and file name, and the other one was look at other react with rails solutions, the next best one being https://github.com/renchap/webpacker-react incase that doesn't have the chunking issues. |
|
How can I make sure I'm currently using the plugin like this: I ultimately want common chunking for the client's benefit, but not sure how to make Webpacker exclude it for server side rendering. Any ideas? |
|
Note for myself: This will be relevant when it comes to a fix: renchap/webpacker-react#3 (comment) |
|
I managed to get this working on our main project by stopping the We're using fairly standard setups for const { environment } = require('@rails/webpacker');
const webpack = require('webpack')
environment.plugins.append(
'CommonsChunkVendor',
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: (module) => {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1
}
})
)
environment.plugins.append(
'CommonsChunkManifest',
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
})
)
module.exports = environment;I set the first chunk to only run on the Then I set the second chunk (which extracts the Webpack runtime) to only run on the chunk called So I wound up with: const { environment } = require('@rails/webpacker');
const webpack = require('webpack');
environment.plugins.append(
'CommonsChunkVendor',
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: module => {
return module.context && module.context.includes('node_modules');
},
chunks: ['application']
})
);
environment.plugins.append(
'CommonsChunkManifest',
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity,
chunks: ['vendor']
})
);
module.exports = environment;In Hope that helps! For reference, I ran So you see |
|
I should also mention that it was wingrunr21's post and gist that helped me get on the right track, so thanks for linking it, @BookOfGreg. 😃 |
|
A little update for those curious - since it's so small, I wound up inlining the contents of |
@RiccardoMargiotta, good idea. It feels convoluted how I have it here; do you have a better way. Thanks module ApplicationHelper
def manifest_tag
path = File.join(Rails.root, 'public/packs/manifest.json')
content = File.read(path)
data = JSON.parse(content)
filename = data["manifest.js"]
filepath = File.join(Rails.root, 'public', filename)
javascript_tag "window.webpackManifest = #{File.read(filepath)}"
end
end<%= manifest_tag %> |
|
@jDeppen We never came up with a particularly elegant way of doing this, here's what it looks like on our project: <%= inline_js asset_pack_path "manifest.js" %>module AssetsHelper
def inline_js path
javascript_tag(File.read(File.join(Rails.root, 'public', asset_path(path))))
end
end |
|
@RiccardoMargiotta, thanks. Are you getting this in the terminal? It looks like that's happening because the This doesn't occur when making the extra request rather than inlining. I'm going to throw the JS requests right above |
|
@jDeppen Ah, we're not actually using sourcemaps, we've updated our webpack |
|
I took @RiccardoMargiotta's solution and made it a bit more dynamic. This is what I ended up with, in case it helps anyone: const path = require('path');
const fs = require('fs');
const bundlesPath = path.join(__dirname, '..', '..', 'app', 'javascript', 'packs');
const bundles = fs.readdirSync(bundlesPath).map((file) => {
return file.replace('.js', '');
}).filter((file) => file !== 'server-bundle'); // This could be server_rendering, etc
// Extract common vendor libraries into a vendor pack
environment.plugins.append(
'CommonsChunkVendor',
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: (module) => {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
},
chunks: bundles
})
);
// Extract webpack bootstrap into its own file. This allows a file that has not
// been changed to keep its hash when other files change.
environment.plugins.append(
'CommonsChunkManifest',
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity,
chunks: ['vendor']
})
); |
|
Possibly related to #970 |
|
As per the discussion in the above thread, we can close this issue. #970 is a different issue we need to look after. |
I started a clean project using:
Then I added a server render tag in my view:
And it worked as expected.
Then I tried to setup a commons chunk plugin in the webpack/environment.js file:
It makes the server rendering stop working with the error:
It looks like the compiled file server_rendering.js requires that the common.js chunk to be loaded first.
So I tried to add the following code in config/application.rb:
And it raises the following error:
Please, can someone give me a solution to this problem? I know if I skip the server_rendering in commons chunk process it would work, but I don't know how to do this.
System configuration
Webpacker version: 3.2.1
React-Rails version: 2.4.3
Rect_UJS version: 2.4.3
Rails version: 5.1.4
Ruby version: 2.4.1
The text was updated successfully, but these errors were encountered: