221109 web game 본체 패키지 목록 및 최신 패키지 업그레이드

나의 재물운? 연애운은?

AI가 봐주는 내 사주팔자 - 운세박사

https://aifortunedoctor.com/

221109 web game 본체 패키지 목록 및 최신 패키지 업그레이드

영리치 0 1,170 2022.11.09 13:02

AS-IS

"@material-ui/core": "^4.11.0",
"@paypal/react-paypal-js": "^7.8.1",
"@types/js-cookie": "^2.2.7",
"@types/lodash": "^4.14.178",
"@types/react-lottie": "^1.2.6",
"@types/react-query": "^1.2.9",
"@types/react-select": "^3.0.26",
"@types/react-slick": "^0.23.4",
"antd": "^4.16.8",
"axios": "^0.20.0",
"i18next": "^21.9.2",
"js-cookie": "^2.2.1",
"mobx": "^6.0.4",
"mobx-react": "^6.2.2",
"next": "^10.0.5",
"next-pwa": "^3.1.4",
"ol": "^6.9.0",
"react": "^16.12.0",
"react-device-detect": "^1.13.1",
"react-dom": "^16.12.0",
"react-flip-toolkit": "^7.0.13",
"react-i18next": "^11.18.6",
"react-lottie": "^1.2.3",
"react-query": "^3.17.1",
"react-select": "^3.1.0",
"react-slick": "^0.27.13",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.1",
"styled-theming": "^2.2.0"


yarn upgrade --latest


"dependencies": {
"@material-ui/core": "^4.12.4",
"@paypal/react-paypal-js": "^7.8.1",
"@types/js-cookie": "^3.0.2",
"@types/lodash": "^4.14.188",
"@types/react-lottie": "^1.2.6",
"@types/react-query": "^1.2.9",
"@types/react-select": "^5.0.1",
"@types/react-slick": "^0.23.10",
"antd": "^4.24.1",
"axios": "^1.1.3",
"i18next": "^22.0.4",
"js-cookie": "^3.0.1",
"mobx": "^6.6.2",
"mobx-react": "^7.5.3",
"next": "^13.0.2",
"next-pwa": "^5.6.0",
"ol": "^7.1.0",
"react": "^18.2.0",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"react-flip-toolkit": "^7.0.17",
"react-i18next": "^12.0.0",
"react-lottie": "^1.2.3",
"react-query": "^3.39.2",
"react-select": "^5.6.0",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.6",
"styled-theming": "^2.2.0"
},


혹시 저희 회사 소스코드로 만들어진 프로젝트, 최신 리액트와 넥스트로 업그레이드 하는 과정에서 아래와 같은 오류 마주해보신 분 계실까요!?Error: Hydration failed because the initial UI does not match what was rendered on the server.See more info here: https://nextjs.org/docs/messages/react-hydration-error


위에 이슈는 아래와 같이 해결함


next.config.js

// next.config.js
// module.exports = {
// async headers() {
// return [
// {
// // matching all API routes
// source: '/api/:path*',
// headers: [
// { key: 'Access-Control-Allow-Credentials', value: 'true' },
// { key: 'Access-Control-Allow-Origin', value: '*' },
// {
// key: 'Access-Control-Allow-Methods',
// value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
// },
// {
// key: 'Access-Control-Allow-Headers',
// value:
// 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
// },
// ],
// },
// ];
// },
// };

module.exports = {
async rewrites() {
return [
{
source: '/sitemap.xml',
destination: '/api/sitemap',
},
];
},
};

/** @type {import('next').NextConfig} */

const nextConfig = {
reactStrictMode: true,
compiler: {
styledComponents: true,
},
};

module.exports = nextConfig;

module.exports = {
poweredByHeader: false,
};

// 현재 vercel에서 CORS 이슈가 발생 중에 있음. 이거는 트래킹을 해봐야할 듯?

// webpack: (config, { isServer }) => {
// // Fixes npm packages that depend on `fs` module
// if (!isServer) {
// config.node = {
// fs: 'empty',
// };
// }
// return config;
// },



page/_document code snippet

static async getInitialProps(ctx: any) {
const sheet = new ServerStyleSheet();
const sheet2 = new ServerStyleSheets();
const initialProps = await Document.getInitialProps(ctx);
const styleTags = sheet.getStyleElement();
const styleTags2 = sheet2.getStyleElement();
return { ...initialProps, styleTags, styleTags2 };
}


Comments

나의 재물운? 연애운은?

AI가 봐주는 내 사주팔자 - 운세박사

https://aifortunedoctor.com/

Category
실시간 인기글
Magazine
훈남/훈녀
 
 
 
상점
Facebook Twitter GooglePlus KakaoStory NaverBand