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

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?

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

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

Solution 4:^[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"],
}

Solution 5:^[5]

Add this to your package.json:

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

Solution 6:^[6]

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.

Solution 7:^[7]

Changed my entry to

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

and it worked.

Solution 8:^[8]

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.

Solution 9:^[9]

This also occurs when the webpack.config.js is simply missing (dockerignore ????)

Solution 10:^[10]

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.

Solution 11:^[11]

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.

Solution 12:^[12]

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:

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:

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

Solution 13:^[13]

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;

Solution 14:^[14]

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.

Solution 15:^[15]

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

Solution 16:^[16]

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.

Solution 17:^[17]

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.

Solution 18:^[18]

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

Solution 19:^[19]

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

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

Solution 20:^[20]

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.

Solution 21:^[21]

Had the same issue with angular was importing

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

changed it to

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

Solution 22:^[22]

For me the issue was, I was importing

.ts files into .js files

changing them to ts as well solved the issue.

Solution 23:^[23]

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.

Solution 24:^[24]

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'

Solution 25:^[25]

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

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

Solution 26:^[26]

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

Solution 27:^[27]

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.

Solution 28:^[28]

On Windows PowerShell, the following command raises this error:

npx webpack .\src\js\main.js --output-filename output.js

The correct command is:

npx webpack ./src/js/main.js --output-filename output.js

Notice that when using npx, even on Windows, we have to use the Linux path separator (/).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	messerbill
Solution 3	baltzar
Solution 4
Solution 5	Paul Roub
Solution 6	TNT
Solution 7	Abraham Jagadeesh
Solution 8	Good Night Nerd Pride
Solution 9	EvgenyKolyakov
Solution 10	olivier
Solution 11	codejockie
Solution 12	luiscla27
Solution 13	luiscla27
Solution 14	FAndrew
Solution 15	zemil
Solution 16	alex351
Solution 17	dxhans5
Solution 18
Solution 19	AmirHossein Rezaei
Solution 20
Solution 21	Avinash
Solution 22	Ankur Marwaha
Solution 23	Mostafa Armandi
Solution 24	William Nicholson
Solution 25	Abeer Sul
Solution 26	Volkan Paksoy
Solution 27	Sauce
Solution 28	Gaurang Tandon

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]

Solution 25:[25]

Solution 26:[26]

Solution 27:[27]

Solution 28:[28]