Webpack import issue

[SoYoung210]

Desc

components/Test.tsx, components/Test.pcss 구조로 사용하는 경우 webpack의 resolve extenstions옵션에서 주의해야 한다.

Not working Example

module.exports = (env, argv) => ({
  entry: ['@babel/polyfill', pathJoin('src/index.tsx')],
  resolve: {
    alias: {
      '@': pathJoin('src'),
    },
    extensions: ['.pcss', 'css', '.ts', '.tsx', '.js', '.json'],
  },
}

Working Example

module.exports = (env, argv) => ({
  entry: ['@babel/polyfill', pathJoin('src/index.tsx')],
  resolve: {
    alias: {
      '@': pathJoin('src'),
    },
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
}

같은 이름의 파일이 존재할경우, 컴포넌트를 import하더라도 다음과 같은 에러 문구가 발생한다. Uncaught Invariant Violation:... 컴포넌트가 아니라는 뜻이다.

디버깅을 위해 해당 컴포넌트(라고 생각하는)를 log찍어보면 error상황에서는 undefined가 출력될 것이다.