javascript - 为什么未定义从 index.tsx 文件导出？ ( react + typescript )

Question

我有一个简单的上下文提供程序，我想将其导出为 npm 包。

我使用 create-react-library 创建了我的 npm 包.

我已经创建了一个 index.tsx 文件，当从另一个项目导入这个 npm 包时可以访问该文件；我正在将上下文提供程序导入此 index.tsx，然后将其导出。

当我尝试使用从 index.tsx 导入的 ContextProvider 运行测试时，导入的对象未定义(即使我可以在 VS Code 中导航到它)。但是，当我直接从源代码导入它时，它工作正常。我需要让它从 index.tsx 文件中运行，以便通过 npm 包访问它。

任何人都可以向我解释我在这里缺少什么吗？

源/索引.tsx

import ErrorHandler from './contexts/ErrorHandlerContextProvider'

export { ErrorHandler }

// export { default as ErrorHandler } from './contexts/ErrorHandlerContextProvider' //<-- no luck

src/index.test.tsx

// import ErrorHandler from './contexts/ErrorHandlerContextProvider' // <-- this import works
import { ErrorHandler } from '.'

describe('ErrorHandlerContextProvider', () => {
  it('is truthy', () => {
    expect(ErrorHandler.ErrorHandlerContextProvider).toBeTruthy()
  })
})

src/contexts/ErrorHandlerContextProvider.tsx

import React, { createContext, FC, useContext } from 'react'
import PropTypes from 'prop-types'

type errorHandlerContextType = {
  handleError: (error: Error, info: string) => Promise<void>
}

const ErrorHandlerContext = createContext<errorHandlerContextType | null>(null)

const useErrorHandlerContextProvider = () => {
  return useContext(ErrorHandlerContext)
}

const ErrorHandlerContextProvider: FC = ({ children }) => {

  const handleError = (error: Error, info: string): Promise<void> => {
    console.log('error', error)
    console.log('info', info)

    return Promise.reject(error)
  }

  return (
    <ErrorHandlerContext.Provider value={{ handleError }}>
      {children}
    </ErrorHandlerContext.Provider>
  )
}

ErrorHandlerContextProvider.propTypes = {
  children: PropTypes.node.isRequired
}

export default { ErrorHandlerContextProvider, useErrorHandlerContextProvider }

/tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "declaration": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "example"]
}

npm 运行测试

FAIL src/index.test.tsx● ErrorHandlerContextProvider › is truthy

TypeError: Cannot read property 'ErrorHandlerContextProvider' of undefined

  4 | describe('ErrorHandlerContextProvider', () => {
  5 |   it('is truthy', () => {
> 6 |     expect(ErrorHandler.ErrorHandlerContextProvider).toBeTruthy()
    |                         ^
  7 |   })
  8 | })
  9 |

  at Object.<anonymous> (src/index.test.tsx:6:25)

Answer 1

这看起来真的很可疑:

// src/index.test.tsx

// works
// import ErrorHandler from './contexts/ErrorHandlerContextProvider'

// does not work
import { ErrorHandler } from '.'

由于禁用的导入有效，我们知道 impl 文件的默认导出有效。但是您的索引没有默认导出(这对于 npm 来说似乎很不礼貌，但您确实如此)。这告诉我要么是测试文件错误地导入了 impl，要么是桶文件。 (我认为索引不太可能导出 impl 错误。)

您的所有其他进口、导出和申报在随意检查时似乎都是正确的。

所以这里有一大堆想法:

• 尝试使用实际的文件名，而不仅仅是 from '.'
• 桶中没有 React，所以尝试将 index.tsx 重命名为 index.ts
• 确认您的测试设置在默认文件扩展名和默认文件名方面使用与应用代码相同的设置

如果这些都没有，请尝试使用您的基本错误捕获技能来查明链中第一个损坏的链接。

1. 在导入后将 console.log("ErrorHandler", ErrorHandler) 添加到您的索引，然后再次运行测试并查找该日志语句以确认导入的东西看起来像您想要的期待。
2. 在测试文件中尝试同样的事情，检查从桶文件中导入的内容。

目标是找出导入链的哪一步出了问题。

---

此外:ES6 解构与 ES6 命名导入/导出不是一回事，您不能混合搭配。所以，我认为这段代码不应该工作:

// file1.js
export default { property: 'value' }


// file2.js
import { property } from './file1' // should fail

原因是 file1 没有命名导出，它只有一个默认导出，并且 file2 中的导入语句不允许在导入时解构该对象。 file2 中的代码应读作:“import named export 'property' from file1”——这将不起作用，因为 file1 没有命名导出。

老实说，我在这里没有看到违反此规定的行为，但需要牢记这一点。

---

最后一个想法:不要这样组织你的测试。

1. ErrorHandlerContextProvider 的测试文件应该与提供程序的 impl 位于同一文件夹中(或位于嵌套的 __tests 文件夹中，具体取决于您的偏好)。该测试套件的正确工作是测试提供者的实际影响。
2. 如果您甚至为 index.test.tsx 烦恼，该套件的正确工作是只是证明您的 npm 模块的公共(public) API 具有正确的形状。它没有业务测试实际功能。

即使没有必要解决问题，我也会进行此更改。但是，在您准确找出根本问题所在(并修复它)之前，我会推迟进行更改。