Field 'browser' doesn't contain a valid alias configuration

Question

I've started using webpack2 (to be precise, v2.3.2) and after re-creating my config I keep running into an issue I can't seem to solve I get (sorry in advance for ugly dump):

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
 Parsed request is a module
 using description file: [absolute path to my repo]/package.json (relative path: ./src)
 Field 'browser' doesn't contain a valid alias configuration
 aliased with mapping 'components': '[absolute path to my repo]/src/components' to '[absolute path to my repo]/src/components/DoISuportIt'
 using description file: [absolute path to my repo]/package.json (relative path: ./src)
 Field 'browser' doesn't contain a valid alias configuration
 after using description file: [absolute path to my repo]/package.json (relative path: ./src)
 using description file: [absolute path to my repo]/package.json (relative path: ./src/components/DoISuportIt)
 as directory
 [absolute path to my repo]/src/components/DoISuportIt doesn't exist
 no extension
 Field 'browser' doesn't contain a valid alias configuration
 [absolute path to my repo]/src/components/DoISuportIt doesn't exist
 .js
 Field 'browser' doesn't contain a valid alias configuration
 [absolute path to my repo]/src/components/DoISuportIt.js doesn't exist
 .jsx
 Field 'browser' doesn't contain a valid alias configuration
 [absolute path to my repo]/src/components/DoISuportIt.jsx doesn't exist
[[absolute path to my repo]/src/components/DoISuportIt]
[[absolute path to my repo]/src/components/DoISuportIt]
[[absolute path to my repo]/src/components/DoISuportIt.js]
[[absolute path to my repo]/src/components/DoISuportIt.jsx]

package.json

{
 "version": "1.0.0",
 "main": "./src/main.js",
 "scripts": {
 "build": "webpack --progress --display-error-details"
 },
 "devDependencies": {
 ...
 },
 "dependencies": {
 ...
 }
}

In terms of the browser field it's complaining about, the documentation I've been able to find on this is: package-browser-field-spec. There is also webpack documentation for it, but it seems to have it turned on by default: aliasFields: ["browser"]. I tried adding a browser field to my package.json but that didn't seem to do any good.

webpack.config.js

import path from 'path';
const source = path.resolve(__dirname, 'src');
export default {
 context: __dirname,
 entry: './src/main.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js',
 },
 resolve: {
 alias: {
 components: path.resolve(__dirname, 'src/components'),
 },
 extensions: ['.js', '.jsx'],
 },
 module: {
 rules: [
 {
 test: /\.(js|jsx)$/,
 include: source,
 use: {
 loader: 'babel-loader',
 query: {
 cacheDirectory: true,
 },
 },
 },
 {
 test: /\.css$/,
 include: source,
 use: [
 { loader: 'style-loader' },
 {
 loader: 'css-loader',
 query: {
 importLoader: 1,
 localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
 modules: true,
 },
 },
 ],
 },
 ],
 },
};

src/main.js

import DoISuportIt from 'components/DoISuportIt';

src/components/DoISuportIt/index.jsx

export default function() { ... }

For completeness, .babelrc

{
 "presets": [
 "latest",
 "react"
 ],
 "plugins": [
 "react-css-modules"
 ],
 "env": {
 "production": {
 "compact": true,
 "comments": false,
 "minified": true
 }
 },
 "sourceMaps": true
}

What am I doing wrong/missing?

• Aleksandr Hovhannisyan: I love all the "in my case" answers. Just goes to show how terrible of a tool Webpack still is. Imagine returning a single generic error for various "in my case" scenarios!
• raphisama: I still don't understand Webpack after years of using it
• Patrick Michaelsen: for me, I had put resolve in modules instead of the root config
• Shashank Bhatt: I have never seen a worst error than this. trying from last 2 hours still not able to figure out what can be cause!!

Answer 1

