reactjs - React tsconfig-paths no encuentra el módulo

Tengo la versión 3.9.0 de tsconfig-paths configurada en mi tsconfig.json de la siguiente manera:

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"
 }
}

Y en mi App.tsx importé usando mis rutas absolutas declaradas en 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;

Mi interfaz se encontró y compiló correctamente, pero mi 'CONFIG' no. Mi CONFIG es una constante que exporto, mientras que 'Test' es una interfaz.

Cuando solo compilo mi interfaz Test, todo va perfectamente. Pero cuando importo mi constante CONFIG, da este 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'

¿Alguna opinión?

Respuesta #1

Resolví esto editando mi webpack y agregando el complemento tsconfig-paths.

Usé react-app-rewired para cambiar algunas configuraciones en mi webpack sin expulsarlo.

He creado un config-overrides.js en la carpeta raíz de mi proyecto e incluido las siguientes líneas:

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;
}

Con eso, mis tsconfig-paths funcionaron normalmente.

Respuesta #2

Primero, cierra Visual Studio Code. Luego abre Visual Studio Code y ejecuta

npm i