Moment: 2.19.0์œผ๋กœ ์—…๋ฐ์ดํŠธ ํ›„ ์›นํŒฉ ์˜ค๋ฅ˜ ๋ฐœ์ƒ

์— ๋งŒ๋“  2017๋…„ 10์›” 10์ผ  ยท  23์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: moment/moment

์ œ๊ฐ€ Angular 4.4.4 ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด์„œ #4216๊ณผ ๊ด€๋ จ์ด ์žˆ๋Š”์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ React ์ด์Šˆ๋ผ์„œ ๋ณ„๋„ ์ด์Šˆ๋กœ ์˜ฌ๋ฆฝ๋‹ˆ๋‹ค.

์—…๋ฐ์ดํŠธ ํ›„ ๋‹ค์Œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

__WEBPACK_IMPORTED_MODULE_2_moment__ is not a function

๋‹ค์Œ moment ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

"moment": "2.19.0",
"@types/moment": "2.13.0",   

์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ฝ”๋“œ๋Š” ๋งค์šฐ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค.

import * as moment from 'moment';
...

  if (moment().year() !== this.mainData.activeYear)

...

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์—ฌ๊ธฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค. Angular ๋˜๋Š” React๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋‚ด ์›นํŒฉ ์˜ค๋ฅ˜์ž…๋‹ˆ๋‹ค.

WARNING in ./~/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in '/data/jenkins/workspace/project/node_modules/moment/src/lib/locale'
./~/moment/src/lib/locale/locales.js 65:16-60
./~/moment/src/lib/locale/locale.js
./~/moment/src/moment.js
./script.js

๋ชจ๋“  23 ๋Œ“๊ธ€

+1 - Angular 4์™€ ๋™์ผํ•œ ๋ฌธ์ œ

์—ฌ๊ธฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค. Angular ๋˜๋Š” React๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋‚ด ์›นํŒฉ ์˜ค๋ฅ˜์ž…๋‹ˆ๋‹ค.

WARNING in ./~/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in '/data/jenkins/workspace/project/node_modules/moment/src/lib/locale'
./~/moment/src/lib/locale/locales.js 65:16-60
./~/moment/src/lib/locale/locale.js
./~/moment/src/moment.js
./script.js

vuejs ๋ฐ webpack๊ณผ ๋™์ผํ•œ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

๋ฌธ์ œ๋Š” moment-timezone์— ์˜ํ•ด ํŠธ๋ฆฌ๊ฑฐ๋˜์ง€๋งŒ webpack๊ณผ ๋™์ผํ•ฉ๋‹ˆ๋‹ค. ์˜์กด์„ฑ์„ "moment": "^2.18.1" ์—์„œ "moment": "~2.18.1" ๋กœ ๋ณ€๊ฒฝํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ฒ„์ „ 2.19.0์œผ๋กœ ์ˆœ๊ฐ„ ์—…๊ทธ๋ ˆ์ด๋“œํ•ด๋„ ๋™์ผํ•œ ๋ฌธ์ œ
WARNING in ./~/[email protected]@moment/src/lib/locale/locales.js Module not found: Error: Can't resolve './locale' in '/Users/XXX/code/gitlab/web-editor/node_modules/[email protected]@moment/src/lib/locale' @ ./~/[email protected]@moment/src/lib/locale/locales.js 65:16-60 @ ./~/[email protected]@moment/src/lib/locale/locale.js @ ./~/[email protected]@moment/src/moment.js @ ./~/[email protected]@antd/lib/calendar/index.js @ ./~/[email protected]@antd/lib/index.js @ dll lib

2.19.0๊ณผ ๋™์ผํ•œ ๋ฌธ์ œ

์ด 2.19.0 ๋ฒ„์ „์˜ ๋™์ผํ•œ ๋ฌธ์ œ

