React tsconfig-paths 找不到模块

Question

I have tsconfig-paths version 3.9.0 configured in my tsconfig.json in the following way:

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
        "dom",
        "dom.iterable",
        "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    "paths": {
        "@models/*": ["./models/*"],
        "@api/*": ["./api/*"],
        "@pages/*": ["./pages/*"],
        "@utils/*": ["./utils/*"]
    }
  }
}

package.json:

{
 "dependencies": {
   "@testing-library/jest-dom": "^5.11.4",
   "@testing-library/react": "^11.1.0",
   "@testing-library/user-event": "^12.1.10",
   "@types/jest": "^26.0.15",
   "@types/node": "^12.0.0",
   "@types/react": "^17.0.0",
   "@types/react-dom": "^17.0.0",
   "react": "^17.0.1",
   "react-dom": "^17.0.1",
   "react-scripts": "4.0.3",
   "typescript": "4.1.5",
   "web-vitals": "^1.0.1"
 },
 "scripts": {
   "start": "react-scripts -r tsconfig-paths/register start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
},
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "4.15.2",
    "@typescript-eslint/parser": "4.15.2",
    "eslint": "7.11.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.21.5",
    "eslint-plugin-react-hooks": "4",
    "tsconfig-paths": "3.9.0"
 }
}

And at my App.tsx i imported using my absolute paths declared at tsconfig:

import React from 'react';
import { Test } from '@models/test.interface';
import { CONFIG } from '@api/something';
import logo from './logo.svg';
import './App.css';

function App() {
  const test: Test = {
    x: 10
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit
          {test.x}
          {CONFIG.KEY}
          <code>src/App.tsx</code>
          and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

My interface were found and compiled succefull but my 'CONFIG' weren´t. My CONFIG is a const that i export, while 'Test' is a interface.

When i compile only my interface Test, it goes completely fine. But when i import my const CONFIG, it gives this error:

Failed to compile.

./src/App.tsx
Module not found: Can't resolve '@api/something' in 'C:\Users\shadownet\Desktop\files_work\web-project\src'

Any thoughts?

Answer 1

I solved this by editing my webpack and adding the tsconfig-paths plugin.

I used react-app-rewired to change some configurations in my webpack without ejecting it.

In created a config-overrides.js at the root folder of my project, and included the following lines:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = function override(config, env) {
    if (!config.resolve) {
        config.resolve = { plugins: [] };
    }
    if (config.resolve.plugins) {
        config.resolve.plugins.push(new TsconfigPathsPlugin());
    } else {
        config.resolve.plugins = [new TsconfigPathsPlugin()];
    }
    return config;
}

With that, my tsconfig-paths worked normally.