React-scripts+Yarn项目导入TypeScript类报错：模块找不到及构造函数问题

Let's work through both of your issues—module resolution failure and the "is not a constructor" error are common hurdles when integrating TypeScript into a React project, so we'll break them down one by one.

1. Fixing "Module not found: Can't resolve './DiamondNodeModel'" #

First, let's tackle the missing module error. Here are the most likely fixes:

• Verify file path and case sensitivity: Webpack (which powers react-scripts) is case-sensitive on most systems. Double-check that your file is named exactly DiamondNodeModel.ts (no lowercase letters, no typos) and that the directory structure matches your import path. For example, if the file is in a subfolder like src/components/nodes/, your import should reflect that.
• Try adding the .ts extension explicitly: While react-scripts usually supports omitting extensions for TypeScript files, some edge cases (like nested directories or custom tsconfig settings) require it. Update your import to:

  import {DiamondNodeModel} from './DiamondNodeModel.ts'
  

• Check your tsconfig.json settings: Make sure your config includes these key settings to ensure proper module resolution:

  {
    "compilerOptions": {
      "module": "esnext",
      "resolveJsonModule": true,
      "esModuleInterop": true
    },
    "include": ["./src/**/*"]
  }
  

  The include array ensures TypeScript scans all your source files.
• Clear cache and restart your dev server: Cached files can cause false resolution errors. Run these commands:

  yarn cache clean
  yarn start --reset-cache
  

2. Fixing "is not a constructor" Error #

This error usually stems from mismatched imports/exports or missing dependencies in your class definition. Here's what to check:

• Ensure NodeModel and DiamondPortModel are properly imported/exported: Your DiamondNodeModel extends NodeModel and uses DiamondPortModel—if these are custom classes, confirm they're exported correctly (either named exports like export class NodeModel or default exports, and imported accordingly in DiamondNodeModel.ts). If they're from an external library, double-check your import statements for those classes.
• Confirm your export/import match: Your code uses a named export (export class DiamondNodeModel), so your current import import {DiamondNodeModel} from './DiamondNodeModel' is correct. But if you accidentally used a default export (e.g., export default class DiamondNodeModel), you'd need to adjust the import to:

  import DiamondNodeModel from './DiamondNodeModel'
  

• Check for variable name conflicts: Make sure you're not redefining DiamondNodeModel elsewhere in the file where you're using it. For example, a variable like const DiamondNodeModel = 'something' would overwrite the class reference.
• Inspect the compiled output: If you're still stuck, look at the compiled JavaScript file in your build directory (run yarn build first). Check if the DiamondNodeModel class is being compiled as a valid constructor function—this can reveal issues with TypeScript compilation settings.

Quick Tip for React-Scripts + TypeScript Setup #

If you just added TypeScript to your project, make sure you have the required dependencies installed:

yarn add typescript @types/react @types/react-dom

You can generate a basic tsconfig.json with yarn tsc --init if you don't already have one.

内容的提问来源于stack exchange，提问作者beek