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

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';

---

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'],
  }
}

---

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:

Make sure your entry value is properly pathed relative to your context value. Mine was missing the preceeding ./ before the entry file name. 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')
    ]
}
};

---

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

---

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"],
}

---

Add this to your package.json:

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

---

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.

---

Changed my entry to

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

and it worked.

---

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.

---

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

---

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.

---

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.

---

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:

https://i.stack.imgur.com/8f9YU.png

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:

https://i.stack.imgur.com/wWIYx.png

To fix this I had to:

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

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

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

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

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

---

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;

---

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.

---

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'),
    },
  },
};

---

For everyone with Ionic: Updating to the latest @ionic/app-scripts version gave a better error message.

npm install @ionic/app-scripts@latest --save-dev

It was a wrong path for styleUrls in a component to a non-existing file. Strangely it gave no error in development.

---

In my situation, I did not have an export at the bottom of my webpack.config.js file. Simply adding

export default Config;

solved it.

---

In my case, it is due to a case-sensitivity typo in import path. For example,

Should be:

import Dashboard from './Dashboard/dashboard';

Instead of:

import Dashboard from './Dashboard/Dashboard';

---

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

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

---

I am using single-spa, and encountered this issue with the error

Module not found: Error: Can't resolve '/builds/**/**/src\main.single-spa.ts' in /builds/**/**'

I eventually figured out that in angular.json build options "main" was set to src\\main.single-spa.ts. Changing it to src/main.single-spa.ts fixed it.

https://i.stack.imgur.com/zLKtt.png

---

Had the same issue with angular was importing

import { Injectable } from "@angular/core/core";

changed it to

import { Injectable } from "@angular/core";

---

For me the issue was, I was importing

.ts files into .js files

changing them to ts as well solved the issue.

---

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.

---

In my case, I was getting this error: (I am using webpack 5 with React v18 and React Router v6)

ERROR in ./src/components/App/App.jsx 5:0-42
Module not found: Error: Can't resolve '../../Pages/Profile' in 'C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\components\App'  
resolve '../../Pages/Profile' in 'C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\components\App'
  using description file: C:\Users\nicho\Desktop\projects\webpack-starter-with-react\package.json (relative path: ./src/components/App)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\nicho\Desktop\projects\webpack-starter-with-react\package.json (relative path: ./src/Pages/Profile)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\Pages\Profile doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\Pages\Profile.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\Pages\Profile.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\Pages\Profile.wasm doesn't exist
      as directory
        C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\Pages\Profile doesn't exist
 @ ./src/index.js 3:0-43 5:46-49

webpack 5.72.1 compiled with 3 errors in 1872 ms

Adding the file extension to the module import fixed this for me:

from this:

import Home from '../../Pages/Home'

to this:

import Home from '../../Pages/Home.jsx'

---

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

---

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.

---

I'm using "@google-cloud/translate": "^5.1.4" and was truggling with this issue, until I tried this:

I opened google-gax\build\src\operationsClient.js file and changed

const configData = require('./operations_client_config');

to

const configData = require('./operations_client_config.json');

which solved the error

ERROR in ./node_modules/google-gax/build/src/operationsClient.js Module not found: Error: Can't resolve './operations_client_config' in 'C:\..\Projects\qaymni\node_modules\google-gax\build\src' resolve './operations_client_config' ......

I hope it helps someone

---

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

---

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.

---