Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React scripts issue: loop loading chunk.js

I'm using React scripts v3. I have this issue whenever I do an action of in the page ( mouse event, forms...) the application keeps downloading chunk.js

enter image description here

This my package.json

{
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.3.1",
    "cors": "^2.8.5",
    "lodash.flatten": "^4.4.0",
    "lodash.get": "^4.4.2",
    "lodash.intersection": "^4.4.0",
    "mockdate": "^2.0.2",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.1",
    "react-dom": "^16.8.6",
    "react-router": "4.3.1",
    "react-router-dom": "4.3.1",
    "react-scripts": "^3.0.1",
    "recompose": "^0.30.0",
    "url-search-params-polyfill": "^6.0.0",
    "uuid": "^3.3.2"
  },
  "scripts": {
    "mocks": "cd mocks && npm start",
    "start-dotnet": "react-scripts start",
    "start": "concurrently \"npm run mocks\" \"react-scripts start\"",
    "build": "react-scripts build",
    "test": "set NODE_ICU_DATA=node_modules/full-icu&& react-scripts test --env=jsdom",
    "test:staged": "npm run test -- --coverage --findRelatedTests --watchAll=false",
    "test-coverage": "npm run test -- --coverage --watchAll=false"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*src/**/*.js": [
      "prettier --write",
      "npm run test:coverage",
      "git add"
    ]
  },
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  },
  "browserslist": [
    ">0.2%",
    "ie 11",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@commitlint/cli": "^8.0.0",
    "@commitlint/config-conventional": "^8.0.0",
    "concurrently": "^4.1.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "enzyme-to-json": "^3.3.5",
    "eslint-plugin-react-hooks": "^1.6.0",
    "full-icu": "^1.3.0",
    "husky": "^2.4.1",
    "jest": "^24.7.1",
    "jest-cucumber": "^2.0.11",
    "lint-staged": "^8.2.1",
    "node-sass": "^4.11.0",
    "prettier": "^1.18.2"
  }
}

Does anyone have an idea about this issue?

like image 719
Melchia Avatar asked Jul 08 '19 13:07

Melchia


People also ask

How do I fix chunk load error in react?

If you are encountering this error as a user of an application, the simplest way to resolve it is to clear your browser cache (and also restart it for good measure) and try again. If the error was because your browser had cached older files, this should fix the issue.

What causes ChunkLoadError?

A "ChunkLoadError" generally means that a checksum failed for a javascript file. These errors occur when the browser requests a JS code chunk, and receives a response whose checksum does not match the expected “integrity=…” attribute associated with the <script> tag that refers to it.

What is chunking in react?

Chunks allow us to separate our codes into bundles, which are a group of related chunks packaged into a single file. Tools such as Create React App, Gatsby, and Next. js use webpack to bundle applications. Bundlers like webpack import all of the application files and merge them into a single bundle.


1 Answers

I ran into the same issue, where it kept on requesting for chunk. It happened because there was a reference issue inside my JS chunk that I was lazy loading. So I was lazy loading page data, and inside the JS for that, I was doing an import to a file that did not exists. And that lead to this issue.

Fixing that fixed it for me.

like image 177
Aman Avatar answered Oct 16 '22 12:10

Aman