Minified react error 130

Minified React error #130 — ‘this’ in JSX arrow function #8738

Describe the bug

It seems like there is some kind of scoping issue when using this in arrow function JSX.

The problem only occurs with production builds, not with dev server. This happens in a clean create-react-app project.

Below code breaks with Minified React error #130.

Hello World

Where as the two following examples work fine.

Hello World

Hello World

Did you try recovering your dependencies?

This is on a fresh create-react-app project.

Which terms did you search for in User Guide?

Minifed React Error
arrow function this
this arrow function
JSX this
JSX arrow function

Environment

S3 bucket on AWS via CloudFront and using serve build locally.

Steps to reproduce

1. npx create-react-app
2. use a this in JSX in an arrow function.
3. run yarn build
4. run serve build
5. open localhost:5000 and read console.

Expected behavior

To work the same as yarn start . Basically, not crash.

Actual behavior

Reproducible demo

Hello World

The text was updated successfully, but these errors were encountered:

I’m not sure why you want to use class-based components as functional components have become more or less the norm nowadays, based on what I have seen.

Based on what I see, it looks you are mixing this and arrow functions, there is no this in arrow functions.

I have converted your code into a working example:

Hello World

If you want to convert it to a 100% functional component you can do it like this:

Hello World

Both examples have been tested yarn build and serve.

I appreciate that there are newer and different ways of doing things. I’m not really trying to argue for any specific style or standard or which is better or not better. My point is, that existing code that worked before and is syntactically correct, no longer does.

I’m all for standards changing and all for migrating to newer better methods of work. If the intent was to completely stop supporting class components then a deprecation warning would be nicer than straight up breaking existing code. I don’t think that was the intent though.

On a side note, neither of your examples would work as replacements. Both just define a separate component that you can use, that’s not what’s happening here. Components are defined, built, derived, etc., on the class based on props. The working examples I showed, are fairly easy workaround for now. Again, whether this is a good or bad approach, is not the point. The point is large code bases can’t be changed overnight and will no longer work, even though no major versions were bumped.

I have the same error.

As @Pixelatedza pointed out, there are valid reasons to use React this way, unless React class components are being removed (which won’t happen anytime soon, I suppose).

@w3bdesign unfortunately, I already use render() <. >notation, so this isn’t the solution.

It cost me many hours to track the exact location because the error never occurs in dev-mode and I found no easy way to make a production build without «minified React errors».

And In my case, the problem doesn’t happen in every location where is used. Additionally, the same build is used in three environments (different backends with same REST api) but the error occurs only in two of them. Is this some kind of internal race condition during React rendering or a non-deterministic behavior regarding Babel-transpiled class properties (order of initialisation)?

@Pixelatedza, did you try to triage which create-react-app version introduced this error?

@noelzubin, @gravity25 you reacted with 👍 , do you have this issue aswell?

Источник

Build Production — Minified React error #130 #2518

Description

develop mode is ok, not error, but only production
also component has this error, no idea

i find this (@babel/plugin-transform-react-constant-element) , and remove after ok!

thank for this react-boilerplate!

Steps to reproduce

Recommend

Versions

• React-Boilerplate: 3.7.0
• Node/NPM: node v8.12.0 / yarn 1.12.3 / npm 6.4.1
• Browser: chrome 71.0.3578.80 x64 (osx)

The text was updated successfully, but these errors were encountered:

Thanks for reporting!

I’m not sure what to make of this though.

The StackOverflow issue turned out to be a syntax error and the create-react-app issue is from 2016. You can see here that they’ve gone back to using @babel/plugin-transform-react-constant-elements since then.

Because of this I’m tempted to think that your code is somehow causing this error. Any chance you can provide more detailed steps to reproduce?

@gretzky You seen this Minified React Error before?

I will try to keep that commit and upload it to git
thanks

@julienben nope, haven’t seen it. I’m also tempted to think there might be some code issue here

Sadly this exact error happened to me too.

Steps to reproduce:

install latest react-boilerplate

edit any file, for instance app/containers/HomePage/index.js . Add a div with the css prop which is new to styled-components v4 and should be supported by react-boilerplate since it uses babel-plugin-styled-components :

Run dev build with yarn start , and it should be fine.

Run prod build with yarn build and yarn start:prod and open browser inspector. App fails to load and you will the same exact error.

This seems to be some kind of incompatibility with babel plugins «transform-react-inline-elements» , «transform-react-constant-elements» which i’ve already reported here.

