Webpacker: Code chunking error

[krazyjakee]

I'm seeing ReferenceError: webpackJsonp is not defined when trying to use the CommonsChunkPlugin.

Here is the plugin configuration:

new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      filename: "common.js",
      minChunks: 2
    })

common.js

import React from "react"
import Img from "../components/core/img"
import Video from "../components/core/video"
import TimeAgo from "../components/core/TimeAgo"

and in the template
=javascript_pack_tag "common"

[p0wl]

when using the CommonsChunkPlugin, the order of the script tags is important. webpack will extract the "webpack runtime" (where the webpackJsonp function is defined) to the commons chunk. Try moving =javascript_pack_tag "common" before your application javascript.

[krazyjakee]

I have it like this but the error persists

= javascript_pack_tag 'common'
= javascript_pack_tag 'application'

I should add I am using/building a minimal test environment just to get this working, there is nothing more complicated happening in the code-base than what is in the setup instructions and "code splitting" documentation.

[gauravtiwari]

Please follow this guide @krazyjakee https://webpack.js.org/plugins/commons-chunk-plugin/

It explains various setups and their benefits 👍

[krazyjakee]

@gauravtiwari I understand how it is supposed to work, it just isn't working. I've explained above what I have. Don't just drop a documentation link without reading the rest of the issue.

I'll try with a common and a chunk...

new webpack.optimize.CommonsChunkPlugin({
      names: ['common'],
      chunks: ['pulse'],
      minChunks: Infinity
    })

Both files in the manifest, ready to go.
Rails renders the template before it's parent layout. The chunk is in the template, the common and application is in the layout, so could that be the problem?

EDIT: yes it is the problem. You need to use yield to make sure if javascript is in the footer that each template yields javascript_pack_tag to the footer.

[gauravtiwari]

@krazyjakee I am sorry. If I may respectfully point out that you are using it incorrectly. Common Chunk plugin is made to extract common vendor, manifest and module code into separate files. And there are various setups that can be used depending on your application need which is explained here - https://webpack.js.org/plugins/commons-chunk-plugin/

So, for ex -

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: function(module){
        return module.context && module.context.indexOf("node_modules") !== -1;
      }
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: "manifest",
      minChunks: Infinity
    }),

//... rest of the plugins
  ]

In application.html.erb head -

   <%= javascript_pack_tag 'manifest' %>
   <%= javascript_pack_tag 'vendor' %>

So the manifest will have webpack related code and the vendor will have common modules shared across. You can limit that with minChunks.

If you rather need a separate bundle you can require it in on pack file inside packs directory like you have done above and use it normally with - javascript_pack_tag (note this can be done automatically with common chunk if you configure it do so)