Webpack doesn't resolve properly my alias

webpack-dev-server
webpack-cli
webpack --mode
html-webpack-plugin
webpack config
webpack output
webpack-dev-server express
webpack plugins

I am trying to have a namespace for my app to work as a module, and import my components using this namespace and limit the use of relative path.

Although, even though I followed the webpack documentation for alias here: http://webpack.github.io/docs/configuration.html#resolve-alias I can't make it to work.

This is how my resolve object looks like:

resolve: {
  root: path.resolve(__dirname),
  alias: {
    myApp: './src',
  },
  extensions: ['', '.js', '.json', '.jsx']
}

path.resolve(__dirname) resolves /Users/Alex/Workspace/MyAppName/ui/

I import my file that way in the file /Users/Alex/Workspace/MyAppName/ui/src/components/Header/index.jsx:

import { myMethod } from 'myApp/utils/myUtils';

I get the following error during the build:

ERROR in ./src/components/Header/index.jsx
Module not found: Error: Cannot resolve module 'myApp/utils/myUtils' in /Users/Alex/Workspace/MyAppName/ui/src/components/Header
 @ ./src/components/Header/index.jsx 33:19-56

I also tried with modulesDirectories but it doesn't work either.

Do you have any idea what is wrong?

Resolving the alias to the absolute path should do the trick:

resolve: {
  alias: {
    myApp: path.resolve(__dirname, 'src'),
  },
  extensions: ['', '.js', '.jsx']
}

Check this webpack resolve alias gist with a simple example.

Another solution to limit the number of relative paths is to add your ./src folder as root instead of aliasing it:

resolve: {
  root: [path.resolve('./src')],
  extensions: ['', '.js', '.jsx']
}

Then you will be able to require all folders inside ./src as if they where modules. For example, assuming you have the following directory structure:

.
├── node_modules
├── src
│   ├── components
│   └── utils

you would be able to import from components and utils like this:

import Header from 'components/Header';
import { myMethod } from 'utils/myUtils';

Something like having an alias for each folder inside ./src.

Getting Started, webpack is used to compile JavaScript modules. As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup  webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

This might be obvious to many but if you, like me, have spent too much time trying to figure out why it suddenly does not work when moving from Windows or Mac to Linux then check casing in the paths...

Me and everyone else on the project are using Windows or Mac but at home I dual boot ubuntu which I enjoy using. On cloning our code and running webpack i got a whole lot of Cannot resolve module... errors. I spent more time than I'd like to admit searching for some obscure error in node, npm, webpack or anything until I noticed the paths of the failing modules were something like @app/Shared/settings.js and the require was require('@app/shared/settings'). Windows doesn't care so everything was fine all until I started working on linux. As it turned out problem was not with webpack, node or anything else so that's probably why I didn't find anyone suggesting that this could be the problem.

Hope this saves some time for someone. Or maybe I'm just dumb, I don't know.

Output Management, Webpack will generate the files and put them in the /dist folder for you, but it doesn't keep track of which files are actually in use by your project. In general it's​  Webpack is a build tool that puts all of your assets, including Javascript, images, fonts, and CSS, in a dependency graph. Webpack lets you use require () in your source code to point to local files, like images, and decide how they're processed in your final Javascript bundle, like replacing the path with a URL pointing to a CDN.

Most of the time it depends on your project folder structure. If your webpack file is inside a folder then make sure you handle it accordingly

.
├── node_modules
├── src
│   ├── components
│   └── config/webpack.config.js
modules.exports = {
 resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      Components: path.resolve(__dirname, '../src/components/'),
    }
  },
  ...
  resolve: {
    ...
  }
}

Also it often happens that we name our folder as "source" but use "src" in path.

Darn! that copy paste has taken alot of my debug time

Hope this helps someone who is facing such issues due to the above reasons.

Watch and WatchOptions, Turn on watch mode. This means that after the initial build, webpack will continue to watch for changes in any of the resolved files. webpack.config.js Webpack doesn’t work well with wasm modules created with Emscripten #7352. Open surma opened this issue May 20, 2018 · 5 comments Open

I use without next syntax :

resolve: {
        alias: {
            Data:  __dirname + '/src/data'
        },
        extensions: ['.js', '.jsx', '.json']

    }

import points from 'Data/points.json';

Module Resolution, Resolving rules in webpack. Using enhanced-resolve , webpack can resolve three kinds of file paths: Absolute paths. import  The webpack runtime only takes care of prefetch/preload for on-demand-loaded chunks. When prefetch/preload is used in import () s in a entry chunk the html generation is resposible for adding the

I got the same error. Finnaly I found the problem was that I wrote resolve twice. And the second resolve override the previous one. My code is like this:

modules.exports = {
 resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      Components: path.resolve(__dirname, 'src/components/'),
    }
  },
  ...
  resolve: {
    ...
  }
}

More help can be found in Webpack Doc

Tree Shaking, Now let's run our npm script, npm run build , and inspect the output bundle: This doesn't mean that terser is not doing its job well because it can't figure it out. I tried putting it in webpack.config.js in the project’s root directory, but that doesn’t seem to be correct… Copy link Quote reply bitterloa commented Dec 12, 2018

Webpack doesn't generate bundle.js, After making a fresh directory, copying in your code as is, I get the following: Error​: EACCES: permission denied, mkdir '/build' at Error (native). webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. Sponsor webpack and get apparel from the official shop !

Webpack doesn't seem to find module when absolute context path is , My folder structure looks like this: project app public entry.coffee build webpack.​config.js dist test My webpack.config.js looks like this:  webpack is not only in your node-modules/webpack/bin/ directory, it's also linked in node_modules/.bin. You have the npm bin command to get the folder where npm will install executables. You can use the scripts property of your package.json to use webpack from this directory which will be exported.

A mostly complete guide to webpack (2020), webpack doesn't know on its own how to transform JavaScript code. This task is outsourced to a third-party loader, specifically babel-loader,  Second, if you have configured Webpack to make use of Babel, you need to ensure Babel doesn’t try to convert import statements to require. This is very important – if all of your imports become requires, then Webpack can't eliminate all that dead code! The babel configuration section of our webpack.config.js looks something like this:

Comments
  • And you try to resolve the path directly in the alias like: myApp: path.resolve( __dirname, 'src' )
  • I tried, it doesn't work... same error.
  • what about alias: { myApp: 'src' } that's what I have in my setup.
  • and you for sure have src/utils/myUtils.js or src/utils/myUtils/index.js ?
  • I have tried src and doesn't work either. The file name is myUtils.js but it's supposed to resolve it as per the extensions property.
  • I've also tried this and I can't get it to work. It creates the build, but keep throwing this error. Looks like my issue is somewhere else...
  • In short: some OSes/filesystems are case-sensitive so this issue is not due to resolve.alias but rather how files are looked up on the filesystem.