TypeScript 找不到模块 react-scripts lerna webpack

Question

我正在尝试使用 lerna、react-scripts、webpack 和 sass 设置一个新项目。

我的目录结构如下

myApp
  /packages
    /myReactApp -> this is a react create app application
      /tsconfig.json
      /package.json
    /components -> this is built using webpack
      /dist => is is autogenerated
        /index.js
        /index.d.ts
        /elements
          /Button.d.ts
      /tsconfig.json
      /package.json
      /webpack.config.js
      /src/elements/Button
                    /Button.tsx
                    /Button.scss
    /tsconfig.json
    /tsconfig.settings.josn
  /package.json

在我的 /packages/myReactApp/src/components/SomeComponent.js 中，从“组件”package 导入一个组件。

import { Button } from 'components';

来自 myReactApp 的 /packages/myReactApp/package.json 文件依赖于“组件”package

{
  "name": "myApp",
  "version": "1.0.0",
  "private": true,
  "main": "src/index.tsx",
  "dependencies": {
    "@types/react-router-dom": "^5.1.5",
    "cra-template-typescript": "1.0.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.0",
    "types": "^0.1.1",
    "components": "1.0.0" => this is the dependency of the other package
  },
  "scripts": {
    "start": "react-scripts start",
==> "myApp:start": "yarn run start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
}

/packages/myReactApp/tsconfig.json 文件看起来像这样

{
  "extends": "../tsconfig.settings.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "skipLibCheck": true
  },
  "references": [
    {
      "path": "../components"
    }
  ],
  "include": [
    "src"
  ]
}

/packages/components/package.json 看起来像这样

{
  "name": "components",
  "version": "1.0.0",
  "main": "./dist/index.js",=> this file is generate by webpack and is in the right location
  "types": "./dist/index.d.ts", => this file is generate by webpack and is in the right location
  "scripts": {
    "delete": "rimraf dist",
    "start": "yarn run delete && webpack --env.mode development --watch",
    "myApp:start": "yarn run start",
    "test": "jest"
  },
  "devDependencies": {
    ....
  }
}

/packages/components/webpack.config.js

module.exports = {
    mode: 'development',
    entry: './src/index.tsx',
    output: {
        filename: 'index.js',
        path: __dirname + '/dist',
        libraryTarget: 'commonjs',
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.css', '.scss'],
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                ],
            },
            { test: /\.tsx?$/, loader: 'ts-loader' },
        ],
    }
};

/packages/tsconfig.json

{
  "files": [],
  "references": [
    { "path": "myReactApp" },
    { "path": "components" }
  ]
}

/packages/tsconfig.settings.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "strict": true,
    "composite": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "jsx": "react",
    "skipLibCheck": false
  }
}

错误如下：

/Users/.../projects/.../MyApp/packages/myReactApp/src/components/SomeComponent/myComponent.tsx
TypeScript error in /projects/.../myApp/packages/myReactApp/src/components/SomeComponent/myComponent.tsx(3,26):
Cannot find module 'components'.  TS2307

index.js 和 index.d.ts 文件是在 package 组件中正确生成的，但是主要的 react 应用程序并不知道它。

我的猜测是，当我启动 webpack 服务器和 lerna 并行启动两个项目时，我运行了 rimraf /dist，而 myApp 首先启动，它不知道依赖项 package 的定义。

我尝试将"composite": true选项与references选项结合使用，但它不起作用。 也许我错过了一些东西。

我还尝试使用 tsc 而不是 webpack 来运行 /packages/components package。 它工作得很好，但 tsc 的问题是我无法导入 scss 文件（或其他类型的文件）。 所以它也可能是 webpack 配置问题。

编辑：如果我将import { Button } from 'component'; import { Button } from 'component/'; 即使我再次删除 / 它也会开始工作。 （或者我可以删除整行，让 webpack 重新编译并添加回来）

感谢您阅读这篇长文。 如果您需要更多详细信息，请告诉我。

Answer 1

问题是反应服务器在依赖打包生成 dist 文件夹之前开始监视文件。

解决方案是更改执行脚本的 lerna 命令，如下所示（在主 package.json 文件中）：

"myApp:start": "lerna run --stream --no-sort admin:start", ...

所以这个选项--no-sort成功了。 此选项不在 lerna 自述文件中：(