antd ui라이브러리를 사용하니까 Cannot use import statement outside a module 에러가 나옵니다.

안녕하세요 제로초님

antd 라이브러리를 사용하니까

Server Error

SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Call Stack

<unknown>

file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/node_modules/rc-util/es/hooks/useMemo.js (1)

Next.js

rc-util/es/hooks/useMemo

file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/.next/server/pages/index.js (8862:18)

Next.js

eval

/node_modules/antd/es/config-provider/index.js

./node_modules/antd/es/config-provider/index.js

file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/.next/server/vendor-chunks/antd.js (570:1)

Next.js

eval

/node_modules/antd/es/grid/col.js

이러한 에러들이 나왔고 검색해보니
next.config.js 파일에

const nextConfig = {
	/* config options here */
	// reactStrictMode: true,
	swcMinify: true,
	transpilePackages: [
		"antd",
		"@ant-design",
		"rc-util",
		"rc-pagination",
		"rc-picker",
		"rc-notification",
		"rc-tooltip",
	],
	compiler: {
		styledComponents: true,
	},
};

module.exports = nextConfig;

이런식으로 넣어주면 괜찮다는 것을 보고

실행해보니 정상적으로 나오는것을 확인했습니다.

그런데 이제는

Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:
이런 에러가 나오고 있는데요..

원래 antd최신버전을 쓰고 있다가

깃헙의 제로초님과 동일하게 ^5.8.3" 버전으로 수정해봤는데도 동일한 이슈가 발생하더라구요

혹시 다른 부분을 수정해야할지 알 수 있을까해서

차장보다 문의 드립니다.

참고로 현재 package.json은

{
	"name": "react-nodebird",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start"
	},
	"author": "",
	"license": "MIT",
	"dependencies": {
		"@ant-design/icons": "^5.3.6",
		"@reduxjs/toolkit": "^2.2.3",
		"antd": "^5.8.3",
		"next": "^14.2.3",
		"next-redux-wrapper": "^8.1.0",
		"react": "^18.3.1",
		"react-dom": "^18.3.1",
		"react-hook-form": "^7.51.3",
		"react-redux": "^9.1.1",
		"react-slick": "^0.30.2",
		"redux": "^5.0.1",
		"styled-components": "^6.1.8"
	},
	"devDependencies": {
		"eslint": "^8.57.0",
		"eslint-plugin-import": "^2.29.1",
		"eslint-plugin-react": "^7.34.1",
		"eslint-plugin-react-hooks": "^4.6.2"
	}
}

이렇습니다.

감사합니다.