webpack Yarn工作区-单React层-React层17、React层18、嵌套层、共享层/公共层

omhiaaxx 于 2022-11-13 发布在 Webpack

关注(0)|答案(1)|浏览(158)

我想有一个使用Yarn工作空间的monorepo，其中我持有：

一个react 17应用程序
一个react 18应用程序
nestjs应用程序
具有用于所有它们的公共功能的共享层（例如：日期格式函数）

我克隆了这个项目https://github.com/mightyhorst/medium-react-nestjs-monorepo，它设法在它们之间共享类型。我不得不向nohoist添加typescript和react的东西，这样它就不会提升错误的版本，而且它工作得很好-react应用程序和nest都可以使用共享类型。当我在公共层添加函数时，问题就出现了。
workspaces/common/src/index.ts个

作品

export interface User {
  email: string
}

不起作用

export interface User {
  email: string
}
export function hello() { console.log('world') }

我在运行任何react应用程序时都会收到此错误（尽管类型没有任何错误）：

../common/src/model.ts 4:7
Module parse failed: Unexpected token (4:7)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| $RefreshSetup$(module.id);
| 
> export interface User{
|     email: string;
|     firstName?: string;

运行nestjs时出现以下错误：

export * from "./model";
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:984:16)
    at Module._compile (internal/modules/cjs/loader.js:1032:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/elbit/Projects/medium-react-nestjs-monorepo/workspaces/nestjs/dist/src/main.js:5:18)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)

我觉得这是一个常见的事情，但我找不到解决办法。

webpack

来源：https://stackoverflow.com/questions/73947707/yarn-workspaces-monorepo-react-17-react-18-nestjs-shared-common-layer

1条答案

按热度按时间

relj7zay1#

我使用以下工具使其工作：

yarn-workspaces，没有lerna来处理所有软件包
在每个包中设置"workspaces": { "nohoist": ["**"] }（在package.json中）
craco处理common软件包和别名（通过craco-alias）
@ef-carbon/tspm以解析任何非React软件包的tsconfig.compilerOptions.paths

我的craco.config.js

const path = require("path");
const { getLoader, loaderByName } = require("@craco/craco");
const CracoAlias = require("craco-alias");

const packages = [];
packages.push(path.join(__dirname, "../common"));

module.exports = {
  webpack: {
    configure: (webpackConfig, arg) => {
      const { isFound, match } = getLoader(
        webpackConfig,
        loaderByName("babel-loader")
      );
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include];

        match.loader.include = include.concat(packages);
      }

      return webpackConfig;
    },
  },
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: ".",
        tsConfigPath: "./tsconfig.paths.json",
      },
    },
  ],
};

我的tsconfig.json非React应用程序

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "./",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "build",
    "paths": { "@ui/common/*": ["../common/src/*"] },
    "resolveJsonModule": true,
    "rootDirs": [".", "../common/build"],
    "skipLibCheck": true,
    "strict": true,
    "target": "es5"
  },
  "include": ["src", "../common/src"]
}

赞(0）回复(0）举报 2022-11-13

我来回答

webpack Yarn工作区-单React层-React层17、React层18、嵌套层、共享层/公共层

1条答案

相关问题

热门标签

最新问答