B
B
beefront172020-01-17 17:36:55
JavaScript
beefront17, 2020-01-17 17:36:55

How to set absolute path in typescript/webpack?

Good afternoon! Please help me understand why this config does not see the absolute path?
How do you properly set up absolute paths in a typeScript project? Without typeScript everything works ok.
I'm only setting up a project on react/redux/typescript.
import where error webpack sees error
import {SOME_URL} from 'src/constants';

Module not found: Error: Can't resolve 'src/constants'

Although webstorm does not highlight anything and finds everything.
 
webpack.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  context: path.resolve(__dirname, `./src`),
  entry: ['@babel/polyfill', './index.tsx'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[hash].js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      'src': path.resolve(__dirname, './src'),
    }

  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        exclude: /node_modules/,
        use: 'ts-loader',
      },
      {
        test: /\.(js|jsx)$/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        exclude: /node_modules/,
        use: 'source-map-loader',
        enforce: 'pre'
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: '../public/index.html',
      favicon: '../public/favicon.ico'
    }),
  ],
  devtool: 'inline-source-map',
  devServer: {
    host: 'localhost',
    port: 8080,
    open: true,
    historyApiFallback: true,
    hot: true,
    inline: true
  }
};

tsconfig.js
{
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "jsx": "react",
        "module": "es6",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "declaration": false,
        "removeComments": true,
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "strict": true,
        "outDir": "build",
        "lib": ["es6", "es7", "dom"],
        "baseUrl": "app"
    },
    "exclude": ["build", "node_modules"]
}

I would be very grateful for your help!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Aetae, 2020-01-18
@Aetae

In compilerOptions try to add something like:

"paths": {
  "src/*": [ "app/src/*" ]
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question