Will look into it ASAP.

The last time I got this error, it was because the order of babel plugins ( transform-react-constant-elements and transform-react-inline-elements ) had to be in a certain order. It sounds weird, but has anyone tried switching them around?

@gretzky I have tried that, but still face the same issue.

At first the build worked when I removed @babel/plugin-transform-react-inline-elements entirely.

So I thought it was simply an incompatibility between @babel/plugin-transform-react-inline-elements and babel-plugin-styled-components .

But now my builds have stopped working, with or without @babel/plugin-transform-react-inline-elements (and the offline-plugin is disabled) so I’m stumped.

Anybody got any insight on this?

No news over this issue?

I performed another test a few days ago, and realized that this would work using the css function provided by styled-components, but I guess this defeats the whole purpose of the css prop since it requires an import:

By the way, a similar example is provided in the official blog post regarding the css prop release, but not in the official documentation.

@mxstbr maybe a mistake here? What should be the recommended usage?

I’ve provided a sandbox and a repo with a reproducible use case.

I guess this defeats the whole purpose of the css prop since it requires an import

I don’t think having to write an import defeats the purpose. From what I understood, the purpose is to not have to write the styled component yourself and let the Babel plugin do that for you.

I have no idea why we see code samples with the tagged template literal though and others without.

Regarding a fix, I personally have no news. Would love some help on this.

(My only other hope is that somehow doing maintenance on the repo will unlock this issue.)

@julienben it was fixed just a few hours ago. Waiting for it to be released!

The sandbox I shared above already reflects the fix.

Excellent! Can you let me know when it’s released and we’ll make sure to upgrade here?

Sure, no problem!

Thanks a lot @josebrito ! The fix will be merged in #2685 and released in v4.1.

Источник

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130. #4692

Describe the bug
Having blended the netlify tutorial and sourcing the netlify starter blog sample project into my gatsby website, I have all of it working except the ‘preview’ portion of the WYSIWYG.

What I’m really looking for is a way to do greater debug on this, as I doubt I’ll be able to create a repo for you all to reproduce this. Right now, all I see is «There’s been an error — please open an issue on GitHub.» and there isn’t any other real substantial details for me to continue to review.

Based on my own research this is likely a problem with page template and/or the wrapper for the preview, but I can’t source the problem since everything is minified. (Following the various web articles to —no-uglify and.or to modify gatsby-node.js webPackConfig block with optimization minifiy: false didn’t do anything — I suspect ‘me’ error and limited understanding of webpack + gatsby).

To Reproduce

Expected behavior

Screenshots

Applicable Versions:

• Netlify CMS version: netlify-cms-app@2.14.3
• Git provider: git-gateway
• Browser version: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

CMS configuration

Additional context
Any thoughts on how I can get greater visibility into what the problem is under the hood? aka a ‘-v’ on the build =P or some other way to source what line(s) are causing this error?

The text was updated successfully, but these errors were encountered:

Based on my own research this is likely a problem with page template and/or the wrapper for the preview

This is correct. My guess is that you’re trying to render something that React can’t render (possibly undefined ).
I recommend adding some logs in the custom preview component to see if the data you’re getting matches expectations.

Thank you, @erezrokah // the problem was sourced to the previewTemplate I imported.

To others who find this:

1. If you did your own research, you probably saw others having similar, but not identical issues, and they all have different (but often similar) causes.
2. Notes of takeaway: As reported in various other pages, you CANNOT do typical ‘react stuff’ in the previewTemplates. In my particular case, I added statements to the top of the previewTemplate to see what props/unpacked props were being passed into the template. Turns out it was a ton of ‘undefined’s. Whelp, that’d break it for sure!
3. To fix this I backed up in the stack a bit to find out who was responsible for passing those props and it turns out higher in the call chain it was related to my Layout component, which was doing a graphql call to get the sites main logo. *.js minimal file to drive the ‘preview’, and then I’ll have a separate file to drive the build/compile step for production, in this way I can have everything I’ve ever wanted out of life =P.

TL;DR; it IS possible to copy the configurations out of the sample netlify cms gatsby project (obviously making modifications to fit your project along the way), but I HIGHLY recommend that you go through the Netlify CMS tutorial instead, AND THEN, use the starter gatsby project to reference how you want to evolve your own site.

