reactjs - React 输出目标的 StencilJS 错误 - 您可能需要额外的加载器来处理这些加载器的结果

Question

我正在 Stencil 中为自定义设计系统创建一些基本元素。我创建了一些基本组件，它们作为自定义元素本身可以正常工作，但在用作 React 组件时会抛出错误。

我通过 Stencil 生成了 React 组件，方法是将 @stencil/react-output-target 包含在 stencil.config.ts 中。

reactOutputTarget({
      componentCorePackage: '@sr-design-system/simple-stencil-demo',
      proxiesFile: './react/src/components/index.ts',
      includeImportCustomElements: true
    }),

然后，我将所有组件(自定义元素和 React)上传到私有(private) npm 包，并将它们安装在单独的项目中。自定义元素似乎工作正常，但使用 React 元素时出现以下错误。

ERROR in ./node_modules/@sr-design-system/simple-stencil-demo/react/src/index.ts 6:12
Module parse failed: Unexpected token (6:12)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import { createReactComponent } from './react-component-lib';
|
> import type { JSX } from '@sr-design-system/simple-stencil-demo/';
|
| import { defineCustomElement as defineSrText } from '@sr-design-system/simple-stencil-demo/dist/components/sr-text';
 @ ./src/App.jsx 7:0-73
 @ ./src/index.jsx 7:0-24 12:33-36

webpack 5.65.0 compiled with 1 error and 1 warning in 63 ms

我已经被这个问题困扰好几天了。知道解决方案是什么吗？

===tsconfig.json===

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["dom", "es2017"],
    "module": "es2015",
    "moduleResolution": "node",
    "pretty": true,
    "removeComments": false,
    "strictPropertyInitialization": false,
    "target": "es2017",
    "baseUrl": ".",
    "paths": {
      "@srds/react": ["./react"]
    },
    "jsx": "react",
    "jsxFactory": "h"
  },
  "include": ["src"]
}

===stencil.config.ts===

import { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil/react-output-target';

export const config: Config = {
  namespace: 'simple-stencil-demo',
  bundles: [{ components: ['sr-text'] }, { components: ['text-demo'] }],
  outputTargets: [
    reactOutputTarget({
      componentCorePackage: '@sr-design-system/simple-stencil-demo',
      proxiesFile: './react/src/components/index.ts',
      includeImportCustomElements: true,
    }),
    {
      type: 'dist',
      esmLoaderPath: './loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  buildEs5: 'prod',
};

Answer 1

我知道问题出在哪里了。由于某种原因，每次运行 npm run build 时，并未生成 dist 文件夹。

有时会生成，有时则不会。我相信这是由于我的组件代码中的一些错误导致的，这些错误默默地失败了。所以现在我每次构建库时都会检查 dist 文件夹。

在我的最后一次工作尝试中，我按照 Stencil 团队在 documentation 中的建议采用了 monorepo 方法。 .

以下是我为具有 React 输出的基本 Stencil 库采取的所有步骤:

• 创建单一存储库
• 创建模板库
  • 使用 npx stencilgenerate 生成组件
  • 将 package.json 中的名称更新为 MY_LIBRARY
  • npm 我@stencil/react-output-target
  • 将 React Wrapper 函数添加到 stencil.config.ts

  react({
     componentCorePackage: 'MY_LIBRARY',
     proxiesFile: '../MY_REACT_LIBRARY/src/components/stencil-generated/index.ts',
     includeDefineCustomElements: true,
   }),
  

• 移回 monorepo 的根级别
• 创建 React 库
  • git 克隆 https://github.com/ionic-team/stencil-ds-react-template react 组件
  • 将 package.json 中的名称更新为 MY_REACT_LIBRARY
  • 在 package.json 中将 private 更改为 false
• 在模板库中
  • 运行npm run build
  • 检查 dist 文件夹是否包含所有子文件夹(cjs、collection、components、esm、types、web-components、index.cjs.js、index.js)
  • 运行npm link以生成全局符号链接(symbolic link)
• 在 React 库中
  • 运行npm链接MY_LIBRARY
  • 运行npm i
  • 运行npm run build(不确定是否需要此步骤，因为它没有记录，但我还是这样做了)
  • 运行npm链接
• 移回 monorepo 的根级别
• 创建 React 演示
  • npx create-react-app MY_REACT_DEMO --模板 typescript
  • npm 链接 MY_REACT_LIBRARY
  • 从库中导入组件并在 App.tsx 中使用它
  • npm run start

当我确认一切正常时，我添加了一个用于 npm 包管理的基本 lerna.json 配置。使用此配置，Lerna 将自动处理我们的包的 symver。

{
  "version": "independent",
  "npmClient": "npm",
  "command": {
    "publish": {
      "allowBranch": ["master", "react-generation"],
      "ignoreChanges": ["*.md", "build.js", "config.json"],
      "message": "(auto) Lerna publish",
      "registry": "URL_TO_MY_PACKAGE_REGISTRY"
    },
    "bootstrap": {
      "ignore": "component-*",
      "npmClientArgs": ["--no-package-lock"]
    }
  },
  "packages": ["MY_LIBRARY", "MY_REACT_LIBRARY"]
}

配置 Lerna 后，我按照发布向导使用命令 npx lernapublish 进行发布。

发布后，可以使用 npm i MY_REACT_LIBRARY 将包安装在任何 React 项目中，并且它应该可以工作。