将 npm 链接的 React JSX project/modules 导入 AngularJS TypeScript 模块不起作用

Question

我正在研究一个可以在 React 应用程序中使用的概念验证示例 React framework/library，以及围绕它的 AngularJS 框架包装器，以便它可以用作还有一个 AngularJS framework/library。

有 2 个项目：

样本反应框架

sample-react-framework-wrapper（AngularJS 项目）

现在我有一个 npm link 从 sample-react-framework-wrapper 项目到 sample-react-framework 项目。

sample-react-framework 有 3 个组件 - 导航栏、横幅和侧面菜单。这些组件是 .jsx 文件。

sample-react-framework-wrapper 也有 3 个组件——相同的 3 个——它们只是渲染 React 元素的 .ts 包装器。

我正在尝试将我的 React JSX 模块导入 TypeScript 模块，它似乎可以正常工作，但最后还是抛出了一个错误：

webpack result is served from http://localhost:8090/assets
content is served from C:\workspaces\UI\sample-react-framework-wrapper
10% 0/1 build modulests-loader: Using typescript@1.6.2
Hash: c4f0160d96f95001f727
Version: webpack 1.12.2
Time: 3233ms
              Asset     Size  Chunks             Chunk Names
sample.framework.js  42.5 kB       0  [emitted]  main
chunk    {0} sample.framework.js (main) 39.6 kB [rendered]
    [0] ./src/components/index.ts 112 bytes {0} [built]
    [1] ./src/components/banner/banner.ts 2.44 kB {0} [built] [1 error]
    [3] ../sample-react-framework/src/index.js 862 bytes {0} [built]
    [4] ../sample-react-framework/src/components/banner/banner.jsx 8.64 kB {0} [built]
    [5] ../sample-react-framework/~/classnames/index.js 1.12 kB {0} [built]
    [6] ../sample-react-framework/src/components/side-menu/side-menu.jsx 11.7 kB {0} [built]
    [7] ../sample-react-framework/src/components/navigation/navigation.jsx 9.81 kB {0} [built]
    [8] ./src/components/navigation/navigation.ts 2.37 kB {0} [built] [1 error]
   [10] ./src/components/side-menu/side-menu.ts 2.44 kB {0} [built] [1 error]
     + 2 hidden modules

ERROR in ./src/components/side-menu/side-menu.ts
(7,26): error TS2307: Cannot find module 'sample-react-framework'.

ERROR in ./src/components/navigation/navigation.ts
(7,28): error TS2307: Cannot find module 'sample-react-framework'.

ERROR in ./src/components/banner/banner.ts
(6,24): error TS2307: Cannot find module 'sample-react-framework'.

如果您看上面，您会发现它能够很好地进入并构建 JSX 文件 - 但仍然会抛出最终无法找到我的框架的错误。

我尝试了与谷歌搜索不同的东西，例如将 resolve.fallback 设置为我的 path.join(__dirname, 'node_modules') - 但也失败了（尝试了这个问题：https://github.com/webpack/webpack/issues/784）

不幸的是，我真的不确定此时还能尝试什么:(

这是我如何定义 JSX 的示例类:

import React from 'react';
import classNames from 'classnames';

import SideMenu from '../side-menu/side-menu';

class Banner extends React.Component {

}

module.exports = Banner;

和 TS 模块：

/// <reference path="../../../typings/angularjs/angular.d.ts" />
/// <reference path="../../../typings/react/react.d.ts" />

import * as React from 'react';

import { Banner } from 'sample-react-framework';

angular
    .module('sampleFramework.banner', [])
    .directive('bannerComponent', bannerComponent);

function bannerComponent() {
    return {
        restrict: 'E',
        scope: {
            banner: '=',
            links: '='
        },
        replace: true,
        ...
    }
}

有人知道是什么原因造成的吗？

Answer 1

我遇到了同样的问题。而且我在两个 ts-loader and typescript-loader 中都找到了问题（而不是在 webpack 本身中）——因为它们都无法解析 npm 链接的模块。

我还能够使用原始 TypeScript 编译器编译相同的代码库——我将其用作解决方案（也因为其他原因）。

但我认为将 resolve.falback 指向 original/linked 来源确实有帮助。

Answer 2

我还发布了一个寻求 ts-loader 项目 GitHub 问题帮助的问题：https://github.com/TypeStrong/ts-loader/issues/72

jbrantly 很快回复我并告诉我问题是我需要为我的 React 框架定义一个类型文件以便 TypeScript 理解它 - 糟糕！

From your SO question:
import { Banner } from 'sample-react-framework';
The error here is that TypeScript is saying it doesn't understand sample-react-framework. TypeScript doesn't understand plain JS modules. It only understands TS modules or declaration files that describe the API of the JS module. Assuming you want to keep sample-react-framework as pure JS and not TypeScript, you'll need to create a definition file for it. For example...
// index.d.ts
import React from 'react';
export class Banner extends React.Component { }
Then in the package.json of sample-react-framework you could put:
"typings": "index.d.ts"
TypeScript should then be able to resolve the definition file and understand what you mean when you say import { Banner } from 'sample-react-framework';.

我已经对其进行了测试，并在 sample-react-framework 中定义了以下 index.d.ts：

import * as React from 'react';

interface Props { }
interface State { }

export class Banner extends React.Component<Props, State> { }
export class SideMenu extends React.Component<Props, State> { }
export class Navigation extends React.Component<Props, State> { }

TS 编译器抱怨 React.Component 不匹配定义（并且 React 导入不是'* as React'） - 但除了那些小的调整之外，他的解决方案正是我需要修复的问题。

将 npm 链接的 React JSX project/modules 导入 AngularJS TypeScript 模块不起作用

Importing npm linked React JSX project/modules into AngularJS TypeScript module not working

npm

angularjs

typescript

webpack

react-jsx