找不到模块:无法解析'../components‘
找不到模块:无法解析'../components'是一个常见的错误信息，通常出现在前端开发中。它表示无法找到指定路径下的模块或组件文件。
该错误可能有以下几种可能的原因和解决方法：
- 路径错误：首先，需要确认路径是否正确。检查引用的模块或组件所在的文件路径是否正确，包括文件名的大小写。
- 缺少或错误的导入语句：检查代码中导入模块或组件的语句是否正确。确保使用的是正确的导入语法，并且模块或组件确实存在。
- 缺少依赖包：如果在项目中使用了第三方库或框架，并且没有正确安装或配置相关的依赖包，也会导致找不到模块的错误。可以通过检查项目的依赖列表或运行
npm install等命令来安装缺少的依赖。 - 编译或构建问题：如果项目使用了构建工具（例如Webpack、Rollup等），错误可能是由于构建配置问题导致的。可以检查构建工具的配置文件，确认是否正确地包含了需要的模块或组件。
针对以上可能的原因和解决方法，推荐使用腾讯云的云开发产品进行前端开发和部署。腾讯云的云开发提供了全面的云原生能力，支持前端开发、后端开发和云端一体化部署，无需搭建复杂的服务器环境。同时，腾讯云提供了全球覆盖的 CDN 加速和安全防护，保障网站的稳定性和安全性。
更多关于腾讯云的云开发产品和服务，可以查看腾讯云开发者文档：腾讯云开发
相关·内容
也许是个愚蠢的问题但是..。我正在与Webpack一起构建应用程序( Ubuntu)，我试图从另一个应用程序中获得一个JS文件。我的应用程序如下所示：
myapp/
src/
vendor/
facebook.js
components/
layout/
header/
FacebookButtonComponent.js
我的Webpack的结构有以下几点：
const path = require('path');
const srcPath = path.join(__dirname,
浏览 3提问于2016-03-25得票数 0
在我的ember应用程序中，我在两个目录中都有时间，但我的余烬服务器只在我的borcfile中使用bower路径：
app.import("bower_components/moment/min/moment.min.js");
app.import("node_modules/moment/min/moment.min.js");
后者说它找不到它。
浏览 1提问于2015-02-25得票数 0
回答已采纳
node_modules中的本地自定义模块无法访问它的父程序包的react包。
我有以下代码：
// SomeComponent.js
import React, { Component } from 'react'
import {
View
} from 'react-native'
import CustomComponent from 'react-native-my-super-components'
export default SomeComponent extends Component {
render() {
浏览 1提问于2016-10-20得票数 1
回答已采纳
我正在使用Reacti原住民构建一个应用程序，我得到了这个错误。
我试图再次清除缓存和安装软件包，但仍然存在问题。
这是来自终端的错误消息。
/Users/andy/Downloads/testapp/node_modules/react-native/packager/src/components : UnhandledPromiseRejectionWarning:未处理的承诺拒绝(拒绝id: 2)：UnableToResolveError:无法从/Users/andy/Downloads/testapp/index.ios.js解析模块./node_modules/react-nati
浏览 6提问于2017-05-02得票数 0
回答已采纳
我试图在Aurelia中使用aurelia-moduleId配置路由，但它抛出了一个错误，它找不到我的路由的路由(到文件的路由)。
我在两个文件router.js和app.js中配置了我的路由，路由器文件只包含一个包含所有路由的数组。app文件是我的项目的主文件。
项目结构：
Router.js：
export default [
{ route: ['', '/', 'home'], name: 'home', title: 'Inicio', layoutView: 'components
浏览 2提问于2017-09-07得票数 7
import 'swiper/components/mousewheel/mousewheel.min.css';
找不到模块:无法解析'swiper/components/mousewheel/mousewheel.min.css‘
我需要在我的“反应”应用程序中使用滑轮，但我不知道如何安装它
浏览 3提问于2022-06-17得票数 0
1回答
运行我的webpack开发服务器时，Typescript出现此错误 ERROR in ./src/components/allowcated-resources/AllowcatedResources.tsx
Module not found: Error: Can't resolve 'my-scheduler' in 'mypath\allowcated-resources'
@ ./src/components/allowcated-resources/AllowcatedResources.tsx 3:0-41 77:20-28
@ ./s
浏览 26提问于2019-07-01得票数 0
1回答
我的项目结构如下： packages/
client/
package.json
server/
package.json
shared/
package.json
lerna.json
package.json client的package.json文件包含以下依赖关系： {
"name": "@my-project/client",
"dependencies": {
// ...
"@my-project/sha
浏览 37提问于2021-11-03得票数 0
当运行虚拟dom时，是否一直收到此错误？ 编译失败。 找不到./node_modules/styled-components/dist/styled-components.browser.esm.js模块:无法解析'/Users/benjohnson/Desktop/ListProject/my-app‘中的'/Users/benjohnson/Desktop/ListProject/my-app/node_modules/react-scripts/node_modules/babel-loader/lib/index.js’
浏览 68提问于2021-03-20得票数 0
在@vue/cli 4和vuejs 2.6.10应用程序中，试图通过命令使用组件：
Vue.component('listing-header', require('../../../src/components/ListingHeader.vue'))
我收到控制台错误：
[Vue warn]: Failed to mount component: template or render function not defined.
在网上搜索后，我发现它可以通过以下方式修复：
Vue.component('listing-header', req
浏览 3提问于2019-12-02得票数 0
回答已采纳
1回答
我正在跟踪这个教学视频，，在51:00周围，是我所在的部分，我在这个源文件中遇到了一个问题：
行使这一职能：
getAccountSummaries() {
return this.http.get('api/Bank/GetAccountSummaries')
.map(response => response.json() as AccountSummary[])
.toPromise();
}
我在.json()上的Visual中得到红色文本，上面写着
符号'json‘无法正确解析，可能是因为它位于不可访问的模块中。
当我试图运
浏览 5提问于2017-05-24得票数 3
回答已采纳
1回答
我有两个javascript库，我需要它们集成到我的React应用程序中。首先我尝试了这个：
import d3 from "https://d3js.org/d3.v4.min.js"
import techan from "http://techanjs.org/techan.min.js"
所产生的错误：
找不到./src/components/CandlestickChart/CandlestickChart.jsx模块:无法解析'C:\Users\Greg\Projects\react-demos\my-react-splitter-layou
浏览 1提问于2021-03-19得票数 1
回答已采纳
3回答
我试图使用react本地的相对路径导入模块，我的项目结构如下所示：
-Project
--Components
--- adapter.js
--src
---screen
----Main.js
--App.js
我想在我的Main.js中使用adapter.js，所以在我使用的Main.js中：import adapter from '/../Components/adapter'
这将引发以下错误：
找不到模块:无法解析中的“/../组件/适配器”
浏览 11提问于2020-07-15得票数 2
回答已采纳
3回答
给定此文件夹结构：
├──components/
| └─Elements/
| └─Button/
| └─Input/
| └─index.ts
| └─Home/
| └─home.tsx
我希望导出Button和Input，这样我就可以通过以下操作从主组件访问它们：
home.tsx
import { Button, Input } from '@elements/'
我试过这样做：
index.ts (元素文件夹中)
export { Button } from './Button/button';
export { Inp
浏览 5提问于2021-01-24得票数 5
回答已采纳
在为我的应用程序创建别名时，我遇到了一个奇怪的问题。我正在尝试创建别名，添加jsconfig.json，如下所示
{
"compilerOptions": {
"lib": [
"dom",
"es2015",
"es2016",
"es6",
"es2017"
],
"target":
浏览 14提问于2019-10-04得票数 1
回答已采纳
2回答
这是一个简单的程序。我正在尝试使用材料UI搜索图标。我已经安装了material UI核心和material UI图标。我还是不能使用它们。有人能给我解释一下为什么。
import React from 'react';
import "../style components/Header.css";
import SearchIcon from '@mui/icons-material/Search';
function Header() {
return (
<div className="Header
浏览 1提问于2021-09-30得票数 0
我正试图将PrimeNG加载到Webpack捆绑的Angular2应用程序中。
首先，我安装了npm：
npm install primeng --save
npm install primeui --save
这在我的package.json中增加了以下两行：
+ "primeng": "^1.0.0-beta.8",
+ "primeui": "^4.1.12",
接下来，如angular2-webpack入门版中的所示，我向venders.ts添加了一个导入。
import 'script!primeui
浏览 7提问于2016-06-13得票数 3
回答已采纳
您好，我实际上需要将导出的文件从一个应用程序(Commons)导入到一些jest文件中的其他应用程序(登录)，但jest无法检测到它。
Jest测试文件：
import { auth as ServiceAuth } from "@dfs/standard"
import { ContextAlert } from '@dfs/standard';
describe("login page", () => {
it("test case 1", () => {
const ContextAle
浏览 5提问于2021-02-16得票数 0
2回答
import { A, B, C } from 'somecomponent/components' import { A } from "somecomponent/components/A";
import { B } from "somecomponent/components/B";
import { C } from "somecomponent/components/C"; 上面和下面的import语句都只导入A、B、C吗？这些陈述之间有什么不同吗？是否倾向于使用它们中的任何一个？
浏览 28提问于2021-05-07得票数 2
1回答
这是我的karma.conf.js文件
module.exports = function(config) {
var configuration = {
basePath : '',
autoWatch : false,
frameworks: ['jasmine'],
files: [
'bower_components/angular/angular.min.js',
'bower_components/angular-mocks/angular-mocks.js',
&
浏览 5提问于2015-05-29得票数 0
回答已采纳
在JavaScript项目中，可以导入名为index.js的文件：
import SomeComponent from 'components/some-component'
而不必指定index.js。
在我的项目中，我更喜欢使用不同的命名约定：some-component.component.js。通过这种方式，我可以从一瞥中看出文件是什么(而不是有一百万index.js)。
我想要实现的是，对于带有模式*.component.js的文件，也会出现同样的导入模式。换言之：
import SomeComponent from 'components/some-comp
浏览 4提问于2021-11-19得票数 2
回答已采纳
2回答
我想在ubuntu上运行webpack来运行我的。当从命令行运行webpack时，我得到以下错误(只提取我得到的所有错误)：
无法找到模块'loader-utils‘@ ./src/components/WaitingMsg.styl 4:14-129 13:2-17:4 14:20-135中的错误
无法找到模块'loader-utils‘@ ./src/components/CreateBox.styl 4:14-128 13:2-17:4 14:20-134中的错误
无法找到模块'loader-utils‘@ ./src/components/Trashbin.s
浏览 2提问于2016-02-16得票数 0
回答已采纳
我发现我需要在../文件中大量输入require()。我的目录结构包括以下内容：
js/
components/
...
actions/
...
在components文件夹中，我需要执行import foo from '../actions/fooAction'。是否有可能使根目录成为项目的根目录？我想改做import foo from '/actions/fooAction'。我试着设置Webpack的resolve.root选项，但它似乎什么也没做。
浏览 15提问于2016-02-08得票数 29
回答已采纳
1回答
如何指定导入JavaScript模块时应搜索哪些目录闭包编译器：
import foo from 'components/A'
import foo from 'third_party/B'
require('library/C')
浏览 1提问于2016-05-03得票数 2
回答已采纳
我想在我的游戏项目中使用带有TypeScript的角2。我正在使用和angular2 WebJAR。当Play提取WebJAR时，它将其放入target/web/public/main/lib/angular2中。我应该能够在我的app/assets/js/components/test.ts文件中做的事情是
import {Component} from 'angular2/core';
但是tsc无法解决这个问题，而且我没有看到任何设置来告诉它应该在哪里查找。
这现在也有可能吗？如果有一个子项目来处理TypeScript，会让事情变得更容易吗？
浏览 10提问于2016-01-20得票数 5
回答已采纳
1回答
我正在尝试在一个新项目中设置流程，但是我的webpack解析路径使它变得混乱。我正在自动解析根文件夹，以便您可以使用components/Foo而不是../../../Components/Foo。
有什么办法可以解决这个问题吗？我试着玩module.name_mapper= '^components/[a-zA-Z0-9$_]+$' -> 'src/components'，但它不起作用。
src/pages/Login.js:5
5: import View from 'components/View';
浏览 0提问于2015-10-18得票数 5
我目前正在构建一组UI模块，开发人员可以使用这些模块在他们的站点上创建内容(类似于Bootstrap、Foundation等)。每个UI模块都是作为自己的npm包创建的，然后开发人员将通过npm将所需的模块拉到他们的项目中。
我有一个组件-手风琴包，其中只包含一个手风琴CSS。它具有如下的文件结构：
/lib
/build
/node_modules
index.css
package.json
上面显示的index.css文件包含一个指向lib目录的相对链接，其中包含组件的实际样式：
./lib/accordion.css
我一直在测试这个包与一个反应手风琴项目，并已导入它的风格。然而，We
浏览 0提问于2018-02-07得票数 1
我在app/components/中定义了一些反应组件。我在webpack里设置了这样的化名：
//webpack.conf.js
module.exports = {
entry: './app/app.jsx',
output: {
path: __dirname,
filename: './public/bundle.js'
},
resolve: {
root: __dirname,
alias: {
Main: 'app/co
浏览 2提问于2016-07-15得票数 1
回答已采纳
2回答
我在试图和webpack合作的时候遇到了错误。webpack似乎不能解决反应、反应和反应-路由器。我包括配置文件、错误和package.json。我不知道我哪里出了问题。
下面是我的webpack.config.js配置：
var webpack = require('webpack');
var path = require('path');
function _path(p) {
return path.join(__dirname, p);
}
module.exports = {
entry: [
'./app/app.jsx
浏览 6提问于2017-04-03得票数 2
回答已采纳
1回答
我的vue项目中有一些组件。我不喜欢import loader from '@/components/someComponent1/someComponent1.vue';，因为它需要编写很多，而且我必须对每个组件重复它。因此，我为components文件夹编写了一个components：
export { default as someComponent1 } from './someComponent1/someComponent1.vue';
export { default as someComponent2 } from './someComp
浏览 0提问于2017-10-26得票数 9
回答已采纳
创建新文件夹。
运行"yo @microsoft/sharepoint"，(将其作为JS框架来响应)
创建项目(HelloWorld web部件工作正常)。
运行"npm安装-保存youtube- api -搜索“api安装良好。
现在api引用添加到HelloWorld.tsx文件中，如下所示；
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import styles from './HelloWor
浏览 3提问于2017-01-18得票数 0
回答已采纳
我使用的是requirejs，我想从我的依赖项中导入一个文件。
这是我的文件夹结构
钢筋混凝土
my_app
require_config
node_modules
other_repo
应用程序
组件
camera_component
camera_view
- require\_config
比方说，在my_app中，我加载了相机组件。
node_modules/other_repo/components/camera_component.js：
define(function(
浏览 3提问于2014-03-25得票数 0
回答已采纳
我的index.php如下所示：
<script src="app/bower_components/jquery/dist/jquery.min.js"></script>
<script src="app/bower_components/angular/angular.min.js"></script>
<script src="app/bower_components/angular-ui-router/release/angular-ui-router.min.js"><
浏览 0提问于2017-12-23得票数 0
3回答
我正在写一段注释。我试着用部分。在我的addon/templates/components/form.hbs里，我得到了{{partial "pane"}}。我的_pane.hbs是在文件夹中，但是找不到它：
未明错误:断言失败:无法找到带有名称“窗格”的部分。
我还试着把addon/templates/components中的_pane.hbs放进去，但没有运气。我应该把它放在哪里才能被恩伯捡起来？
浏览 3提问于2015-04-02得票数 5
回答已采纳
所以我正在使用Jest (带有酶)来测试一个Typescript-React项目，但是我遇到了一个别名模块的问题。
我知道问题本身并不在于找到模块，因为它能正确地找到模块。我想问题可能出在我的一个文件的结构上。
jest.config.js
module.exports = {
"collectCoverage": false,
"collectCoverageFrom": [
"!**/*.d.ts",
"src/**/*.{js,jsx,ts,tsx}"
],
"coverageDire
浏览 0提问于2018-03-08得票数 4
在我的React应用程序中，它是使用构建的，我得到的是错误：
找不到模块:无法解析'/usr/src/app/src/components/analytics_components'.中的“react图标/io”
这个应用程序运行良好已经有一段时间了，但我刚刚用重新构建了它，现在它不是了。
它似乎找错了目录，src而不是node_modules。
反应图标是绝对安装，npm列表反应图标返回它的版本号。
我可以在node_node/ see图标中看到io文件夹
进口说明：
import { IoMdList } from "react-icons/io";
浏览 1提问于2019-04-08得票数 2
2回答
给定以下利用的文件夹结构
dist
components
Button.js
index.js
src
components
Button.js
index.js
website
pages
components
button.js
package.json
...
package.json
src/components/Button.js
export const VARIANTS = ["primary", "secondary"];
function Button({ variant = &
浏览 0提问于2019-09-09得票数 1
回答已采纳
我想让webpack在几个路径上搜索文件。例如，如果我这样做了
import img from './img/smth.png'
在/src/components/name/index.js文件中，webpack不仅尝试在/src/components/name/img/中搜索此文件，还尝试在/src/common/img /中搜索此文件
有可能吗？
浏览 0提问于2019-02-14得票数 1
我正在开发一个web应用程序，使用角1.5，类型记录2.4.0，矩: 2.18.1，和吞咽用于项目组装。
这是我的tsconfig.json
{
"files": [
"src/app/main.ts",
"types/**/*.ts"
],
"compilerOptions": {
"noImplicitAny": false,
"target": "es2015",
"allowSyntheticDefaultImpor
浏览 4提问于2017-07-06得票数 5
回答已采纳
看起来FindwxWidgets.CMake无法从contrib中找到stc模块。我的CMakeList文件中有以下内容。
find_package(wxWidgets COMPONENTS core base stc REQUIRED)
消息失败，找不到wxWidget。如果我从其中删除stc，一切都会正常工作。我如何解决这个问题？
我在Windows7和wxWidgets 2.8.11上使用CMake2.8。
任何帮助都将不胜感激。
浏览 2提问于2011-05-01得票数 1
项目结构如下：
|- SRC
|-- COMMON
|---- SCSS
|------ GLOBAL.scss
|------ VARIABLES.json (scss colors in json structure)
|-- PAGES
|---- COMPONENTS
|------ COMPONENT A
|-------- SCSS
|---------- componentA.scss
|------ COMPONENT B
|-------- SCSS
|---------- componentB.scss
我想将global.scss文件@导入到单个组件scss文件中。我不想
浏览 0提问于2017-05-16得票数 3
对于其他包所使用的包，我有下面的tsconfig.json，让我们将其称为packageA
{
"compilerOptions": {
"baseUrl": ".",
"checkJs": false,
"declaration": true,
"downlevelIteration": true,
"esModuleInterop": true,
"outDir": "./dist",
&
浏览 4提问于2020-07-22得票数 0
我正在设置一个带有类型记录的Next.js项目。我一直在遵循几个指南，但我似乎面临一个进口别名的问题。
我不确定这是我的配置还是Next.js的问题。
这里有几页引用了一些类似的问题，但我没有成功地遵循它们的建议：
我试图利用Next.js的webpack配置来解决这个问题(将resolve.alias选项直接添加到next.config.js中，但这并没有帮助，Next.js现在应该支持打印文本(resolve.extensions定义得很好)。
Next.js版本9.3.5
Babel-插件-模块-解析器版本4.0.0
tsconfig.json
{
"compilerOpt
浏览 2提问于2020-04-16得票数 3
回答已采纳
错误:错误:无法从src\common\autoHideKeyboard.js解析模块dismissKeyboard：在项目中找不到dismissKeyboard
autohidekeyboard.js
import {TouchableWithoutFeedback,View} from 'react-native'
import React from "react";
const dismissKeyboard = require('dismissKeyboard')
export default (WrappedComponent) =&
浏览 3提问于2020-08-12得票数 1
3回答
正在获取此错误...
编辑routes.js以反映更改
错误。/app/config/routes.js模块未找到:错误:无法解析/Users/sam/Desktop/battle/app/config @中的模块'react-rounter‘。/app/config/routes.js 2:19-43
我的npm包中安装了webpack和react - react-dom - react-router - babel等命令。当我运行npm start时，我得到了上面的错误。下面是我的package.json / webpack配置/ router.js文件
package.json
浏览 45提问于2016-11-22得票数 3
回答已采纳
我正在设置一个新的反应-本机项目，并希望配置该应用程序，以支持导入模块使用绝对路径，添加一个jsconfig.json文件到我的项目的根。但该应用程序无法解析模块。我需要做一些额外的设置吗？
我创建了一个新的react-本机项目--本机-cli 2.0.1，并尝试在MyButton中导入App.js，如下所示：“从‘~/ MyButton /MyButton’导入MyButton；
|-- android
|-- ios
|-- node_modules
|-- src
|-- components
|-- MyButton.js
|-- App.js
|--
浏览 1提问于2019-07-15得票数 7
回答已采纳
1回答
我试图将 VPopper组件从标准加载替换为异步加载。
标准加载-组件加载和正常工作的
import { VPopover } from 'v-tooltip'
export default {
components: {
VPopover
}
}
异步负载组件未正确加载
export default {
components: {
VPopover: () => import('v-tooltip')
},
}
由于上述原因，组件无法正常工作，组件也无法正确加载。也许是因为它不是默认的导出，而是在v-tooltip Vu
浏览 2提问于2019-01-14得票数 0
我一直在努力让我的反应项目开始。我正在使用与巴贝尔，webpack，和webpack开发服务器，快速原型的反应。
首先，我无法让导入函数工作。我尝试通过将导入ES6语法转换为Node的require语法来解决“导入”未被识别的问题(“找不到令牌导入”)。我真的不知道从哪里开始故障排除，如果可能的话，我正在寻找正确的方法。
这是我的webpack配置：
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
浏览 0提问于2018-07-03得票数 0
回答已采纳
1回答
我已经在我需要的js项目中安装了webpack，将依赖项和页面特定的js捆绑到一个文件中。然而，目前它只能捆绑jquery、bootstrap和自定义js。其他依赖项，如handlebars、bootstrap-select选择器，都没有被webpack发现
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app/page/report/report.js',
output: {
path: path.resolve(__
浏览 0提问于2018-06-21得票数 0
我是webpack的新手，有反应。希望你能帮我。
我面临一个问题，在互联网上找不到任何可行的解决方案。当我试图运行webpack-dev-serverI时，我得到了“模块找不到:错误:无法解决模块‘组件/应用程序’”的错误。
这是我的文件结构。
根/ webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
entry: [
浏览 7提问于2016-10-22得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
