2

I followed this tutorial do disable chunks/code-splitting when running npm build, after running npm build it still creates chunks

Anyone has any idea why this is happening, for the record this is my 'build-non-split.js' file and I don't use webpack, I just use create-react-app2

const rewire = require('rewire')
const defaults = rewire('react-scripts/scripts/build.js') // If you ejected, use this instead: const defaults = rewire('./build.js')
let config = defaults.__get__('config')

config.optimization.splitChunks = {
    cacheGroups: {
        default: false
    }
}

config.optimization.runtimeChunk = false
// Renames main.00455bcf.js to main.js
config.output.filename = 'static/js/[name].js'

// Renames main.b100e6da.css to main.css
config.plugins[5].options.filename = 'static/css/[name].css'
config.plugins[5].options.moduleFilename = () => 'static/css/main.css'
ijzeredraak5
  • 33
  • 9

1 Answers1

3

I use this exact same technique (same code for build-non-split.js) for preventing code splitting on building react apps... it worked for me up until literally today, some major changes happened with the update to React v17. I fixed it by removing reportWebVitals(); and import reportWebVitals from "./reportWebVitals"; from index.js. Web vitals seem to be a new feature of React 17, and replaced service worker.

It seems like it wasn't working for you even before the React update, so you might try deleting the service worker import and function call in index.js. Or, just upgrade your react app to v17 and delete the web vitals per above.

meerkat_citronella
  • 140
  • 3
  • 8