[FLUSH CHUNKS]: Unable to find pages-Home in Webpack chunks. Please check usage of Babel plugin.

[ianseverance]

I'm receiving this error after updating to Webpack 4 and updated the Universal modules:

[FLUSH CHUNKS]: Unable to find pages-Home in Webpack chunks. Please check usage of Babel plugin.

My page no longer loads the page specific .js file. (Used to load <script type="text/javascript" src="/page/Home.js" defer="defer"></script>)

This is what shows up in my HTML now:

<script type="text/javascript" src="/static/bootstrap.js" defer="defer"></script>
<script type="text/javascript" src="/static/vendor.js" defer="defer"></script>
<script type="text/javascript" src="/static/main.js" defer="defer"></script>

The page successfully loads, but it is without javascript. What have I done wrong?

client.dev.js

const path = require('path')
const webpack = require('webpack')
const WriteFilePlugin = require('write-file-webpack-plugin')
const AutoDllPlugin = require('autodll-webpack-plugin')

module.exports = {
  name: 'client',
  mode: 'development',
  target: 'web',
  devtool: 'cheap-module-source-map',
  entry: [
    '@babel/polyfill',
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=false&quiet=false&noInfo=false',
    path.resolve(__dirname, '../../src/index.js')
  ],
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, '../../buildClient'),
    publicPath: '/static/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(ttf|woff|woff2)$/,
        exclude: /node_modules/,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'assets/'
          }
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        exclude: /node_modules/,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'assets/'
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.ttf', '.woff', '.woff2']
  },
  optimization: {
    runtimeChunk: {
      name: 'bootstrap'
    },
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          priority: -10
        }
      }
    }
  },
  plugins: [
    new WriteFilePlugin(), // See what chunks are produced in `dev`
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    }),
    new AutoDllPlugin({
      context: path.join(__dirname, '../..'),
      filename: '[name].js',
      entry: {
        vendor: [
          'react',
          'react-dom',
          'react-redux',
          'redux',
          'history/createBrowserHistory',
          'redux-first-router',
          'redux-first-router-link',
          '@babel/polyfill',
          'redux-devtools-extension/logOnlyInProduction'
        ]
      }
    })
  ]
}

server.dev.js

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const WriteFilePlugin = require('write-file-webpack-plugin')

const res = p => path.resolve(__dirname, p)

// If you're specifying externals to leave unbundled, you need to tell Webpack
// to still bundle `react-universal-component`, `webpack-flush-chunks` and
// `require-universal-module` so that they know they are running within Webpack
// and can properly make connections to client modules:
const externals = fs
  .readdirSync(res('../../node_modules'))
  .filter(
    x =>
      !/\.bin|react-universal-component|require-universal-module|webpack-flush-chunks/.test(
        x
      )
  )
  .reduce((externals, mod) => {
    externals[mod] = `commonjs ${mod}`
    return externals
  }, {})

module.exports = {
  name: 'server',
  mode: 'development',
  target: 'node',
  devtool: 'cheap-module-source-map',
  entry: [
    '@babel/polyfill',
    res('../../server/render.js')
  ],
  externals,
  output: {
    path: res('../../buildServer'),
    filename: '[name].js',
    libraryTarget: 'commonjs2',
    publicPath: '/static/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(ttf|woff|woff2)$/,
        exclude: /node_modules/,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'assets/'
          }
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        exclude: /node_modules/,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'assets/'
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.ttf', '.woff', '.woff2']
  },
  plugins: [
    new WriteFilePlugin(),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    })
  ]
}

[ianseverance]

@ScriptedAlchemy Do you have any advice? 😃

[ScriptedAlchemy]

update or downgrade to @latest on all faceyspacey products

[ScriptedAlchemy]

how old is your config?

[lutzk]

i had that error too
i fixed it with downgrade "[email protected]" to to "[email protected]"

wich seems caused by faceyspacey/react-universal-component@8c930fa

[ScriptedAlchemy]

dont use the alphas anymore, everything has been officially released-i decided against 4.0 and instead brought out a stable set of releases in v3

react 16 api will the the next major release

[lutzk]

good to know
thanks! @ScriptedAlchemy

[ianseverance]

I have updated all faceyspacey modules but it is still not working (they were already @latest)

dep
"react-universal-component": "^3.0.3",
"redux-first-router": "^0.0.16-next",
"redux-first-router-link": "^1.4.2",
"webpack-flush-chunks": "^2.0.3"

dev
"babel-plugin-universal-import": "^3.1.2"

Could it have anything to do with using Babel 7? I was trying to upgrade everything at once and was hoping for the best 😆 @ScriptedAlchemy

[ianseverance]

The file is there, just not being added into the dynamic chunks...

[ianseverance]

faceyspacey/react-universal-component@8c930fa The removal of the babel plugin check to replace the '-' with '/' is exactly the problem though, isn't it? Which is why in my logs it can't find pages-Home because it is pages/Home? @ScriptedAlchemy

[ScriptedAlchemy]

wait, yeah your build is getting nested, it shouldnt be doing that.

One of those deps is not updating its self, can you try killing your yarn lock and node modules
fresh install

Inside RUC you can also add ignoreBabelRename: true

search it on the RUC readme

https://github.com/faceyspacey/react-universal-component

[ScriptedAlchemy]

Pretty much, im keeping the dashes instead of slashes, to resolve it in flush chunks is not worth the hassle.

[ianseverance]

When I start with a fresh yarn.lock and a fresh node modules install, the build is still nested (Home.js file under pages/) and the file doesn't appear in my HTML under the dyanmic chunks.

When I add the option ignoreBabelRename: true the file does appear in my HTML under dynamic chunks.

But now I am having a problem with Webpack making another package (specifically redux-responsive) not work. Could Webpack's new optimization settings be too aggressive to the point where some javascript isn't making it into the build files?

I just debugged all my packages (updated them all 1-by-1) and the only time my site stops working (the redux-responsive module, which has nothing to do with Webpack) is when it comes to updating the faceyspacey modules and Webpack to v4. @ScriptedAlchemy

[ScriptedAlchemy]

Sadly, for things like this, theres so many variables.

Ive seen this issue show up before, it must be something related to babel configurations?

without seeing the whole project, i cant determine the issue. if things are updated, and configured properly - it works

[ScriptedAlchemy]

might be your autodll plugin

[ianseverance]

Here is my .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-flow",
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-syntax-dynamic-import",
    ["module-resolver", {
      "alias": {
        "server": "./server",
        "src": "./src",
        "assets": "./src/assets",
        "components": "./src/components",
        "containers": "./src/containers",
        "pages": "./src/pages",
        "state": "./src/state",
        "actions": "./src/state/actions",
        "reducers": "./src/state/reducers",
        "styles": "./src/styles",
        "templates": "./src/templates",
        "themes": "./src/themes",
        "utils": "./src/utils",
        "tools": "./tools",
        "wp": "./tools/webpack"
      }
    }],
    "universal-import"
  ],
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ]
    }
  }
}

There are discrepancies between the faceyspacey modules on how to setup everything together, e.g. webpack optimization settings, which may be causing my problem (too many settings that I tossed together). Is there any word on an updated demo of all the faceyspacey modules?

[ScriptedAlchemy]

Do you compile your server code?

[ianseverance]

Yes, a buildServer folder is created when I run the server.

[ScriptedAlchemy]

you got a repo for me?

[ScriptedAlchemy]

also check this:

faceyspacey/redux-first-router#305