Make absolute paths relative to the project root in Webpack

by

The resolve.root option does not modifiy how file modules are resolved.

A required module prefixed with “https://stackoverflow.com/” is an absolute path to the file. For example, require(‘/home/marco/foo.js’) will load the file at /home/marco/foo.js.

The / resolves to the root of your file system.

Maybe what you want is to resolve your js folder as a modules directory.

webpack.config.js

resolve: {
  root: path.resolve('./js')
}

With this configuration added to your config file will tell webpack to resolve any import or require relative to your js folder. Then, instead of using

import foo from '../actions/fooAction'

you will be able to:

import foo from 'actions/fooAction`

Mind the lack of / at the beginning.

Leave a Comment