The error above, as were most of integration woes, were mostly caused by the config.yml file, the file structure (aka src>img, and public>images and src>cms>images and just understanding how to lay it all out), and THIS issue (which was entirely non-obvious) really was related to unsupported React «stuff» in the previewTemplate — deleting everything in the return/render and starting from scratch with console.log’s helped to find this issue!

You WILL get undefined back (as a String) if something higher in the call chain doesn’t work correctly, like inline StaticQueries and graphql statements.

To the NetlifyCMS-team: Love the CMS, thank you! Im looking forward to using it. If it’s possible, as a feature request, there are SO many ways to screw up this integration that if we had a way to yarn install netlify-cms and then to use netlify-cli to run a config server to walk through some of this, it would have saved me 3 days of debugging and hacking my code to wrench this into my project (again, not your problem, that’s on me, but I’ve seen enough blogs + bugs + requests for ease of integration over the last 3 days that I think this would help people get it fit into their project). :two-cents: 🎤 -drop.

Источник

Build: WebpackError: Invariant Violation: Minified React error #130 #9038

Description

I’m using react-desktop, which relies on the window global. The component works just fine in develop, but fails while building.
Apparently, this is caused because there is no window defined during the compilation process, since it’s a terminal environment.
As explained here in the docs, you can cheat webpack to not check this module. So I added the following code to gatsby-node.js:

after this, the error about window not being defined went away, but now I get:

I went through a ton of links but nothing helped.

Steps to reproduce

Any ideas what’s going on?
Thank you in advance

Expected result

The project builds

Actual result

The build fails

Environment

This is a NetlifyCMS gatsby starter

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
Shell: 5.3 — /bin/zsh
Binaries:
Node: 9.3.0 — /usr/local/bin/node
npm: 6.3.0 — /usr/local/bin/npm
Browsers:
Chrome: 69.0.3497.100
Safari: 12.0
npmPackages:
gatsby: ^2.0.0 => 2.0.7
gatsby-image: ^2.0.13 => 2.0.13
gatsby-plugin-netlify: ^2.0.0 => 2.0.0
gatsby-plugin-netlify-cms: ^3.0.0 => 3.0.2
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
gatsby-plugin-sass: ^2.0.1 => 2.0.1
gatsby-plugin-sharp: ^2.0.5 => 2.0.5
gatsby-remark-images: ^2.0.1 => 2.0.1
gatsby-source-filesystem: ^2.0.1 => 2.0.1
gatsby-transformer-remark: ^2.1.1 => 2.1.3
gatsby-transformer-sharp: ^2.1.1 => 2.1.1
npmGlobalPackages:
gatsby-cli: 2.4.1

The text was updated successfully, but these errors were encountered:

Источник

Answer by Alberto Palacios

This means, that one of parameter in react-table expect string or function, but get ‘underfined’. In my opinion this error could have happened when you use some variable of type ‘any’ and set typed parameter with value of this variable.,TS type ‘any’ allows to store any type of data in variable, but react-table has typed parameters, so when your variable has ‘undefined’ and you try to set typed variable with this value — you get an error.,One of the way to solve this error is used in rendering pattern to check for existing value of some data variable

One of the way to solve this error is used in rendering pattern to check for existing value of some data variable

{someData && <renderTable...>}

Answer by Marie Haynes

/n

Turns out I needed to delete package-lock.json and node_modules on the server then run $ npm install again.

$ npm install

Answer by Kehlani Pollard

More Details Refer

Answer by Emelia Kent

Same here, open source sensu-go built on the v5.181 tag. Running sensu/web revision ce8990b.
I wasn’t able to pull more information than what nilroy posted above.,

The text was updated successfully, but these errors were encountered:
,Sensu version used (sensuctl, sensu-backend, and/or sensu-agent):
sensu/web revision: ce8990b