์ด ๋ฒ„์ „(2.19.0์€ ์ˆ˜์ •๋˜์–ด์•ผ ํ•จ)
'์ˆœ๊ฐ„' ์•„ํ•˜ํ•˜, 2.18.1์„ ์„ค์น˜ํ•˜์‹ญ์‹œ์˜ค
"์ˆœ๊ฐ„": "~2.18.1"

์—ฌ๊ธฐ์—์„œ๋„ ๊ฐ™์€ ๋ฌธ์ œ ๐Ÿ˜ข ์ด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋  ๋•Œ๊นŒ์ง€ 2.18๋กœ ๋‹ค์‹œ ๋‹ค์šด๊ทธ๋ ˆ์ด๋“œํ•ฉ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ๋„ ๊ฐ™์€ ๋ฌธ์ œ...

์›นํŒฉ ์˜ค๋ฅ˜์— ๋ฐ˜์‘

WARNING in ./node_modules/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in 'blahblahblah/node_modules/moment/src/lib/locale'
 @ ./node_modules/moment/src/lib/locale/locales.js 65:16-60
 @ ./node_modules/moment/src/lib/locale/locale.js
 @ ./node_modules/moment/src/moment.js
 @ ./src/client/components/ArticlesGrid/index.js
 @ ./src/client/containers/StuffPage/index.js
 @ ./src/client/routes.jsx
 @ ./src/client/index.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8050 webpack/hot/dev-server babel-polyfill ./src/client/index.js

@mymtw - ์ปค๋ฎค๋‹ˆํ‹ฐ๋กœ์„œ ์–‘์‹์— ๋Œ€ํ•œ ์š•์„ค์„ ํ—ˆ์šฉํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๊ท€ํ•˜์˜ ์˜๊ฒฌ์ด ์—…๋ฐ์ดํŠธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์•ž์œผ๋กœ๋Š” ์ž์ œ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

2.19๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ ํ•œ ํ›„ ์ด๊ฒƒ์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค ...

node_modules/webpack/lib/IgnorePlugin.js:20
                    (!contextRegExp || contextRegExp.test(result.context))) {
                                                     ^

TypeError: contextRegExp.test is not a function

๊ทธ๋ฆฌ๊ณ  ๋‚ด webpack ๊ตฌ์„ฑ ํŒŒ์ผ์—์„œ ๋กœ์ผ€์ผ์„ ๊ฑด๋„ˆ๋›ฐ๊ธฐ ์œ„ํ•ด ๋ฌด์‹œ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/])

package.json ์˜ moment ๋ฒ„์ „์„ ์ž ๊ทธ๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

"moment": "2.18.0"