Turned out to be an issue with Webpack just not resolving an import - talk about horrible horrible error messages :(

// I Had to change:
import DoISuportIt from 'components/DoISuportIt';
// to (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';

• DEEPAN KUMAR: Is the issue caused by npm ? Today I upgraded a module using npm, by uninstalling and installing a latest version of module, Now I got this error and the error tells to change the relative location of module, but the list of files is bit high, what caused all these files to change its relative position?
• CoolGoose: This also saved my ass. It's somewhat counter intuitive that in the sass files you can import with 'folder' but in .js files you need to do it like './folder' . Also without --display-error-details there's NO error message what so ever, it just crashes
• Dmitry Senkovich: @Matthew Herbst one of the stupidest error messages:) my ass is saved, thx!
• mikep: Still in almost 2022 in webpack 5 the same terrible error messages. No progress from v4 to v5 in thi way?
• RashadRivera: Cleary there is no right answer. This means that webpack has done a terrible job with error handling and need to make improvements.

Answer 2

Just for record, because I had similiar problem, and maybe this answer will help someone: in my case I was using library which was using .js files and I didn't had such extension in webpack resolve extensions. Adding proper extension fixed problem:

module.exports = {
 // ...
 resolve: {
 extensions: ['.ts', '.js'],
 }
}

• user10613856: Silly me.. I forgot to add the resolver property. Thank you :)
• totymedli: This is also the error you get if you mess up your configuration file's entry points or the file referenced there doesn't exist.

Answer 3

I'm building a React server-side renderer and found this can also occur when building a separate server config from scratch. If you're seeing this error, try the following:

1. Make sure your entry value is properly pathed relative to your context value. Mine was missing the preceeding ./ before the entry file name.
2. Make sure you have your resolve value included. Your imports on anything in node_modules will default to looking in your context folder, otherwise.

Example:

const serverConfig = {
name: 'server',
context: path.join(__dirname, 'src'),
entry: {serverEntry: ['./server-entry.js']},
output: {
 path: path.join(__dirname, 'public'),
 filename: 'server.js',
 publicPath: 'public/',
 libraryTarget: 'commonjs2'
},
module: {
 rules: [/*...*/]
},
resolveLoader: {
 modules: [
 path.join(__dirname, 'node_modules')
 ]
},
resolve: {
 modules: [
 path.join(__dirname, 'node_modules')
 ]
}
};

Answer 4

I encountered this error in a TypeScript project. In my webpack.config.js file I was only resolving TypeScript files i.e.

resolve: {
 extensions: [".ts"],
}

However I noticed that the node_module which was causing the error:

Field 'browser' doesn't contain a valid alias configuration

did not have any ".ts" files (which is understandable as the module has been converted to vanilla JS. Doh!).

So to fix the issue I updated the resolve declaration to:

resolve: {
 extensions: [".ts", ".js"],
}

• rxgx: You can also use "..." at the end of extensions to include the defaults.

Answer 5

I had the same issue, but mine was because of wrong casing in path:

// Wrong - uppercase C in /pathCoordinate/
./path/pathCoordinate/pathCoordinateForm.component
// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component

Answer 6

Add this to your package.json:

"browser": {
 "[module-name]": false 
},

• kimo_ouz: i coder should read the documentation first, i always search in stackoverflow but nowadays i prefer to read documentation first. thanks for editing...
• Alberto Bricio: I have solved the problem with the main.js, neverthless I have the next error: Error during loading: Uncaught TypeError: fs.existsSync is not a function in localhost:9876/_karma_webpack_/vendor.js line 110252 Do you have any idea about this?
• Marco Faustinelli: @kimo_ouz - Absolutely brilliant! Thank you for introducing me to the "browser" field world. Here are some links for other interested people: insides of the webpack-package.json relationship and NPM official notes

Answer 7

This also occurs when the webpack.config.js is simply missing (dockerignore 🤦‍♂️)

• Nwawel A Iroume: when running npm run build i had to modify the build script in package.json to reference the correct webpack configuration file "build": "webpack --mode production --config webpack/webpack.config.prod.js";
• Phoenix: I also saw this when someone accidentally had webpackconfig.js instead of webpack.config.js.

Answer 8

In my case it was a package that was installed as a dependency in package.json with a relative path like this:

"dependencies": {
 // ...
 "phoenix_html": "file:../deps/phoenix_html"
},

and imported in js/app.js with import "phoenix_html"

