CODEWITHSUNDEEP
importwebpackaliasresolve
Ilija Bradaš
Ilija Bradaš

Reputation: 645

Webpack 2 resolve alias

I have a little problem regarding resolving aliases in webpack 2. No matter what i do i cant resolve this. Here is the relevant code:

/* webpack.mix.js */

       mix.webpackConfig({
         module: {
               rules: [
                   {
                       test: /\.js$/,
                       loader: 'eslint-loader'
                   }
               ]
           },
           resolve: {
             root: path.resolve(__dirname), 
                    // path is reqired at the beggining of file 
             alias: {
               config: 'src/assets/js/config', // this is a config folder
               js: 'src/assets/js'
             }
           }
       });

/* router.js */ 

        import { DashboardRoute } from 'config/route-components'
      // this import is unresolved

Upvotes: 7

Views: 7720

Answers (3)

Maverick09
Maverick09

Reputation: 1075

In ionic 3 (version 3.13.3), in order to get alias mapping working, you will have to define path mapping both in webpack.config.js & tsconfig.json

Please refer complete answer here question here

Upvotes: 0

Michael Jungo
Michael Jungo

Reputation: 33010

The resolve.root option no longer exists in webpack 2. Instead it is merged into resolve.modules (from the official Migration Guide). Webpack even throws an error that it's not a valid property. If you want to be able to import from your root directory you would change the resolve config to:

resolve: {
  alias: {
    config: 'src/assets/js/config',
    js: 'src/assets/js'
  },
  modules: [
    path.resolve(__dirname),
    'node_modules'
  ]
}

Alternatively you can use an absolute path in your resolve.alias like so:

resolve: {
  alias: {
    config: path.resolve(__dirname, 'src/assets/js/config'),
    js: path.resolve(__dirname, 'src/assets/js')
  }
}

Upvotes: 3

Alfred Crosby
Alfred Crosby

Reputation: 136

Try this:

resolve: {
  root: [
    'node_modules',
    path.resolve('src') // Resolve on root first
  ], 
  alias: {
    config: 'src/assets/js/config', // this is a config folder
    js: 'src/assets/js'
  }
}

Upvotes: 1

Related Questions