in Annotation
in td
in ForwardRef(Typography)
in ForwardRef(WithStyles)
in DictionaryValue
in ForwardRef(WithStyles)
in StyledComponent
in LabelsAnnotationsCell.Value
in tr
in DictionaryEntry
in tbody
in table
in Dictionary
in ForwardRef(WithStyles)
in div
in ForwardRef
in ForwardRef(WithStyles)
in div
in ForwardRef
in ForwardRef(WithStyles)
in LabelsAnnotationsCell
in div
in ForwardRef(CardContent)
in ForwardRef(WithStyles)
in div
in ForwardRef(Paper)
in ForwardRef(WithStyles)
in ForwardRef(Card)
in ForwardRef(WithStyles)
in EntityDetailsInformation
in div
in ForwardRef
in ForwardRef(WithStyles)
in div
in ForwardRef
in ForwardRef(WithStyles)
in EntityDetailsContainer
in div
in div
in div
in AppLayout
in ForwardRef(WithStyles)
in div
in div
in Loader
in ForwardRef(WithStyles)
in AppLayout
in EntityDetailsViewContent
in EntityDetailsView
in Route
in Switch
in NavigationProvider
in Query
in Route
in NamespaceRoute
in Switch
in Route
in ConditionalRoute
in AuthenticatedRoute
in Query
in Apollo(AuthenticatedRoute)
in Switch
in ThemeProvider
in ThemeProvider
in AppThemeProvider
in Provider
in ApolloProvider
in Provider
in AppRoot
in Route
in withRouter(AppRoot)
in Router
in BrowserRouter
in ErrorBoundary

Answer by Alberto Curtis

install latest react-boilerplate,
install latest react-boilerplate
,thank for this react-boilerplate!

yarn start:production

Answer by Regina Sanders

In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.,We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original text of the error.,Passing Functions to Components

More Details Refer

Answer by Mira Peters

You replied to me very late so I restore the EE3 database on my website again. Now I am doing this migration process again to see what happens.
I checked my error log and it gave me this warning continuously.,The error your getting is not something I can reproduce so I don’t have any additional details, the logged error above isn’t from Event Espresso but may well be related.,Does it then show any other errors on that page?

In your wp-config.php file set WP_DEBUG to true:

/n

define( 'WP_DEBUG', true );

define( 'WP_DEBUG', true );

Answer by Kimberly Owen

The editor has encountered an unexpected error for the full message or use the non-minified dev environment for full errors and additional helpful warnings.,Error: Minified React error #31; visit hidden link for the full message or use the non-minified dev environment for full errors and additional helpful.,I am getting this error: Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html? for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

More Details Refer

Answer by Iris Powers

I’ve scoured the web and asked other developers for help, but can’t find any issues with the code. I’ll post my calendar component below (leaving out some functions as they are irrelevant):,I am a student, and have an app I’m working on that utilizes the MDBReact full calendar feature. Upon deployment, my app works great except when I try to navigate to the calendar page. The calendar does not render and throws the Minified React error #130, which equates to:,I never did. I switched to fullcalendar.io for the calendar feature. I had my professor and both TA’s working on it but couldn’t figure it out.

I’ve scoured the web and asked other developers for help, but can’t find any issues with the code. I’ll post my calendar component below (leaving out some functions as they are irrelevant):

import React from "react";
import MDBFullCalendar from "mdb-react-calendar";
import { addDays } from "date-fns";
import UserContext from "../../utils/UserContext";
import API from "../../utils/API";

class CalendarPage extends React.Component {
  static contextType = UserContext;

  constructor(props) {
    super(props);
    this.state = {
      homework: [],
      classes: [],
      tasks: [],
    };
  }

  componentDidMount() {
    const { user } = this.context;
    // Load the state with homework, class info, and tasks
    this.setState({ tasks: user.activities });
    this.setState({ homework: user.homework });
    this.getClassInfo(user.classes);
  }

  componentDidUpdate(_, prevState) {
    if (this.state.homework !== prevState.homework) {
      this.checkHomework();
    }

    if (this.state.classes !== prevState.classes) {
      this.checkClasses();
    }
  }

  onChange = async (e) => {
    let { user, setUser } = this.context;
    this.setState({ tasks: user.activities });
    // Setting new task list (e) to state, context, and database
    if (e.length !== this.state.tasks.length) {
      setUser({ ...user, activities: e });
      this.setState({ tasks: e });
      await API.setActivities(e);
    }
  };

  render() {
    const arrOfObjects = [
      { color: "elegant-color", title: "Test", dark: true },
      { color: "danger-color", title: "Homework Due", dark: false },
      { color: "warning-color", title: "Meeting", dark: false },
      { color: "secondary-color", title: "Lunch", dark: false },
      { color: "default-color", title: "Activity", dark: false },
      { color: "primary-color", title: "Appointment", dark: false },
      { color: "info-color", title: "Class", dark: true },
      { color: "success-color", title: "Other", dark: false },
    ];

    return (
      <MDBFullCalendar
        colors={arrOfObjects}
        tasks={this.state.tasks}
        btnSizes="sm"
        onChange={this.onChange}
      />
    );
  }
}