This had worked but after an update of node, npm, etc... it failed with the above error-message.

Changing the import line to import "../../deps/phoenix_html" fixed it.

• vintprox: Oh no, why Webpack is so unintuitive at this, your thoughts? I also have local dependency.

Answer 9

I changed my entry to:

entry: path.resolve(__dirname, './src/js/index.js'),

and it worked.

• Alejandro B.: changed it from what?

Answer 10

I had aliases into tsconfig.json:

{
 "compilerOptions": {
 "paths": {
 "@store/*": ["./src/store/*"]
 }
 },
}

So I solved this issue by adding aliases to webpack.config also:

module.exports = {
 //...
 resolve: {
 alias: {
 '@store': path.resolve(__dirname, '../src/store'),
 },
 },
};

Answer 11

I was getting the same error and I didn't want absolute imports. My normal relative import was not working with the same error and "module not found".

I was missing this in my webpack config.

resolve: {
 extensions: ['.tsx', '.ts', '.js'],
}

Answer 12

My case was rather embarrassing: I added a typescript binding for a JS library without adding the library itself.

So if you do:

npm install --save @types/lucene

Don't forget to do:

npm install --save lucene

Kinda obvious, but I just totally forgot and that cost me quite some time.

Answer 13

I got same problem and fixed with adding file extension.

// Old:
import RadioInput from './components/RadioInput'
// New:
import RadioInput from './components/RadioInput.vue'

Also, if you still want to use without extensions, you can add this webpack config: (Thanx for @matthew-herbst for the info)

module.exports = {
 //...
 resolve: {
 extensions: ['.js', '.json', '.wasm'], // Add your extensions here.
 },
};

• Matthew Herbst: You should be able to not need the extension if you pass the custom resolve.extensions: webpack.js.org/configuration/resolve/#resolveextensions

Answer 14

In my case, it was due to a broken symlink when trying to npm link a custom angular library to consuming app. After running npm link @authoring/canvas

"@authoring/canvas": "path/to/ui-authoring-canvas/dist"

It appear everything was OK but the module still couldn't be found:

Error from npm link

When I corrected the import statement to something that the editor could find Link:

import {CirclePackComponent} from '@authoring/canvas/lib/circle-pack/circle-pack.component';

I received this which is mention in the overflow thread:

Field Browser doesn't contain a valid alias configuration

To fix this I had to:

1. cd /usr/local/lib/node_modules/packageName
2. cd ..
3. rm -rf packageName
4. In the root directory of the library, run:

a) rm -rf dist
b) npm run build
c) cd dist 
d) npm link

5. In the consuming app, update the package.json with:

"packageName": "file:/path/to/local/node_module/packageName""

6. In the root directory of the consuming app run npm link packageName

Answer 15

In my case, to the very end of the webpack.config.js, where I should exports the config, there was a typo: export(should be exports), which led to failure with loading webpack.config.js at all.

const path = require('path');
const config = {
 mode: 'development',
 entry: "./lib/components/Index.js",
 output: {
 path: path.resolve(__dirname, 'public'),
 filename: 'bundle.js'
 },
 module: {
 rules: [
 {
 test: /\.js$/,
 loader: 'babel-loader',
 exclude: path.resolve(__dirname, "node_modules")
 }
 ]
 }
}
// pay attention to "export!s!" here
module.exports = config;

Answer 16

For anyone building an ionic app and trying to upload it. Make sure you added at least one platform to the app. Otherwise you will get this error.

Answer 17

In my experience, this error was as a result of improper naming of aliases in Webpack. In that I had an alias named redux and webpack tried looking for the redux that comes with the redux package in my alias path.

To fix this, I had to rename the alias to something different like Redux.

Answer 18

In my case (lolz),

I was importing a local package (that I was developing, and building with rollup) via NPM/Yarn link, into another package I was developing. The imported package was a load of React components, and was configured to have a peerDependency of react and react-dom.

The consuming package was being built with Webpack and obviously wasn't correctly feeding the installed react and react-dom libraries into my local dependency as it was compiling it.

