๊ธฐ๋ณธ ๋ด๋ณด๋ด๊ธฐ๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค. ์ด ๋ฌธ์ ๋ index.mjs
์ด ์ถ๊ฐ๋ ์ดํ์ ์กด์ฌํ๊ธฐ ์์ํ์ต๋๋ค. ์ค์น๋ ํจํค์ง์์ ์ด ํ์ผ์ ์ญ์ ํ๊ฑฐ๋ ์ด๋ฆ์ ๋ฐ๊พธ๋ฉด ์ ๋๋ก ๋น๋๋ฉ๋๋ค. ๋ค์ ๋ฃ์ผ๋ฉด ์ด๋ฌํ ๊ฒฝ๊ณ ๊ฐ ๋ค์ ๋ํ๋ฉ๋๋ค.
์ด์ฉ๋ฉด ์ฐ๋ฆฌ ์นํฉ ์ค์ ์ ๋ฐ๊ธฐ index.mjs
์ฐฌ์ฑ index.js
ํ์ง๋ง, ์ ๋ด๊ฐ ๋ช
์ ์ ์ผ๋ก ๋ง ์ฐพ์ ๊ทธ๊ฒ์ ๋งํ๊ณ ์ดํ .js
๋ฐ .jsx
babel-loader ์ค์ ์
๋ง์ง๋ง์ผ๋ก ์๋ ค์ง ์์ ๋ฒ์ ์ 1.1.2์ ๋๋ค. ๋ค์ด๊ทธ๋ ์ด๋๊ฐ ์ ์ ํ ์์ ์ฌํญ์ด ์ ๊ณต๋ ๋๊น์ง ๊ฐ์ฅ ์ ๋ขฐํ ์ ์๋ ์์ ์ผ๋ก ๋๊ปด์ง๊ธฐ ๋๋ฌธ์ ๋น๋ถ๊ฐ์ ๋ค์ด๊ทธ๋ ์ด๋ํ ๊ฒ์ ๋๋ค.
๋น๋ OK, ๊ฒฝ๊ณ ์์.
์ด ํจํค์ง๊ฐ ์ฌ์ฉ๋๋ ๋ชจ๋ ๊ณณ์์ ๊ฒฝ๊ณ :
export 'default' (imported as 'parse') was not found in 'html-react-parser'
๋ค์๊ณผ ๊ฐ์ด ๊ฐ์ ธ์ค๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค.
import parse from 'html-react-parser';
ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ด ๊ฐ์ ธ์ค๋ ๊ฒ์ ๋๋ค.
import * as parse from 'html-react-parser';
์ ๋์ ์ผ๋ก ์ ์๋ํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ด์ ํ๊ธฐ๋ฒ์ด ๋ฌธ์์ ์๊ธฐ ๋๋ฌธ์ ๊ทธ๊ฒ์ด ์๋๋ ๋ฐฉ์์ด๋ผ๊ณ ๊ฐ์ ํฉ๋๋ค. ๋ฐ๋ผ์ ํ์์ ํ์์ด ํด๊ฒฐ์ฑ ์ด ์๋๋ผ ํด๊ฒฐ ๋ฐฉ๋ฒ์ธ ์ด์ ์ ๋๋ค.
์ฃ์กํฉ๋๋ค. ์ ๋ง ๋ณต์กํ ํ๋ก์ ํธ์ ๋๋ค. ์ ๊ฐ ํ ์ ์์์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. ์ ๋ง์ ๋ง์ ๋ง์ ๋งํ์ ํ๋ค๋ฉด ํด๋ณผ์์์ง๋ง ์์งํ์ด๋ฌธ์ ๋์ด๋ฏธ๋ง์์๊ฐ์๋ญ๋นํ๊ณ ์์ต๋๋ค ๐
@thany ๋ฌธ์ ๋ก ์ธํด ์ฃ์กํฉ๋๋ค.
ํด๊ฒฐ ๋ฐฉ๋ฒ์ผ๋ก webpack ๊ตฌ์ฑ ์ ๊ตฌ์ฑํ ์ ์์ต๋๊น?
๊ฐ์ฌํฉ๋๋ค ๋ถํ์ ์ดํ์ ํด๋ด์ผ๊ฒ ์ต๋๋ค.
๊ทธ ํธ๋ฆญ์ ํ๋ค! ๐
ํฅํ ์ฐธ์กฐ๋ฅผ ์ํด ๋ค์์ผ๋ก ์ด๋ํด์ผ ํ์ต๋๋ค.
resolve: {
// ...
mainFields: ['main', 'module'],
}
์ฐ๋ฆฌ์ ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ๋ก ์ด๋ํ๋ ์ผ๋ฐ ๋ชจ๋ ๋์ SSR ๋ชฉ์ ์ ์ํ ๋ชจ๋๋ก ๋น๋๋ฉ๋๋ค.
์ง๊ธ๋ ๊ถ๊ธํฉ๋๋ค. ์ด๊ฒ์ ํด๊ฒฐ์ฑ ์ ๋๊น ์๋๋ฉด ๋จ์ํ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋๊น? ์ด๊ฒ์ด ์ฌ์ ํ ์ ์ ํ ์๋ฃจ์ ์ด ํ์ํ์ง ๋๋ ์์ ๊ฒ์ด ์ค์ ์ ์ ํ ์๋ฃจ์ ์ธ์ง ํ์คํ์ง ์์ต๋๋ค.
์ง๊ธ๊น์ง index.mjs
๋ณ๊ฒฝ๊ณผ ๊ด๋ จ๋ ๋ง์ ๋ฌธ์ ๋ฅผ ๋ณด์ง ๋ชปํ์ต๋๋ค(์ค์ ๋ก ๋ฌด์ธ๊ฐ๋ฅผ ๊นจ๋จ๋ฆฐ ๊ฒฝ์ฐ ์ ์ธ). ๋๋ ์ด๊ฒ์ด ๋ ๋ณต์กํ ์นํฉ ๊ตฌ์ฑ์ ๊ฐ์ง ์ฌ๋๋ค์ ์ํ ํด๊ฒฐ ๋ฐฉ๋ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
๊ณตํํฉ๋๋ค. ๊ทธ๋ ๋ค๋ฉด ์ด๊ฒ์ด ์ ์ ํ ํด๊ฒฐ์ฑ ์ด๋ผ๊ณ ์๊ฐํฉ์๋ค.
@thany README.md
์ด๊ฒ์ ๋ฌธ์ํํ์๊ฒ ์ต๋๊น? ์ด ๋ฌธ์ ๋ฅผ ๋ซ์๋ ๋ ๊น์?
๋์์ด ๋ ์ ์์ต๋๋ค. ๊ทธ๋ ์ต๋๋ค. ๋ซ๊ธฐ ์ข์์ ๐๐ป