티스토리 뷰

320x100

스토리북 실행 시 발생

ModuleParseError: Module parse failed: Unexpected token (1:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import type { Action } from 'redux'
| import type {
|   IsUnknownOrNonInferrable,
    at handleParseError (/Users/nhn/Desktop/github/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:969:19)
    at /Users/nhn/Desktop/github/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:1088:5
    at processResult (/Users/nhn/Desktop/github/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:793:11)
    at /Users/nhn/Desktop/github/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:853:5
    at /Users/nhn/Desktop/github/frontend/node_modules/loader-runner/lib/LoaderRunner.js:406:3
    at iterateNormalLoaders (/Users/nhn/Desktop/github/frontend/node_modules/loader-runner/lib/LoaderRunner.js:232:10)
    at /Users/nhn/Desktop/github/frontend/node_modules/loader-runner/lib/LoaderRunner.js:223:4
    at /Users/nhn/Desktop/github/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModule.js:827:15
    at Array.eval (eval at create (/Users/nhn/Desktop/github/frontend/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (/Users/nhn/Desktop/github/frontend/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
    at /Users/nhn/Desktop/github/frontend/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
    at /Users/nhn/Desktop/github/frontend/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:71:3)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

기본적으로 웹팩에서 모듈을 로드하는 과정에서 오류가 있는 경우에 발생함.

 

내 경우는 Redux Toolkit을 사용하고 있었고, 

빠른 수정으로 import할 때, "@reduxjs/toolkit"에서 가져와야 하는데 어쩌다가 다른걸 선택해서 아래처럼 내부에 있는 것을 import하는 경우가 있었음.

import { createAction } from '@reduxjs/toolkit/src/createAction';

이걸 아래처럼 바꿔주면 해결됨.

import { createAction } from '@reduxjs/toolkit';
320x100
댓글