devlog

2022.04.26 - [Structure] - monorepo use yarn berry with nextjs, react storybook + typescript - 3 (react + stroybook + typescript)

현재 프로젝트 구조

next js에 참조할 project 추가

next js package.json 의 dependencies에 추가할 project의 package.json의 name 추가

next js의 next.config.js에 사용할 모듈 알려주기

next js 패키지에 next-transpile-modules 추가

yarn workspace web add -D next-transpile-modules

next.config.js 수정

아래와 같이 사용할 모듈 추가

const withTM = require("next-transpile-modules")(["@common/components"]);
const nextConfig = {
  reactStrictMode: true,
};

module.exports = withTM(nextConfig);

pages/index.tsx

아래와 같이 import하여 사용

2022.04.26 - [Structure] - monorepo use yarn berry with nextjs, react storybook + typescript - 2 (nextjs + typescript 추가)

CRA로 react 세팅

- 2022.04.26 storybook babel preset에 오류가 있어 CRA로 대체 -> cra preset 사용하기 위해

- 추후 순수 react setting으로 바꿀 예정

cd packages
yarn dlx create-react-app <설치를 윈하는 폴더> --template typescript

- typescript 설치가 안될 경우 수동으로 설치

- 설치 시 yarn workspace <package name> add

- package name은 yarn workspaces list로 확인

storybook 설치

- CRA를 components 이름으로 생성했기에 yarn workspace components 사용

- webpack5 버전으로 storybook 세팅

yarn workspace components dlx sb init --builder webpack5

styled-components 설치

- styled-compoenents의 의존성 패키지인 react-is 설치

yarn workspace components add styled-components
yarn workspace components add react-is

typescript confing

tsconfig.json

{
  "extends": "../../tsconfig.json",
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

storybook main.js 설정

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  features: {
    interactionsDebugger: true,
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
  webpackFinal: (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        modules: [...config.resolve.modules],
        fallback: {
          timers: false,
          tty: false,
          os: false,
          http: false,
          https: false,
          zlib: false,
          util: false,
          assert: false,
          ...config.resolve.fallback,
        },
      },
    };
  },
};

필요없는 package.json 설정 제거 및 packageManager추가

{
  "name": "@common/components",
  "packageManager": "yarn@3.2.0",
  "main": "src/index.tsx",
  "private": true,
  "dependencies": {
    "cra-template-typescript": "1.2.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-is": "^18.0.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.5"
  },
  "scripts": {
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "devDependencies": {
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.4.22",
    "@storybook/addon-docs": "^6.4.22",
    "@storybook/addon-essentials": "^6.4.22",
    "@storybook/addon-interactions": "^6.4.22",
    "@storybook/addon-links": "^6.4.22",
    "@storybook/builder-webpack5": "^6.4.22",
    "@storybook/jest": "^0.0.10",
    "@storybook/manager-webpack5": "^6.4.22",
    "@storybook/node-logger": "^6.4.22",
    "@storybook/preset-create-react-app": "^4.1.0",
    "@storybook/react": "^6.4.22",
    "@storybook/testing-library": "^0.0.11",
    "@types/node": "^17.0.27",
    "@types/react": "^18.0.7",
    "@types/react-dom": "^18.0.0",
    "@types/styled-components": "^5",
    "typescript": "^4.6.3",
    "webpack": "^5.72.0"
  }
}

storybook(webpack5)을 사용하기위한 root 세팅

root위치의 package.json 에 resolutions 설정

{
	"resolutions": {
	    "webpack": "5",
	    "@storybook/core-common/webpack": "^5",
	    "@storybook/core-server/webpack": "^5",
	    "@storybook/react/webpack": "^5"
	  }
}

storybook에 typescript를 적용하기 위해 root tsconfig에 references 추가

{
  "compilerOptions": {
   ...
  },
  "references": [
    {
      "path": "packages/components"
    }
  ],
  "exclude": ["packages/**/dist/**"],
  "include": []
}

최종