场& # 39;浏览器# 39;不包含有效的别名配置

Webpack出现了一个问题，就是不能解决导入的问题——谈论可怕的错误消息:(

// I Had to change:
import DoISuportIt from 'components/DoISuportIt';


// to (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';

我也有同样的问题，但我的问题是因为路径上的套管错误:

// Wrong - uppercase C in /pathCoordinate/
./path/pathCoordinate/pathCoordinateForm.component


// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component

对于任何构建ionic应用程序并试图上传它的人。确保你至少添加了一个平台到应用程序。否则你会得到这个错误。

在我的例子中，它是在package.json中作为依赖项安装的包，其相对路径如下:

"dependencies": {
...
"phoenix_html": "file:../deps/phoenix_html"
},

并通过import "phoenix_html"导入到js/app.js中

这是有效的，但在更新node, npm等…它失败了，出现上述错误消息。

将导入行更改为import "../../deps/phoenix_html"可以解决这个问题。

我正在构建一个React服务器端渲染器，发现这也可能发生在从头构建一个单独的服务器配置时。如果您看到此错误，请尝试以下操作:

1. 确保你的entry值相对于你的context值是正确的路径。我的文件缺少了入口文件名之前的./。
2. 确保包含了resolve值。你对node_modules中的任何东西的导入将默认在你的context文件夹中查找，否则。

例子:

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

对于每个爱奥尼亚人: 更新到最新的@ionic/app-scripts版本给出了更好的错误消息

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

将我的条目更改为

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

这招奏效了。

在我的情况下，到webpack.config.js的最后，我应该exports配置，有一个拼写错误:export(应该是exports)，这导致加载webpack.config.js失败。

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;

在我的情况下，我在webpack.config.js文件的底部没有导出。简单的添加

export default Config;

解决它。

为了解决这个问题，我不得不将别名重命名为一些不同的东西，比如Redux。

在我的情况下，这是由于导入路径中的大小写敏感错别字。例如,

应该是:

import Dashboard from './Dashboard/dashboard';

而不是:

import Dashboard from './Dashboard/Dashboard';

我正在使用“@google-cloud/translate”:“^5.1.4”，并在这个问题上苦苦挣扎，直到我尝试了这个:

我打开google-gax\build\src\operationsClient.js文件并更改

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

来

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

这就解决了错误

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

我希望它能帮助到一些人

在我的例子中，这是由于在尝试npm链接一个自定义angular库到消费应用程序时出现了符号链接中断

"@authoring/canvas": "path/to/ui-authoring-canvas/dist"

看起来一切正常，但仍然找不到模块:

当我将import语句更正为编辑器可以找到的内容时:

import {CirclePackComponent} from '@authoring/canvas/lib/circle-pack/circle-pack.component';

我收到这个是在溢出线程中提到的:

.

为了解决这个问题，我必须:

1. cd /usr/local/lib/node_modules/packageName
2. cd ..
3. rm -rf packageName
4. 在库的根目录下，运行:

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

5. 在消费应用程序中，用以下语句更新package.json:

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

6. 在消费应用的根目录中运行npm link packageName

在我的情况下，我使用无效的templateUrl。通过纠正，问题解决了。

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

将这个添加到你的package.json:

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

我的情况相当尴尬:我为一个JS库添加了typescript绑定，却没有添加库本身。

所以如果你这样做:

npm install --save @types/lucene

别忘了:

npm install --save lucene

很明显，但我完全忘记了，这花了我不少时间。

我的情况与@witheng的回答类似。

在某个时候，我注意到在我的开发环境中的一些文件名中有一些大小写错误。例如，文件名为

type.ts

我把它改名为

Type.ts

在我的Mac开发环境中，这没有注册为git中的更改，所以这个更改没有进入源代码控制。

在基于linux的构建机器中，文件名是区分大小写的，它无法找到具有不同大小写的文件。

为了避免将来出现类似的问题，我在repo中运行了以下命令:

git config core.ignorecase false

我正在使用single-spa，遇到了这个错误问题

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

我最终在角上找到了答案。Json构建选项"main"设置为src\\main.single-spa.ts。将其更改为src/main.single-spa.ts修复了它。

只是为了记录，因为我有类似的问题，也许这个答案会帮助别人:在我的情况下，我正在使用库使用.js文件，我没有这样的扩展在webpack解析扩展。添加适当的扩展固定问题:

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

我在一个TypeScript项目中遇到了这个错误。在我的webpack.config.js文件中，我只解析TypeScript文件。

resolve: {
extensions: [".ts"],
}

然而，我注意到导致错误的node_module:

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

没有任何“;.ts"文件(这是可以理解的，因为模块已经转换为普通JS。哎!)。

因此，为了解决这个问题，我更新了resolve声明为:

resolve: {
extensions: [".ts", ".js"],
}

在我的情况下，我导入库文件如下:

import { MyFile } from "my-library/public-api";

在我从导入中删除了public-api之后，一切都正常工作:

import { MyFile } from "my-library";

MyFile在库中的public-api文件中导出。

angular was导入也有同样的问题吗

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

改成了

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

我在运行一个GitHub动作时得到这个错误。这个问题是因为我将包列为对等依赖项而不是依赖项。

由于我使用Rollup，解决方案是将包同时作为对等依赖项和开发依赖项安装，并使用rollup-plugin-peer-deps-external从最终构建中删除开发依赖项。

对我来说，问题是我在进口

.ts files into .js files

将它们改为ts也解决了这个问题。

当webpack.config.js完全缺失时也会发生这种情况(dockerignore🤦‍♂️)

我有tsconfig.json的别名:

{
"compilerOptions": {
"paths": {
"@store/*": ["./src/store/*"]
}
},
}

所以我通过在webpack中添加别名解决了这个问题。配置也:

module.exports = {
//...
resolve: {
alias: {
'@store': path.resolve(__dirname, '../src/store'),
},
},
};

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

将文件扩展名添加到模块导入中，为我修复了这个问题:

从这个:

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

:

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

在Windows PowerShell上，以下命令引发此错误:

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

正确的命令是:

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

注意，当使用npx时，即使在Windows上，我们也必须使用Linux路径分隔符(/)。

在我的例子中，webpack.config.js中的module.exports下缺少entry字段，导致了这个问题。

在我的情况下:)

