CODEWITHSUNDEEP
reactjswebpack
dpst
dpst

Reputation: 1283

Resolving relative paths in React with Webpack not working

I have a react project and I am using webpack. I have a component in frontend/app/components/editor/index.js that I want to include in another component. Currently in order to reference this component I am having to use a relative path (../../../../app/components/editor). However, this is very not easy to use and would like to simply use 'components/editor' for example. My Webpack config file in in fronted/webpack.config.js.

I have added a resolve setting as in this post (Resolving require paths with webpack) but it's still not working.

const {resolve} = require('path');
const path = require('path');
const webpack = require('webpack');
const validate = require('webpack-validator');
const {getIfUtils, removeEmpty} = require('webpack-config-utils');

module.exports = env => {
  const {ifProd, ifNotProd} = getIfUtils(env)

  return validate({
    entry: './index.js',
    context: __dirname,
    output: {
      path: resolve(__dirname, './build'),
      filename: 'bundle.js',
      publicPath: '/build/',
      pathinfo: ifNotProd(),
    },
    devtool: ifProd('source-map', 'eval'),
    devServer: {
      port: 8080,
      historyApiFallback: true
    },
    module: {
      loaders: [
        {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        {test: /\.css$/, loader: 'style-loader!css-loader'},
        {test: /(\.eot|\.woff2|\.woff|\.ttf|\.svg)/, loader: 'file-loader'},
      ],
    },
    resolve: {     
      root: path.resolve('./app'),
    },
    plugins: removeEmpty([
      ifProd(new webpack.optimize.DedupePlugin()),
      ifProd(new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false,
        quiet: true,
      })),
      ifProd(new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"',
        },
      })),
      ifProd(new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          screw_ie8: true, // eslint-disable-line
          warnings: false,
        },
      })),
    ])
  });
};

These are all the settings I have tried in the resolve block but nothing works.

resolve: {     
  alias: {
    shared: path.resolve(__dirname, 'app')
},

resolve: {     
  root: path.resolve('./app')
},

resolve: {     
  modules: ['app']
},

resolve: {     
  modulesDirectories: ['app']
},

Upvotes: 2

Views: 2952

Answers (1)

Deividas
Deividas

Reputation: 6507

Actually, it has to be

model.exports = env => {
  ...,
  resolve: {
      modules: ['app', 'node_modules']
  },
  ...
}

So modules is a property of resolve object which itself is a property of the global configuration object. Also, I have included node_modules, because it's likely you want to refer to those as well after you overwrite the default, which is just [ 'node_modules' ]. See docs for more information.

Update based on comment

You are getting an error from webpack-validator, which is not gonna be maintained because of the inbuilt webpack validator. See more in this SO answer and webpack-validator npm. So the error [1] "modules" is not allowed is incorrect. To fix it you need to remove/uninstall webpack-validator.

Upvotes: 1

Related Questions