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

Question

Executing This:

node .\node_modules\webpack\bin\webpack.js --config scripts/webpack.config.js --display-error-details

Produces this error.

I am just testing this at the moment, so application.ts just has this

export class Aureus {

    constructor() {
        alert('1');
    }

}

The webpack file looks as follows:

const globule = require("globule");
const path = require("path");
const webpack = require("webpack");
const extractTextPlugin = require("extract-text-webpack-plugin");

const config = {
};

const configuration = {
    context: __dirname,
    entry: {
        "application": 
            "application.ts",
            ...globule.find("aureus/**/*.ts", { srcBase: "./scripts" }),
        ,
        "vendor": [
            "bootstrap",
            "jquery",
            "angular",
            "moment",
            "lodash",
            "ramda",
        ],
    },
    output: {
        path: path.join(__dirname, "../"),
        filename: "packed.js"
    },
    devtool: "source-map",
    plugins: [
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.js"
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "window.jquery": "jquery",
        }),
    ],
    resolve:
    {
        alias: {
        }
    },
    module: {
        rules: [
            {
                test: /^((?!\.spec\.ts).)*.ts$/,
                use: [
                    {
                        loader: "awesome-typescript-loader"
                    }
                ],
                exclude: /(node_modules)/
            },
        ]
    }
};

module.exports = configuration;

I am getting this error? application.ts is in ./scripts/application.ts (same directory as webpack.config.js)

ERROR in Entry module not found: Error: Can't resolve 'application.ts' in 'C:\Projects\Github\Aureus\Aureus.Web\scripts'
resolve 'application.ts' in 'C:\Projects\Github\Aureus\Aureus.Web\scripts'
  Parsed request is a module
  using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./scripts)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./scripts)
    resolve as module
      C:\Projects\Github\Aureus\Aureus.Web\scripts\node_modules doesn't exist or is not a directory
      C:\Projects\Github\Aureus\node_modules doesn't exist or is not a directory
      C:\Projects\Github\node_modules doesn't exist or is not a directory
      C:\Projects\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Projects\Github\Aureus\Aureus.Web\node_modules
        using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./node_modules)
          using description file: C:\Projects\Github\Aureus\Aureus.Web\package.json (relative path: ./node_modules/application.ts)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts.json doesn't exist
            as directory
              C:\Projects\Github\Aureus\Aureus.Web\node_modules\application.ts doesn't exist

Answer 1

Unless you provide an actual resolve rule, your imports of anything in the node_modules will default to looking in the folder provided to the context.

Try this rather:

resolve: {    
  modules: [
    /* assuming that one up is where your node_modules sit,
       relative to the currently executing script
    */
    path.join(__dirname, '../node_modules')
  ]
}

Also, make sure that you are referencing your entry relative to the context like so:

"application": "./application.ts"

instead of

"application": "application.ts"

Answer 2

Maybe you need to check your package-lock.json, and assumed that your package version is correct

NPM will give this error when your packages version in incorrect.

Here are three tips:

1. Check Node version: node -v
2. Make sure that you already install when you enter the root directory: nom i
3. Check the version in package.json files. You may find some questions.

Like so:

"eslint": "^5.16.0",

Instead of:

"eslint": "^4.4.0",