export default CalendarPage;

Any ideas on why this won’t render? My package.json:

{
  "name": "study-check",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "engines": {
    "node": "12.18.0",
    "npm": "6.14.4"
  },
  "dependencies": {
    "axios": "^0.20.0",
    "date-fns": "^2.16.1",
    "mdb-react-calendar": "file:package",
    "mdbreact": "git+https://oauth2:**key here**@git.mdbootstrap.com/mdb/react/re-pro.git",
    "react": "^16.13.1",
    "react-datepicker": "^3.1.3",
    "react-dom": "^16.13.1",
    "react-icons": "^3.11.0",
    "react-iframe": "^1.8.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-select": "^3.1.0",
    "serve": "^11.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm run build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer by Aniyah Velazquez

You mix up import and require calls in the same file. This might lead to
“WebpackError: Invariant Violation: Minified React error #130” since webpack 4
is stricter than v3.
The solution is to only use import and this also extends to gatsby-ssr and gatsby-browser files.,One solution is to customize your webpack
configuration to replace the offending module with a dummy module during server
rendering.,Errors while building static HTML files (the build-time React SSR process) generally happen for one of the following reasons:

/n

Some of your code references “browser globals” like window or document
that aren’t available in Node.js. If this is your problem you should see an
error above like “window is not defined”. To fix this, find the offending
code and either a) check before calling the code if window is defined so the
code doesn’t run while Gatsby is building (see code sample below) or b) if
the code is in the render function of a React.js component, move that code
into a componentDidMount
lifecycle
or into a useEffect
hook, which
ensures the code doesn’t run unless it’s in the browser.

window

/n

Some of your code references “browser globals” like window or document
that aren’t available in Node.js. If this is your problem you should see an
error above like “window is not defined”. To fix this, find the offending
code and either a) check before calling the code if window is defined so the
code doesn’t run while Gatsby is building (see code sample below) or b) if
the code is in the render function of a React.js component, move that code
into a componentDidMount
lifecycle
or into a useEffect
hook, which
ensures the code doesn’t run unless it’s in the browser.

document

componentDidMount

useEffect

Users with Metamask Version 9.5.2 are facing an error “minified React error #130;” making Metamask completely unusable. There are a few ways to fix it.

Metamask updated to version 9.5.2 on May 13, and ever since then, quite a few users have complained about an irreversible issue that is making the popular Ethereum Wallet Browser extension completely useless. I personally faced this issue and after a little bit of lurking around the Metamask community forum, panicking profusely, doing some meditation, looking for my seed phrase hidden inside a cabinet in a room somewhere no one knows about, I found one or two messages that came to my rescue and its your lucky day, I am going to share it!

What is Metamask Minified React Error #130?

While a user is working on Metamask, the extension shows a screen with popping words no one ever wants to see “Metamask Encountered an error” and basically allows no other action for the user to perform.

Clicking on Error Details will tell you that the error is Minified React Error #130, and of course if you are a coder, unlike me, you might even be able to debug it.

Once this error appears, Metamask becomes completely useless. No amounts of browser or computer restarts will fix it. Trust me. I tried.

The error is prominent in the latest version of Metamask i.e. 9.5.2, and the company says, their developers are working on a fix for it.

But while they work on fixing it, here are few things you can do to quickly start using Metamask again. Before we begin, a fair warning – This is a highly risky operation and you may even lose your funds if you are not careful. DO NOT DO ANYTHING IF YOU DO NOT HAVE THE SEED PHRASE OF YOUR METAMASK ACCOUNT BACKED UP.

Solutions to Minified React Error #130?

There are a couple solutions we can try to get back access to our Metamask.

1. Use another Chain temporarily.
2. Install an earlier version of Metamask.

1. Use Another Chain for Metamask

Many users, including me, have faced this issue when using the Ethereum Mainnet or Ethereum testnets on their Metamask wallets. Hence someone tested it on another chain like BSC, Matic, Harmony and got back access to their Metamask wallet.

• Restart your computer.
• Open your browser with the Metamask extension and open Metamask.
• Choose any other Network, from the menu before entering your password. If you only have Ethereum network, click on Custom RPC and follow the steps on this article to install Binance Smart Chain Network.
• Enter password and login.

You should be able to get access to your metamask wallets via other networks. You can switch back to Ethereum and use it as well, however, that joy maybe short lived as the error may re-appear anytime. Repeat the steps if the error appears again.

