How to not rely on relative paths in React/Webpack 3 app

Question

I'm trying to get rid of this:

import { something } from '../../services/somewhere';

And instead use:

import { something } from 'services/somewhere';

I found this article, but it only has an example for 1.x and 2.x https://moduscreate.com/blog/es6-es2015-import-no-relative-path-webpack/

My project's main folder is called app .

I've tried both of these in my webpack.config.babel.js but with no luck so far.

3.x style: https://webpack.js.org/configuration/resolve/#resolve-modules

resolve: {
  modules: [path.resolve(__dirname, 'app'), 'node_modules', path.resolve('node_modules')]
}

---

2.x style: https://moduscreate.com/blog/es6-es2015-import-no-relative-path-webpack/

resolve: {
  modules: [
    path.resolve('./app'),
    path.resolve('./node_modules')
  ]
}

Any ideas?

Webpack Config

/* eslint-disable no-console */
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import chalk from 'chalk';

const coinhover = path.resolve(__dirname, 'coinhover');
const app = path.resolve(__dirname, 'app');
const log = console.log;

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  // template: `${__dirname}/app/index.html`,
  template: path.join(__dirname, '/app/index.html'),
  inject: 'body'
});

const ExtractTextPluginConfig = new ExtractTextPlugin({
  filename: 'coinhover.css',
  disable: false,
  allChunks: true
});

const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: 'app/static', to: 'static' }]);

const PATHS = {
  app,
  build: coinhover
};

const LAUNCH_COMMAND = process.env.npm_lifecycle_event;

const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;

const productionPlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
});

const base = {
  entry: [
    PATHS.app
  ],
  output: {
    path: PATHS.build,
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.s?css/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
        loader: 'file-loader?name=[path][name].[ext]'
      }
    ]
  },
  resolve: {
    modules: [path.resolve(__dirname, 'app'), 'node_modules', path.resolve('node_modules')]
  }
  // resolve: {
  //   modules: [
  //     path.resolve('./app'),
  //     path.resolve('./node_modules')
  //   ]
  // }
};

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  plugins: [
    CopyWebpackPluginConfig,
    ExtractTextPluginConfig,
    HtmlWebpackPluginConfig
  ]
};

const productionConfig = {
  devtool: 'cheap-module-source-map',
  plugins: [
    CopyWebpackPluginConfig,
    ExtractTextPluginConfig,
    HtmlWebpackPluginConfig,
    productionPlugin
  ]
};

log(`${chalk.magenta('🤖 ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`);

export default Object.assign({}, base,
  isProduction === true ? productionConfig : developmentConfig
);

Answer 1

Maybe it's an issue with your eslint config? For example, in your .eslintrc , try adding app to your resolver settings:

{
  "...": {},
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": [
          "app",
          "node_modules"
        ]
      }
    }
  },
}