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
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?
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.
I ran into this problem today. I had incorrectly set the onChange action to a string instead of a function, so changing it to a function worked for me.
Related
I just created my react-app and everything is working on my localhost also connecting to backend app through API which i configured, Now I just deployed my react app to nginx server after running yarn run build and i uploaded the build folder to my server root directory. The home page was serve and other page which needn't to connect to the server was serve as well but when I try to login I got an error and from the error I realised my app was sending request to http://localhost:3000/v1/auth/login instead of http://api.mysite.com/v1/auth/login How do I make this changes before building my react app. Below is my package.json file
{
"name": "mysite",
"version": "0.1.0",
"private": true,
"proxy": "https://api.mysite.com",
"dependencies": {
"#date-io/dayjs": "^2.16.0",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#material-ui/core": "^4.12.4",
"#mui/icons-material": "^5.10.2",
"#mui/material": "^5.10.17",
"#mui/x-date-pickers-pro": "^5.0.12",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"bootstrap": "^5.2.0",
"jquery": "^3.6.0",
"mdb-react-ui-kit": "^4.1.0",
"moment": "^2.29.4",
"popper.js": "^1.16.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-bootstrap-submenu": "^2.0.0",
"react-countdown": "^2.3.5",
"react-dom": "^18.2.0",
"react-fontawesome": "^1.7.1",
"react-icons": "^4.4.0",
"react-image-gallery": "^1.2.9",
"react-loading-skeleton": "^3.1.0",
"react-phone-number-input": "^3.2.9",
"react-pro-sidebar": "^1.0.0-alpha.7",
"react-redux": "^8.0.2",
"react-responsive": "^9.0.0-beta.10",
"react-responsive-carousel": "^3.2.23",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-select": "^5.6.1",
"react-simple-star-rating": "^4.0.5",
"react-slick": "^0.29.0",
"redux": "^4.2.0",
"semantic-ui-react": "^2.1.3",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.5",
"sweetalert": "^2.1.2",
"swiper": "^8.3.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/plugin-proposal-optional-chaining": "^7.18.9",
"#expo/webpack-config": "^0.17.2",
"react-error-overlay": "6.0.9"
},
"resolutions": {
"styled-components": "^5",
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
Proxies only work for the dev server and don't work in production. You'll have to create an env file and use that instead. Here's how you'd do it:
// .env
REACT_APP_APP_HOST='https://api.mysite.com'
process.env.REACT_APP_APP_HOST // use this to access your api
I've installed the npm package #yaireo/tagify v4.16.4 however when I try to start my react app I get the following error:
./node_modules/#yaireo/tagify/dist/tagify.js 594:33
Module parse failed: Unexpected token (594:33)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| headerRef = this.dropdown.getHeaderRef(),
| footerRef = this.dropdown.getFooterRef();
> newHeaderElem && headerRef?.parentNode.replaceChild(newHeaderElem, headerRef);
| newFooterElem && footerRef?.parentNode.replaceChild(newFooterElem, footerRef);
| },
My package.json looks like this:
{
"name": "portal_service",
"version": "0.1.0",
"homepage": ".",
"private": true,
"dependencies": {
"#ant-design/compatible": "1.1.0",
"#ant-design/icons": "4.7.0",
"#babel/plugin-proposal-decorators": "7.16.5",
"#casl/ability": "3.4.0",
"#casl/react": "1.0.4",
"#craco/craco": "6.4.3",
"#fortawesome/fontawesome-svg-core": "1.2.29",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/pro-duotone-svg-icons": "5.13",
"#fortawesome/pro-light-svg-icons": "5.13",
"#fortawesome/pro-regular-svg-icons": "5.13",
"#fortawesome/pro-solid-svg-icons": "5.13",
"#fortawesome/react-fontawesome": "0.1.11",
"#okta/okta-react": "3.0.1",
"#react-hook/resize-observer": "1.2.5",
"#tisoap/react-flow-smart-edge": "1.0.1",
"#yaireo/tagify": "4.13.1",
"ant-design-pro": "2.3.2",
"antd": "4.16.13",
"antd-img-crop": "3.16.0",
"bootstrap": "4.6.1",
"chart.js": "2.8.0",
"chartjs-plugin-zoom": "0.7.0",
"firebase": "9.6.1",
"google-map-react": "1.1.7",
"jsoneditor": "9.7.4",
"jsoneditor-react": "3.1.2",
"jsonwebtoken": "8.5.1",
"lodash": "4.17.21",
"mobx": "5.15.7",
"mobx-react": "5.4.4",
"mobx-react-lite": "1.5.2",
"moment": "2.24.0",
"moment-timezone": "0.5.34",
"papaparse": "5.3.1",
"prop-types": "15.7.2",
"rc-progress": "2.3.0",
"react": "16.14.0",
"react-beautiful-dnd": "13.0.0",
"react-chartjs-2": "2.7.4",
"react-circle-flags": "^0.0.17",
"react-click-outside": "3.0.1",
"react-cropper": "2.1.8",
"react-dom": "16.14.0",
"react-flow-renderer": "10.0.4",
"react-google-login": "5.1.20",
"react-intl": "2.8.0",
"react-onclickoutside": "6.12.1",
"react-phone-number-input": "3.1.44",
"react-quill": "1.3.3",
"react-router-dom": "5.3.0",
"react-scripts": "4.0.3",
"react-select": "5.2.2",
"react-top-loading-bar": "1.2.0",
"reactstrap": "7.1.0",
"slugify": "1.4.0",
"styled-components": "5.3.3",
"superagent": "7.0.1",
"superagent-promise": "1.1.0",
"uuid": "8.3.2"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "craco start",
"start:withMockServer": "npx concurrently --kill-others 'yarn run mock-server' 'yarn start'",
"build": "craco build",
"test": "craco test --env=jsdom",
"test:withLiveCoverage": "npx concurrently --kill-others 'yarn test --coverage --watchAll' 'npx live-server coverage/lcov-report'",
"eject": "react-scripts eject",
"mock-server": "npx json-server src/utils/mockData.js --port 4000 --watch --delay 1500",
"lint": "eslint ./src",
"lint-fix": "eslint ./src --fix"
},
"devDependencies": {
"babel-plugin-styled-components": "2.0.2",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"enzyme-to-json": "3.6.2",
"eslint-config-airbnb": "19.0.2",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-react-hooks": "4.3.0",
"faker": "4.1.0",
"husky": "1.3.1",
"jest-styled-components": "6.3.4",
"json-server": "0.14.2",
"lint-staged": "8.2.1",
"mobx-react-devtools": "6.1.1",
"react-error-overlay": "6.0.9",
"source-map-explorer": "1.8.0"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,json,css}": [
"git add"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"cracoConfig": "config/craco.config.js",
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
}
We are using craco to run our react app. The craco config looks like this:
module.exports = {
babel: {
plugins: [
['#babel/plugin-proposal-decorators', { legacy: true }],
['babel-plugin-styled-components'],
],
},
// Disables react-scripts's own ESLint from running on every compilation. This prevents a very long compilation time.
// We don't need react-scripts to run its own ESLint every time, because we have our own ESLint configuration to use with "npm run lint"
eslint: {
enable: false,
},
};
Does anyone know what I can do to fix the error? We've tried different versions of the npm package but all of them throw a similar error. We really need this package for a feature I am working on so there is no option for an alternative.
I'm on Nuxtjs 2.15.7 and recently getting this error in my console
as I searched, only got to #nuxt/pwa issue . But I don't have pwa module in my project!!
here is my package.json
{
"name": "my-app",
"version": "2.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"dev:host": "nuxt --hostname 0.0.0.0 --port 8000",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/auth": "^4.9.1",
"#nuxtjs/axios": "^5.13.1",
"#nuxtjs/device": "^2.1.0",
"#nuxtjs/google-gtag": "^1.0.4",
"#nuxtjs/gtm": "^2.4.0",
"cookie-universal-nuxt": "^2.1.4",
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"swiper": "^5.4.5",
"v-viewer": "^1.5.1",
"vee-validate": "^3.3.7",
"vue-awesome-swiper": "^4.1.1",
"vue-cropperjs": "^4.1.0",
"vue-easy-dnd": "^1.12.2",
"vue-persian-datetime-picker": "^2.2.0",
"vue-product-zoomer": "^3.0.1",
"vue-sweetalert2": "^4.2.1",
"vue2-editor": "^2.10.2",
"vuedraggable": "^2.24.0"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.1",
"#mdi/font": "^5.9.55",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/vuetify": "1.12.1",
"flipclock": "^0.10.8",
"font-awesome": "^4.7.0",
"glob": "^7.1.7",
"noty": "^3.2.0-beta",
"nuxt-gsap-module": "^1.2.1",
"sass": "1.32.13"
}
}
can anybody help?
UPDATE
I only get the error in dev mode
I cleared Cache Storage and re run nuxt and still got error and a cache for workbox has been created again:
Unregister the SW in your devtools.
Since it's tied to a domain name, it should probably be this one. The button is pretty much on your first screenshot (the devtools one).
I am using material UI in my react application and I am having difficulty getting the material-ui-pickers example to work.
Here is the online example from Material UI.
https://codesandbox.io/s/52p74362pl
The error that i am getting is:
index.js:1446 ../node_modules/#date-io/date-fns/build/index.esm.js Module not found: `Can't resolve 'date-fns/addDays' in 'C:\Project4\CDE\IFS.CDE.Web\node_modules\#date-io\date-fns\build'`
here are my package.json files
{
"name": "IFS.CDE.Web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^3.7.1",
"#material-ui/icons": "^3.0.1",
"ajv": "^6.5.2",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.18.0",
"classnames": "^2.2.5",
"connected-react-router": "6.1.0",
"date-fns": "^1.30.1",
"downshift": "^2.0.10",
"extract-svg-path": "^2.1.0",
"file-saver": "^1.3.8",
"install": "^0.12.1",
"lodash": "^4.17.10",
"material-ui-datetimepicker": "^1.0.7",
"material-ui-image": "^3.0.3",
"material-ui-pickers": "^2.1.1",
"moment": "^2.23.0",
"npm": "^6.5.0",
"parse-svg-path": "^0.1.2",
"prop-types": "^15.6.2",
"rc-progress": "^2.2.6",
"react": "^16.6.3",
"react-autosuggest": "^9.3.4",
"react-bingmaps": "^3.6.1",
"react-color": "^2.14.1",
"react-dnd": "^7.0.2",
"react-dom": "^16.6.3",
"react-dropzone": "^4.3.0",
"react-file-viewer": "^0.5.0",
"react-iframe": "^1.2.0",
"react-loadable": "^5.5.0",
"react-popper": "^0.10.1",
"react-redux": "^6.0.0",
"react-render-html": "^0.6.0",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.2",
"react-select": "^2.0.0",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",
"rimraf": "^2.6.2",
"typeface-roboto": "^0.0.54",
"uuid": "^3.3.2",
"video-react": "^0.13.1"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"set-env": "set NODE_ENV=production"
},
"devDependencies": {},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I have installed date-fns but i still get the error.
https://www.npmjs.com/package/date-fns.
I also deleted all the node module and did a npm install to see if that would solve the issue but it did not.
Thanks for the help.
install this(see here):
npm i --save date-fns#next #date-io/date-fns
Try using date-fns 2.0.0. I had the same issue and fixed by updating the lib. Hope it works.
I would like to use a development server just like React does with npm start. But, with Preact when I use the same command it opens a static server and I have to restart it manually each time when I want to see some change in my project.
My package.json:
{
"name": "yagoazedias-site",
"version": "0.0.0",
"description": "Ready-to-go Preact starter project powered by webpack.",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
"start": "serve build -s -c 1",
"prestart": "npm run build",
"build": "cross-env NODE_ENV=production webpack --progress",
"prebuild": "mkdirp build && ncp src/assets build/assets",
"test": "npm run -s lint && jest --coverage",
"test:watch": "npm run -s test -- --watch",
"lint": "eslint src test"
},
"keywords": [
"preact",
"boilerplate",
"webpack"
],
"license": "MIT",
"author": "Jason Miller <jason#developit.ca>",
"jest": {
"setupFiles": [
"./test/setup.js"
],
"testURL": "http://localhost:8080",
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy",
"^react$": "preact-compat",
"^react-dom$": "preact-compat"
},
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
]
},
"devDependencies": {
"autoprefixer": "^7.0.1",
"babel": "^6.5.2",
"babel-core": "^6.24.0",
"babel-eslint": "^7.2.2",
"babel-jest": "^20.0.0",
"babel-loader": "^7.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.24.0",
"babel-runtime": "^6.11.6",
"chai": "^4.0.2",
"copy-webpack-plugin": "^4.0.1",
"core-js": "^2.4.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.1.0",
"eslint-plugin-jest": "^20.0.0",
"eslint-plugin-react": "^7.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.0",
"json-loader": "^0.5.4",
"less": "^2.7.1",
"less-loader": "^4.0.3",
"mkdirp": "^0.5.1",
"ncp": "^2.0.0",
"offline-plugin": "^4.7.0",
"postcss-loader": "^2.0.3",
"preact-jsx-chai": "^2.2.1",
"raw-loader": "^0.5.1",
"regenerator-runtime": "^0.10.3",
"replace-bundle-webpack-plugin": "^1.0.0",
"script-ext-html-webpack-plugin": "^1.3.4",
"sinon": "^2.1.0",
"sinon-chai": "^2.9.0",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.1",
"url-loader": "^0.6.1",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.4.4"
},
"dependencies": {
"preact": "^8.1.0",
"preact-compat": "^3.15.0",
"preact-render-to-string": "^3.6.0",
"preact-router": "^2.5.1",
"promise-polyfill": "^6.0.2",
"proptypes": "^1.0.0",
"serve": "^6.0.0"
},
"main": "webpack.config.babel.js",
"directories": {
"test": "test"
}
}
Relevant links:
https://preactjs.com/
https://github.com/developit/preact
Use the dev script instead?
$ npm run dev
Your start script is doing serve build -s -c 1. React CRA's start script will boot up a webpack dev server which is what your dev script is doing.
npm start is short for npm run start. npm run <command> is just a small proxy that looks up the different commands you have listed in package.json.
Read more about npm scripts here.