I adjusted my webpack configuration to indicate it should alias those peer dependencies to the correct dependencies in the consuming package:

/* ... */
resolve: {
 extensions: [/* make sure you have them all correct here, as per other answers */],
 alias: {
 react: path.resolve('./node_modules/react'),
 'react-dom': path.resolve('./node_modules/react-dom')
 }
},
/* ... */

Obviously you need to import path in the webpack.config.js file in order to use the methods seen above.

A more detailed explanation can be found in this article

Answer 19

In my case I had accidentally imported this package while trying to use process.env:

import * as process from 'process';

Removing it fixed the problem.

Answer 20

A possible reason, would be, if you have nullified a certain dependency in webpack.config.js:

resolve: {
 fallback: {
 fs: false,
 path: false,
 },
},

You also need to add to package.json:

"browser": {
 "fs": false,
 "path": false,
}, 

Answer 21

I solved that issue by adding an extensionAlias property in webpack.config.js:

resolve: {
 extensions: [".ts", ".tsx", ".js"],
 extensionAlias: {
 ".js": [".js", ".ts"],
 ".cjs": [".cjs", ".cts"],
 ".mjs": [".mjs", ".mts"]
 }
},

Answer 22

In my case I was using invalid templateUrl.By correcting it problem solved.

@Component({
 selector: 'app-edit-feather-object',
 templateUrl: ''
 })

Answer 23

My case was similar to @witheng's answer.

At some point, I noticed some casing error in some file names in my development environment. For example the file name was

type.ts

and I renamed it to

Type.ts

In my Mac dev environment this didn't register as a change in git so this change didn't go to source control.

In the Linux-based build machine where the filenames are case-sensitive it wasn't able to find the file with different casing.

To avoid issues like this in the future, I ran this command in the repo:

git config core.ignorecase false

• Robert Benedetto: Volkan, how can I get in touch with you? You website has no email on it. Want to ask a question about one of your blog posts, namely volkanpaksoy.com/archive/2018/12/19/…
• Volkan Paksoy: @RobertBenedetto Probably easiest and most efficient way would be asking it here (or another StackExchange site if it's more relevant to your question) and post the link here. Then not only I can take a look but you'd probably get faster and better help from the entire community.
• Robert Benedetto: True. I'll do that. However, was just going to ask you to update it since the procedure for step 5 seems to have changed, and ask if there is any way to do step 6 using the AWS management site? I'm pretty entry level with AWS, and those two steps are very confusing.
• Robert Benedetto: Asked it here: stackoverflow.com/questions/67104686/…
• Volkan Paksoy: It's been a while since I published that post and I don't really using EC2 instances at the moment. I wasn't aware of the changes. Hope somebody will be able to weigh in with the latest information. Have you also checked out the links in the resources section? If the resources in that post updated maybe you can get the latest info from them as well.

Answer 24

In my case, I imported library files like:

import { MyFile } from "my-library/public-api";

After I removed the public-api from the import everything worked fine:

import { MyFile } from "my-library";

MyFile is exported in the public-api file in the library.

Answer 25

I was getting this error when running a GitHub action. The issue was because I'd listed the package as a peer dependency instead of a dependency.

Since I'm using Rollup, the solution was to install the package both as a peer dependency and a dev dependency, and use rollup-plugin-peer-deps-external to remove the dev dependency from the final build.

Answer 26

For me the issue was, I was importing

.ts files into .js files

changing them to ts as well solved the issue.

Answer 27

In my case, I had a mixture of enum and interface in the index.d.ts file.
I extracted enums into another file and the issue resolved.

Answer 28

In my case, entry field was missing under module.exports in webpack.config.js, causing this issue.

• Mithun Shreevatsa: can some on answer this question if they have come across?

Answer 29

In my case,

I have mistakenly removed a library ("mini-create-react-context") from package.json. I added that back, and did yarn install and build the app and it start working properly. So please take a look at your package.json file once.

Answer 30

For anyone using Webpack's Module Federation plugin:
I had a typo in the value of one of the fileds in the 'exposes' entry of the plugin.
Check your spelling:

exposes: {
 './ShopApp': './src/bootstrap' // check this value
 }