QUESTION:
Running into the following issue essentially (but with different files) : https://github.com/vercel/next.js/discussions/17977
Tried everything suggested there already.
Here is what a page load looks like in dev mode:
Would anyone have any suggestions on how to optimise this?
CODE:
next.config.js:
const withPlugins = require('next-compose-plugins');
const webpack = require("webpack")
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
const withTM = require('next-transpile-modules')(['swr']);
nextConfig = {
images: {
domains: ['storage.googleapis.com'],
},
webpack: config => {
config.resolve.extensions = [ '.mjs', '.js', '.jsx', '.json' ];
config.plugins.push(
new webpack.ProgressPlugin((percentage, message, ...args) => {
// e.g. Output each progress message directly to the console:
console.info(percentage, message, ...args);
})
);
return config
}
}
module.exports = withPlugins([
withBundleAnalyzer,
withTM
], nextConfig);
Tried commenting out everything in next.config.js before doing npm run dev but did not change anything.
js.config.json
{
"compilerOptions": {
"baseUrl": "."
},
"exclude": [
"/node_modules"
]
}
package.json
{
"name": "...",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "next dev -p 3222",
"build": "next build",
"start": "next start",
"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
},
"dependencies": {
"@emotion/cache": "^11.4.0",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@iconify/icons-ant-design": "^1.1.0",
"@iconify/icons-eva": "^1.1.0",
"@iconify/icons-ic": "^1.1.3",
"@iconify/react": "^1.1.4",
"@material-ui/core": "^5.0.0-alpha.34",
"@material-ui/icons": "^5.0.0-alpha.34",
"@material-ui/lab": "^5.0.0-alpha.34",
"@material-ui/styles": "^5.0.0-alpha.33",
"@next/bundle-analyzer": "^11.0.1",
"@sendgrid/mail": "^7.4.5",
"apexcharts": "^3.27.1",
"axios": "^0.21.1",
"change-case": "^4.1.2",
"cross-env": "^7.0.3",
"date-fns": "^2.21.1",
"emoji-mart": "^3.0.1",
"firebase-admin": "^9.9.0",
"framer-motion": "^4.1.17",
"lodash": "^4.17.21",
"millify": "^4.0.0",
"next": "^11.0.1",
"next-compose-plugins": "^2.2.1",
"next-transpile-modules": "^8.0.0",
"nprogress": "^0.2.0",
"numeral": "^2.0.6",
"prop-types": "^15.7.2",
"react": "17.0.2",
"react-apexcharts": "^1.3.9",
"react-dom": "17.0.2",
"react-icons": "^4.2.0",
"react-load-script": "^0.0.6",
"react-scroll": "^1.8.2",
"react-tradingview-widget": "^1.3.2",
"sanitize-html": "^2.4.0",
"sass": "^1.35.2",
"simplebar": "^5.3.0",
"simplebar-react": "^2.3.0",
"swr": "^0.5.6"
}
}
BUNDLE ANALYSIS:
Client 
Server 
WEBPACK PROGRESS PLUGIN OUTPUT AND OTHER TERMINAL OUTPUT:
ERROR WHEN DOING NPM INSTALL:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: fintex@0.0.1
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from react-tradingview-widget@1.3.2
npm ERR! node_modules/react-tradingview-widget
npm ERR! react-tradingview-widget@"^1.3.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
TERMINAL OUTPUT WHEN DOING NPM INSTALL --FORCE:
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN react@"17.0.2" from the root project
npm WARN 14 more (@emotion/react, @emotion/styled, @material-ui/core, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.0.0" from react-tradingview-widget@1.3.2
npm WARN node_modules/react-tradingview-widget
npm WARN react-tradingview-widget@"^1.3.2" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN react-dom@"17.0.2" from the root project
npm WARN 5 more (@material-ui/core, @material-ui/lab, framer-motion, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.0.0" from react-tradingview-widget@1.3.2
npm WARN node_modules/react-tradingview-widget
npm WARN react-tradingview-widget@"^1.3.2" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN react@"17.0.2" from the root project
npm WARN 14 more (@emotion/react, @emotion/styled, @material-ui/core, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from simplebar-react@2.3.5
npm WARN node_modules/simplebar-react
npm WARN simplebar-react@"^2.3.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN react-dom@"17.0.2" from the root project
npm WARN 5 more (@material-ui/core, @material-ui/lab, framer-motion, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from simplebar-react@2.3.5
npm WARN node_modules/simplebar-react
npm WARN simplebar-react@"^2.3.0" from the root project
npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated react-load-script@0.0.6: abandoned and unmaintained
added 621 packages, and audited 622 packages in 55s
73 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
from Loading pages is extremely slow in dev mode in Next.js (30s+), what could be causing this?
No comments:
Post a Comment