QUESTION:
Running into the following issue essentially (but with different files) : .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-pose-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'],
},
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 menting out everything in next.config.js before doing npm run dev but did not change anything.
js.config.json
{
"pilerOptions": {
"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-pose-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: [email protected]
npm ERR! Found: [email protected]
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 [email protected]
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 mand 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 Remended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
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 [email protected]
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: [email protected]
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 [email protected]
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: [email protected]
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 [email protected]
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: [email protected]
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 [email protected]
npm WARN node_modules/simplebar-react
npm WARN simplebar-react@"^2.3.0" from the root project
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: 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
QUESTION:
Running into the following issue essentially (but with different files) : https://github./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-pose-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.'],
},
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 menting out everything in next.config.js before doing npm run dev but did not change anything.
js.config.json
{
"pilerOptions": {
"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-pose-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:
https://pastebin./PAfudkdg
ERROR WHEN DOING NPM INSTALL:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
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 [email protected]
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 mand 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 Remended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
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 [email protected]
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: [email protected]
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 [email protected]
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: [email protected]
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 [email protected]
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: [email protected]
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 [email protected]
npm WARN node_modules/simplebar-react
npm WARN simplebar-react@"^2.3.0" from the root project
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: 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
-
Does
rm -rf .next node_modules package-lock.jsonand thennpm installhelp? Sometimes it could just be due to bad cache – PsyGik Commented Jul 22, 2021 at 17:23 - I just tried again. Unfortunately, it did not change anything :/ I do have to do npm i --legacy-peer-deps instead of npm i though, could that have had any impact ? (I would imagine not based on what I read, but can never be 100% sure) – TheProgrammer Commented Jul 22, 2021 at 17:34
-
Interesting, maybe do
npm install --forceinstead ofnpm i --legacy-peer-deps? – PsyGik Commented Jul 22, 2021 at 17:35 -
1
Looks like
react-tradingview-widgethas a react dependency mismatch. Can you try installing it separately after installing the other dependencies? – PsyGik Commented Jul 22, 2021 at 17:57 - 2 @Joshua Using console.time('ssr') (at beginning of getStaticProps) and console.timeEnd('ssr') (at end of getStaticProps) to check how long it takes for getStaticProps to run (which includes axios requests). Got times that were a tiny fraction of the 30+ seconds it took for the page to load, so the issue might not be there. (just tried again: got ssr: 1.984s) (getStaticProps was getServerProps before, hence why "ssr" is being used the console.time) – TheProgrammer Commented Jul 22, 2021 at 18:16
1 Answer
Reset to default 2 +100I would remend to separate the dependencies with devDependencies
like these packages are should be inside devDependencies
prop-types @next/bundle-analyzer cross-env next-pose-plugins next-transpile-modules
and I think you can remove
const withTM = require('next-transpile-modules')(['swr']);
from the next.config.js -- but not sure it will give you errors or not, I have never put swr into transpile modules before.
and for loading 3rd parties script, try using the new next11 ponent, rather than using other libraries (https://nextjs/docs/basic-features/script)
other that that, I would remend that you can remove react-icons and use the iconify/eva for the replacement - It is just to reduce same usage library..
Cheers man
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745300153a4621386.html
评论列表（0条）