npm – Field browser doesnt contain a valid alias configuration

npm – Field browser doesnt 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;

Im building a React server-side renderer and found this can also occur when building a separate server config from scratch. If youre 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)
    ]
}
};

npm – Field browser doesnt contain a valid alias configuration

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 didnt had such extension in webpack resolve extensions. Adding proper extension fixed problem:

module.exports = {
(...)
  resolve: {
    extensions: [.ts, .js],
  }
}