yarn2 rollup -c 找不到模块“react”

Posted 2023-02-16

技术标签:

【中文标题】yarn2 rollup -c 找不到模块“react”【英文标题】：yarn2 rollup -c Cannot find module "react" 【发布时间】：2021-11-04 11:16:31 【问题描述】：

tsconfig.json


    "compilerOptions": 
      "declaration": true,
      "declarationDir": "dist/types", // dist폴더에 ts 타입 속성을 빌드한다.
      "target": "es5", // ES 대상버전
      "lib": ["dom", "dom.iterable", "esnext"], // 컴파일에 포함될 라이브러리 파일 목록
      "skipLibCheck": true, // *.D.ts의 타입검사 건너 뜀.
      "esModuleInterop": true, // ASD 활성
      "allowSyntheticDefaultImports": true, // default 없는 모듈에서 default import 허용
      "strict": true,
      "module": "es6", // 모듈 코드 생성 지정
      "moduleResolution": "node", // 모듈 해석방식 결정
      "resolveJsonModule": true, // json확장자로 임포트된 모듈 포함.
      "jsx": "react", // tsx 파일에서 jsx를 지원함. 모드가 여러개임
      "typeRoots": ["@types"],
      "noImplicitAny": false,
      "baseUrl": ".",
      "paths": 
        "@/*": ["/*"],
        "~/*": ["src/*"]
      ,
    ,
    "include": ["**/*.tsx", "**/*.ts", "@types", "index.ts", "src/index.ts"],
    "exclude": ["build", "dist", "lib", "**/stories", "**/*.stories.tsx", "rollup.config.js"]

rollup.config.js

import pkg from './package.json';
import typescript from 'rollup-plugin-typescript2';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import postcssPrefixer from 'postcss-prefixer';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import babel from 'rollup-plugin-babel';
import svgr from '@svgr/rollup';
import url from 'rollup-plugin-url';

const extensions = ['.js', '.jsx', '.ts', '.tsx', '.scss'];

// babel-preset-react-app를 사용한다면 BABEL_ENV를 필수로 설정해야함.
process.env.BABEL_ENV = 'production';

function setUpRollup( input, output ) 
    return 
      input,
      // exports: 'named',
      output,
      watch: 
        include: '*',
        exclude: '.yarn/**'
      ,
      plugins: [
        peerDepsExternal(), // peerDependency를 번들링 결과물에서 제외
        json(),
        resolve( extensions ), // node_modules에서 모듈 불러올 수 있게 해줌, ts/tsx 불러올 수  있게 해줌.
        commonjs(),
        babel( extensions, runtimeHelpers: true ), // Babel을 사용 할 수 있게 해줌
        url(),
        svgr(),
        typescript(
          exclude: [ '**/stories', '**/*.stories'],
          useTsconfigDeclarationDir: true
        ), // 만든 타입을 자동으로 build된 결과물에 넣어줌.
        postcss(
          extract: true,
          modules: true,
          sourceMap: true,
          use: ['sass'],
          plugins: [
            postcssPrefixer(
              prefix: `$pkg.name__`,
            ),
          ],
        ),
      ],
      external: ['react', 'react-dom'],
    ;
  ;

  export default [
    setUpRollup(
      input: 'src/index.ts',
      output: 
        file: pkg.cjs,
        sourcemap: true,
        format: 'cjs',
      ,
    ),
    setUpRollup(
      input: 'src/index.ts',
      output: 
        file: pkg.esm,
        sourcemap: true,
        format: 'esm',
      ,
    ),
  ];

package.json


  "name": "custom-reactfullpage.js",
  "version": "1.0.0",
  "cjs": "dist/cjs.js",
  "esm": "dist/esm.js",
  "main": "dist/index.js",
  "repository": "https://github.com/remigailard80/fullpageLib.js",
  "author": "KIMMINSEOK",
  "license": "NO LICENSE",
  "types": "dist/types/index.d.ts",
  "module": "dist/cjs.js",
  "type": "module",
  "files": [
    "/dist"
  ],
  "devDependencies": 
    "@babel/core": "^7.15.0",
    "@mdx-js/react": "^1.6.22",
    "@rollup/plugin-commonjs": "^20.0.0",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.0.4",
    "@storybook/addon-actions": "^6.3.8",
    "@storybook/addon-docs": "^6.3.8",
    "@storybook/addon-essentials": "^6.3.8",
    "@storybook/addon-links": "^6.3.8",
    "@storybook/cli": "^6.3.8",
    "@storybook/react": "^6.3.8",
    "@svgr/rollup": "^5.5.0",
    "@types/esm": "^3",
    "@types/jest": "^27.0.1",
    "@types/mdx-js__react": "^1",
    "@types/node": "^16.7.10",
    "@types/react": "^17",
    "@types/react-dom": "^17.0.9",
    "@yarnpkg/pnpify": "^3.0.1-rc.2",
    "@yarnpkg/sdks": "^2.4.2-rc.2",
    "babel-loader": "^8.2.2",
    "babel-preset-react-app": "^10.0.0",
    "esm": "^3.2.25",
    "postcss": "^8.3.6",
    "postcss-prefixer": "^2.1.3",
    "react": "^17.0.2",
    "react-docgen-typescript-loader": "^3.7.2",
    "react-dom": "^17.0.2",
    "rollup": "^2.56.3",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.1",
    "rollup-plugin-typescript2": "^0.30.0",
    "rollup-plugin-url": "^3.0.1",
    "typescript": "^4.4.2"
  ,
  "peerDependencies": 
    "react": "*",
    "react-dom": "*"
  ,
  "scripts": 
    "sb": "start-storybook -p 6006",
    "build-storybook": "build-storybook"

我在 VSCode '4.4.2-sdk' 上设置了 typescript 版本。

当我输入时

yarn rollup -c

随后出现此错误，

[!] (plugin rpt2) Error: C:/custom-reactfullpage.js/fullpageLib.js/src/components/Container.tsx(1,19): semantic error TS2307: Cannot find module 'react' or its corresponding type declarationsrc\components\Container.tsx
Error: C:/custom-reactfullpage.js/fullpageLib.js/src/components/Container.tsx(1,19): semantic error TS2307: Cannot find module 'react' or its corresponding type declarations.

猜我的代码现在不要使用 ./pnp.cjs。

** 但是如果我输入 **