๊ทธ๋Ÿฌ๋‚˜ ์ข…์†์„ฑ์—์„œ ์ตœ์‹  ๋ชจ๋ฉ˜ํŠธ ๋ฒ„์ „(2.19.0)์„ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒฝ์šฐ ์œ„์˜ ๋‚ด์šฉ์ด ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค( find ./node_modules/*/node_modules -iname moment ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ์•ฑ์—์„œ ๋ชจ๋ฉ˜ํŠธ์˜ ๋‹ค๋ฅธ ๋ฒ„์ „ ํ™•์ธ).

๋Œ€์‹  webpack ์™ธ๋ถ€๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์™ธ๋ถ€ ์›นํŒฉ ๊ตฌ์„ฑ์— ์ˆœ๊ฐ„์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
+            externals: {
+                moment: 'moment',
+            },
  • CDN์˜ moment.js ํŒŒ์ผ์„ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค - ์ด๊ฒƒ์„ index.html(๋˜๋Š” index.ejs) ํŒŒ์ผ์— ๋„ฃ์œผ์‹ญ์‹œ์˜ค:
    <script src="https://momentjs.com/downloads/moment.min.js"></script>

๋‹น๋ถ„๊ฐ„ ์ด๊ฒƒ์„ ์šฐํšŒํ•˜๋Š” ~2.18.0 ๋กœ ๋‹ค์šด๊ทธ๋ ˆ์ด๋“œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ๋‚˜๋ฅผ ์œ„ํ•ด ์ž‘๋™ํ•˜๋Š” ์žฌ์ƒ์‚ฐ ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค. ์ „ ์„ธ๊ณ„์ ์œผ๋กœ create-react-app ๊ฐ€ ์„ค์น˜๋˜์–ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค.

> create-react-app my-app
> cd my-app
> # Prove the app it working correctly
> npm run start 
> npm install moment

src/app.js ๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์—…๋ฐ์ดํŠธํ•˜์‹ญ์‹œ์˜ค.

 import '.App.css';

+ import moment from 'moment'

class App extends Component {
 </p>
+<p>
+ Today is {moment().format()}
+</p>
 </div>

๊ทธ ๋‹ค์Œ์—

> npm run start 

์›น์‚ฌ์ดํŠธ๊ฐ€ ๋กœ๋“œ๋  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ, ์˜ค๋ฅ˜์™€ ํ•จ๊ป˜ ์‹คํŒจ: './locale' ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ถ”๊ฐ€ ์ปจํ…์ŠคํŠธ, ์ˆ˜ํ–‰ ํ›„ ์ž‘๋™

> npm install [email protected] 

์ด๊ฒƒ์€ ํฅ๋ฏธ ๋กญ๋‹ค. ๋‚˜๋Š” ๋‚ด ์ž‘์—…์„ ์œ„ํ•ด ์ž‘์—…ํ•˜๋Š” ๋‚ด ์ž์‹ ์˜ ์ฝ”๋“œ์—์„œ ์ˆœ๊ฐ„์„ ์—…๋ฐ์ดํŠธํ•˜๊ณ  webpack์„ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ๋งํ•  ์ˆ˜ ์žˆ๋Š” ํ•œ ๋‚˜๋Š” ๋ชจ๋“  ์›นํŒฉ ์ข…์†์„ฑ(์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์žˆ์œผ๋ฉฐ ๋ช‡ ๊ฐœ๋งŒ ํ™•์ธํ•จ)๊ณผ 2.19.0 ์ˆœ๊ฐ„์˜ ์ตœ์‹  ๋ฒ„์ „์ด ์žˆ์œผ๋ฉฐ ๋ชจ๋“  ๊ฒƒ์ด ์ •์ƒ์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ์—๋Š” ์ด create-react-app ๊ฒฝ๋กœ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด ์˜ค๋ฅ˜๋กœ ์ธํ•ด ์˜ค๋Š˜์€ ๊ทธ๋‹ค์ง€ ํ–‰๋ณตํ•œ ์•„์นจ์ด ์•„๋‹ˆ์—ˆ์Šต๋‹ˆ๋‹ค!

์ด ์˜ค๋ฅ˜์— ๋Œ€ํ•ด์„œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

npm install --save [email protected]

์ด๊ฒƒ์€ ๋‹น๋ถ„๊ฐ„ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค. 2.19.0์€ ์•ฝ 2์‹œ๊ฐ„ ์ „์— ๋™์ผํ•œ ์˜ค๋ฅ˜๋ฅผ ์ œ๊ณตํ–ˆ์Šต๋‹ˆ๋‹ค.
๋ฒ„์ „ 2.18.1 ๋กœ ๋‹ค์šด๊ทธ๋ ˆ์ด๋“œํ•˜๊ณ  ์ œ๋Œ€๋กœ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ๋˜ํ•œ ์ด ์‹œ๋‚˜๋ฆฌ์˜ค๋ฅผ ํ™•์ฆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

2.19.0์ด ์šฐ๋ฆฌ์˜ ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ๋ฅผ ๋ง๊ฐ€๋œจ๋ ธ์Šต๋‹ˆ๋‹ค :(. 2.18.1๋กœ ๋˜๋Œ๋ฆฌ๋Š” ๊ฒƒ์€ ์ž˜ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

#4216์˜ ๋ณต์ œ๋ณธ์œผ๋กœ ๋‹ซ๊ธฐ - ๊ฑฐ๊ธฐ์—์„œ ์ถ”์ ํ•˜์„ธ์š”.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