2. Install an earlier version of Metamask.

You need the seed phrase of your Metamask wallet for this.

This step requires users to be highly careful, as one small mistake and you may lose your entire Metamask wallet. In this step, we are essentially installing another version of Metamask on the system.

Firstly, download an earlier version of Metamask from Github, preferably Version 9.5.1, and extract the files on your computer. Follow these steps once you have the downloaded the extension.

• On your Chrome Browser, go to Settings > Extensions
• Check “Developer mode” on top right corner.
• At the top, click “Load Unpacked Extension”.
• Navigate to the earlier version of Metamask downloaded and select it.
• Click on Add Existing Wallet/ Import Existing Wallet and enter your seed phrase.

You will see two Metamask wallets installed on the browser, use the earlier version. In order to restore more than one wallet from your old Metamask extension, just click on “Create New Account” until all of your older wallets are added. You can see the instructions here.

Disclaimer: Information on these pages contains forward-looking statements that involve risks and uncertainties. Markets and instruments profiled on this page are for informational purposes only and should not in any way come across as a recommendation to buy or sell in these assets. You should do your own thorough research before making any investment decisions. Coin Crunch India does not in any way guarantee that this information is free from mistakes, errors, or material misstatements. It also does not guarantee that this information is of a timely nature. Investing in Open Markets involves a great deal of risk, including the loss of all or a portion of your investment, as well as emotional distress. All risks, losses and costs associated with investing, including total loss of principal, are your responsibility.

That error translates to:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

In other words, a component was imported as undefined and indicates your chunking config isn’t bundling your code in the way Next.js expects.

For most apps, sticking with the default config is probably your best bet. It’s dynamic and will scale your chunk count as the number of pages in your app grows. In my case, using webpack-bundle-analyzer (and the @next/bundle-analyzer plugin) to analyse the bundle showed that because it was setting minChunks to 4, it was creating large chunks with nearly identical bundled dependencies. While the app only had two real pages, Next.js’s _app and _error pages are also built as separate chunks and didn’t share many dependencies with the main app. Few of my dependencies were on >2 pages.

I initially had problems with the config myself, including getting React error #130. I solved it by sticking closely to the Next.js config. Here’s what I ended up with:

if (isBrowser && isProd) {
  config.optimization = {
    minimizer: [new TerserPlugin()],
    checkWasmTypes: false,
    nodeEnv: false,
    runtimeChunk: { name: 'static/runtime/webpack.js' },
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        default: false,
        vendors: false,
        commons: {
          name: 'commons',
          chunks: 'all',
          minChunks: 2,
          minSize: 30000,
          maxSize: 1500000,
          reuseExistingChunk: true,
        },
        libs: {
          name: 'commons',
          chunks: 'all',
          test: /[\/]node_modules[\/](react|react-dom|lodash|moment|@babel|@fortawesome|apollo-client|react-dates|unidecode|react-apollo|graphql|formik|@sentry)[\/]/,
        },
        styles: {
          name: 'styles',
          test: /.+(css)$/,
          chunks: 'all',
        },
      },
    },
  };
}

It’s optimised for our use case, so your mileage may vary, but as long as you keep the structure you should be able to tweak the various settings to your needs, minChunks, maxSize, etc. But first, analyse your bundle and see if there’s actually a problem with the chunks it creates. If it all looks good, let Next.js handle it for you!

(One area Next.js doesn’t seem to allow you to optimize for is high traffic pages, like the homepage. Ideally these pages would have a separate and optimised bundle containing ONLY their dependencies.)

Notes:

• Only use this config for the browser bundle. It’s not nessasary to chunk the server bundle.

• In the commons chunk I specify a list of dependencies I always want hoisting. Probably not nessasary but experiment to see what works best in your app!

• Having a lower combined bundle size isn’t always advantageous, since it’ll mean your commons chunk is larger and so the first page load will take longer. Depending on your app you may want to optimise to use the least amount of data over multiple pages. Or lowest page bundle size on average. Or a mix of the two and optimise only certain pages as I mentioned above with the homepage.

• If I remember correctly, using the name «vendors» instead of «commons» was the primary problem leading to React error #130.

• This config is optimised for HTTP1. If you’re able to use HTTP2 you may be better off with many tiny bundles rather than fewer larger bundles. I settled on 1.5MB bundles for my commons (set with the maxSize option.)