NPM：字段“browser”不包含有效的别名配置。

Question

执行这个操作：

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

产生此错误。

目前我只是在测试，因此 application.ts 只有这个内容

export class Aureus {

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

}

webpack文件如下所示：

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;

我遇到了这个错误？ application.ts 位于 ./scripts/application.ts （与 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

- Jim

---

你解决了这个问题吗？我也遇到了同样的问题，但是我仍然想在导入路径中使用 @ 符号。@Jim https://dev59.com/V28NtIcB2Jgan1znlJD_ - Dolphin

Answer 1

除非您提供了实际的resolve规则，否则导入node_modules中的任何内容都将默认查找提供给context的文件夹。

请尝试以下方法：

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

同时，请确保您将entry相对于context进行引用，如下所示：

"application": "./application.ts"

而不是

"application": "application.ts"

- Siya Mzam

---

这有一定帮助，但现在我发现包含的globule文件都在node_modules文件夹中搜索。 - Jim

字段“browser”不包含有效的别名配置 D：\ Development \ Projects \ AureusEx \ Aureus.Web \ node_modules \ aureus \ services \ UrlParserService.ts不存在 - Jim

这里的路径让我花了很多时间才解决……谢谢你的建议。 - Jim

嘿，抱歉回复晚了。你解决问题了吗？如果是这样，怎么解决的呢？你可以编辑我的答案：）。不客气。 - Siya Mzam

你的回答非常准确，帮了我很多 - 谢谢！我的项目有多个入口点和依赖项，这使得路径变得棘手。我正在从旧版js转换到weppack / es6导入。 - Jim

我能想象。祝你完成任务顺利。 - Siya Mzam

Answer 2

也许您需要检查您的 package-lock.json 文件，并假设您的包版本是正确的。

当您的软件包版本不正确时，NPM 将会给出此错误。

以下是三个提示：

1. 检查 Node 版本：node -v
2. 确保您在进入根目录时已经安装了依赖项：nom i
3. 检查 package.json 文件中的版本。您可能会发现一些问题。

就像这样：

"eslint": "^5.16.0",

改为：

"eslint": "^4.4.0",

- wenxuan feng

---

应该是 npm 而不是 nom 吗？ - Paul Bastide

是的，它是npm，而不是nom。 - wenxuan feng

太好了！我用 npm i vue-eslint-parser --save-dev 解决了这个问题，然后在 .eslintrc 文件中更新了 parserOptions，将 'parser': '@babel/eslint-parser', 替换为 'ecmaVersion' : 'latest', 'sourceType' : 'module'。 - funder7