Storybook: ModuleBuildError : ๋ชจ๋“ˆ ๋นŒ๋“œ ์‹คํŒจ : SyntaxError : ์˜ˆ๊ธฐ์น˜ ์•Š์€ ํ† ํฐ

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

๋ฐฉ๊ธˆ ๋‚ด create-react-app ํ”„๋กœ์ ํŠธ์— ์Šคํ† ๋ฆฌ ๋ถ์„ ์„ค์น˜ํ•˜๊ณ  ์ฒ˜์Œ์œผ๋กœ ์Šคํ† ๋ฆฌ ๋ถ์„ ์‹œ์ž‘ํ•˜๋ ค๊ณ ํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๋Œ€๋กœ ์ˆ˜๋™ ์„ค์ •์„ ๋”ฐ๋ž๋‹ค. ์›นํŒฉ์ด ์–ด๋–ป๊ฒŒ ๋“  ์‹คํŒจํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์˜ค๋ฅ˜ ์ถœ๋ ฅ์€ ์—„์ฒญ๋‚˜์ง€๋งŒ ๊ด€๋ จ ์„น์…˜์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 [ ModuleBuildError: Module build failed: SyntaxError: Unexpected token (7:8)

           5 | storiesOf('Button', module)
           6 |     .add('with text', () => (
        >  7 |         <button onClick={action('clicked')}>Hello Button</button>
             |         ^
           8 |     ))
           9 |     .add('with some emoji', () => (
          10 |         <button onClick={action('clicked')}>๐Ÿ˜€ ๐Ÿ˜Ž ๐Ÿ‘ ๐Ÿ’ฏ</button>

React ๋ฒ„์ „์€ 15.6.1์ž…๋‹ˆ๋‹ค.

์ง€์นจ์— ์ง€์ •๋œ ๊ธฐ๋ณธ config.json์„ ์‚ฌ์šฉํ–ˆ์œผ๋ฉฐ ์˜ˆ์ œ Button ์Šคํ† ๋ฆฌ ๋งŒ๋กœ๋“œํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค (๋‚ด ๋ชจ๋“ˆ์ด ์•„๋‹˜).

๋‚˜๋Š” ์›นํŒฉ ์ „๋ฌธ๊ฐ€๊ฐ€ ์•„๋‹ˆ๋ฏ€๋กœ ์—ฌ๊ธฐ์„œ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

question / support

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

๊ฐ€๋Šฅํ•œ ๊ฒฝ์šฐ ํ”„๋กœ์ ํŠธ๋ฅผ ์ €์žฅ์†Œ๋กœ GitHub์— ์—…๋กœ๋“œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋™ํ™”์ฑ…๊ณผ ๊ด€๋ จ๋œ ๋ถ€๋ถ„ ๋งŒ ๋‚จ๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

๋น ๋ฅธ ์‹œ์ž‘ ๊ฐ€์ด๋“œ ๋ฅผ ๋”ฐ๋ฅด๊ณ  ๊ฒฐ๊ณผ๋ฅผ ์ˆ˜๋™ ์„ค์ •์œผ๋กœ ์–ป์€ ๊ฒฐ๊ณผ์™€ ๋น„๊ตํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์›นํŒฉ ๋˜๋Š” ๋ฐ”๋ฒจ์— ๋ฐ˜์‘ ์‚ฌ์ „ ์„ค์ •์ด ์—†์Šต๋‹ˆ๋‹ค.

์˜ˆ, ๋ฌธ์ œ์˜ ์›์ธ์€ .babelrc์˜€์Šต๋‹ˆ๋‹ค. ๋‚ด ํ”„๋กœ์ ํŠธ์˜ ๋ฃจํŠธ์— .babelrc ํŒŒ์ผ์ด ์žˆ์ง€๋งŒ "presets"ํ•„๋“œ๊ฐ€ ์ง€์ •๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. "presets": ["react"] ์ถ”๊ฐ€ํ•˜๋ฉด ์ œ๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @danielduan

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