$ rm -rf tsconfig.tsbuildinfo
$ npm run build

就我而言，

我错误地从package.json中删除了一个库(&;mini-create-react-context&;)我把它加了回来，并安装和构建了应用程序，它开始正常工作。所以请看看你的包裹。Json文件一次。

对于任何使用Webpack的模块联合会插件的人:
我在插件的“暴露”条目中的一个字段的值中有一个拼写错误。
检查你的拼写:

exposes: {
'./ShopApp': './src/bootstrap' // check this value
}

对我来说(哈哈)，

我正在通过NPM/Yarn链接导入一个本地包(我正在开发，并使用rollup构建)到我正在开发的另一个包中。导入的包是一个React组件的负载，并被配置为具有react和react-dom的peerDependency。

消费包是用Webpack构建的，显然没有正确地将已安装的react和react-dom库提供给我的本地依赖，因为它正在编译它。

我调整了我的webpack配置，以表明它应该将这些对等依赖项别名为消费包中的正确依赖项:

/* ... */


resolve: {
extensions: [/* make sure you have them all correct here, as per other answers */],
alias: {
react: path.resolve('./node_modules/react'),
'react-dom': path.resolve('./node_modules/react-dom')
}
},


/* ... */

显然，为了使用上面看到的方法，你需要在webpack.config.js文件中导入path。

更详细的解释可以在这篇文章中找到

我得到了同样的问题，并修正了添加文件扩展名。

// Old:


import RadioInput from './components/RadioInput'


// New:


import RadioInput from './components/RadioInput.vue'

此外，如果你仍然想使用没有扩展，你可以添加这个webpack配置:(谢谢@matthew-herbst提供的信息)

module.exports = {
//...
resolve: {
extensions: ['.js', '.json', '.wasm'], // Add your extensions here.
},
};

"script": {
"dev": "webpack serve"
}

但是你的webpack配置在配置目录中。所以你应该更改脚本:

"script": {
"dev": "webpack serve --config ./config/webpack.config.js"
}

我得到了同样的错误，我不想要绝对导入。我的正常相对导入不工作与相同的错误和“模块未找到”;

我在webpack配置中没有这个。

resolve: {
extensions: ['.tsx', '.ts', '.js'],
}