reactjs - ¿Cómo importar módulos js (con ruta absoluta) en mi archivo TypeScript en una aplicación React?

Estoy integrando TypeScript en mi aplicación de React que tiene una cantidad significativa de código. Tengo algunos HOCs a nivel de aplicación que aplico a los componentes de React de la siguiente manera:

import React from 'react';
import HOC1 from 'app/hocs/hoc1';
import compose from 'recompose/compose;

class MyComponent from React.Component {
     ...component stuff...
}

export default compose(HOC1())(MyComponent);

Pero ahora he agregado TypeScript en mi aplicación, cada vez que estoy importando

import HOC1 from 'app/hocs/hoc1';

dice

TS2307: Cannot find module 'app/hocs/hoc1'.

No quiero agregar definiciones de tipos a todos mis HOCs. ¿Cuál es la solución y por qué estoy recibiendo este error?

[EDIT] También estoy usando baseUrl en tsconfig. Mi estructura de carpetas es

/Project/configs/tsconfig
/Project/src/app/hocs

En tsconfig, he dado baseUrl como ../src a través de esta documentación.

Otra Edición Y mi configuración de webpack se ve así :

    {
        test: /\.(t|j)sx?$/,
        loader: 'happypack/loader?id=jsx-without-proptypes',
        include: [
          path.resolve(__dirname),
          path.resolve(__dirname, '../src'),
        ],
      },

Toda la configuración de webpack se ve algo así

const config = {
  context: path.resolve(__dirname, '../src'),

  mode: NODE_ENV,

  optimization: {
    splitChunks: false,
    nodeEnv: NODE_ENV,
    minimize: false,
  },

  node: {
    net: 'empty',
  },

  output: {
    path: path.resolve(__dirname, '../build/public/assets'),
    publicPath: '/assets/',
    sourcePrefix: '  ',
    pathinfo: DEBUG, //https://webpack.js.org/configuration/output/#output-pathinfo
  },

  module: {
    noParse: [/html2canvas/],
    rules: [
      {
        test: /\.tsx?$/,
        enforce: 'pre',
        use: { loader: 'awesome-typescript-loader' },
      },
      ...shimLoaders,
      ...selectiveModulesLoader,
      {
        test: /\.(t|j)sx?$/,
        loader: 'happypack/loader?id=jsx-without-proptypes',
        include: [
          path.resolve(__dirname),
          path.resolve(__dirname, '../src'),
        ],
      },
      {
        test: /\.jsx?$/,
        loader: 'happypack/loader?id=jsx-without-lodash-plugin',
        include: [
          path.resolve(__dirname, '../src/app/modules/insights/'),
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.jsx?$/,
        loader: 'happypack/loader?id=jsx-with-proptypes',
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        query: {
          presets: [['env', { include: ['babel-plugin-transform-es2015-template-literals'] }]],
        },
      },
      {
        test: /\.css$/,
        use: getCssLoaders({
          pwd: PWD,
          debug: DEBUG,
        }),
      },
      ...getScssRules(DEBUG, PWD),
      {
        test: /\.less$/,
        use: [DEBUG ? 'css-loader' : 'css-loader?minimize', 'less-loader'],
      },
      {
        test: /\.txt$/,
        loader: 'raw-loader',
      },
      {
        test: /\.svg$/,
        loader: 'spr-svg-loader',
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: 'url-loader',
        query: {
          name: DEBUG ? '[path][name].[ext]' : '[hash].[ext]', // ?[hash]
          limit: 10000,
        },
      },
      {
        test: /\.(woff|woff2)$/,
        loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/font-woff',
      },
      {
        test: /\.(otf|ttf)$/,
        loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/octet-stream',
      },
      {
        test: /\.eot$/,
        loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/vnd.ms-fontobject',
      },
      {
        test: /\.(wav|mp3)$/,
        loader: 'file-loader',
        query: {
          name: DEBUG ? '[path][name].[ext]' : '[hash].[ext]', // ?[hash]
        },
      },
      {
        test: /\.pug/,
        loader: 'pug-loader',
      },
      {
        test: /\.html$/,
        include: /src\/app/,
        loader: StringReplacePlugin.replace({
          replacements: [
            {
              //Replaces ES6 strings from languagePack to simple string
              pattern: /__\(\s*`([^`]*)`\s*\)/gi,
              replacement: (match, p1) => {
                let replacedStr = p1;
                replacedStr = replacedStr.replace(new RegExp('\\$\\{([\\w\\.\\:\\-]+)\\}', 'g'), '\' + $1 + \'');
                return `'${replacedStr}'`;
              },
            },
            {
              //Following methods - look out carefully for the *quotes* (single/double)
              //doing what i18nPlugin would do for html files - with the *single* quotes
              pattern: /__\(\s*'(.+?)'\s*\)/g,
              replacement: (match, p1) => {
                const replacedStr = p1;
                return `'${replacedStr}'`;
              },
            },
            {
              //doing what i18nPlugin would do for html files - with the *double* quotes
              pattern: /__\(\s*"(.+?)"\s*\)/g,
              replacement: (match, p1) => {
                const replacedStr = p1;
                return `"${replacedStr}"`;
              },
            },
          ],
        }),
      },
    ],
  },
  resolve: {
    modules: [
      path.resolve(PWD),
      path.resolve(PWD, '..'),
      'node_modules',
      'web_modules',
      'src',
    ],
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.webpack.js', '.web.js'],
    alias: ALIAS,
    // symlinks: false, //https://webpack.js.org/configuration/resolve/#resolve-symlinks, https://github.com/webpack/webpack/issues/1643
  },

  plugins: [getProvidePlugin(), getLoaderOptionPlugin({ debug: DEBUG }), ...getHappypackPlugin({ debug: DEBUG })],

  resolveLoader: {
    modules: ['node_modules', path.resolve(PWD, '../../node_modules'), path.resolve(PWD, './config/loaders/')],
    alias: {
      text: 'raw-loader', // treat text plugin as raw-loader
      jst: 'ejs-loader',
      style: 'style-loader',
      imports: 'imports-loader',
    },
  },

  bail: !DEBUG,

  watch: DEBUG,

  cache: DEBUG,

  stats: DEBUG ?
    {
      colors: true,
      reasons: false,
      hash: VERBOSE,
      version: VERBOSE,
      timings: true,
      chunks: false,
      chunkModules: VERBOSE,
      cached: VERBOSE,
      cachedAssets: VERBOSE,
      performance: true,
    } :
    { all: false, assets: true, warnings: true, errors: true, errorDetails: false },
};

Otra edición

El alias definido en la configuración de webpack tampoco funcionó.

Respuesta #1

https://webpack.js.org/configuration/resolve/#resolve-alias

Usando alias

Para asignar las importaciones a los archivos correctos, necesitarás usar el campo config.resolve.alias en la configuración de webpack.

Cómo se verá en tu escenario:

const config = {
  resolve: {
    alias: {
      'app': path.resolve(__dirname, 'src/app/'),
    },
  },
};

Respuesta #2

No estoy 100% seguro de que lo esté haciendo correctamente, pero también especifico la clave paths en tsconfig, así:

"baseUrl": "./src",
"paths": {
  "@common/*": ["./common/*"],
  "@moduleA/*": ["./moduleA/*"],
  "@moduleB/*": ["./moduleB/*"],
}

y parece funcionar bien. El prefijo @ es solo algo que hago para diferenciar entre mis módulos y las dependencias de npm