解决HbuildX中开发uniapp+vant出现的报错：Module build failed (from ./node_modules/postcss-loader/src/index.js):

最新推荐文章于 2023-09-07 15:46:57 发布
最新推荐文章于 2023-09-07 15:46:57 发布
阅读量2.8k 收藏 3
点赞数 6
分类专栏： uni-app HubuildX vant 文章标签： javascript uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45802269/article/details/131096168
版权
uni-app 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
HubuildX
1 篇文章 0 订阅
订阅专栏
vant
1 篇文章 0 订阅
订阅专栏

首先目录大致一致。

接下来运行的时候会出现Module build failed (from ./node_modules/postcss-loader/src/index.js):

这样的报错。

 

如果和我的一样的话，那就是HbuildX的坑了。

 

接下来只需要打开wxconponents里面vant目录下的icon里面的index.vue文件，把鼠标光标点击到代码里面，按ctrl+k，HbuildX会自动编译，然后再运行就ok了。 

貳壹柒丶
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Module build failed (from ./node_modules/postcss-loader/src/index.js):
qq_45532769的博客
11-12 5130
出现该错误是你可能没认真看官网的安装配置，可直接看该目录3，一个字一个字看先安装如果选择v1版本，建议使用npm下载，下面以v1版本为例，使用的是npm下载，导入uview时该文件也在node_modules文件夹里面，未移动。然后就是配置。
react移动端项目构建TS，[email protected]+react-vant+vite+axios+redux+sass+ts
最新发布
03-06
该架构已解决大部分坑，主要用于[email protected]移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 rreact：https://react.nodejs.cn/reference/react/hooks vant：https://vant-contrib.gitee.io/vant/#/zh-CN axios：https://www.axios-http.cn/docs/api_intro vite：https://vitejs.cn/ redux：https://cn.redux.js.org/index.html redux-persist：https://github.com/rt2zz/redux-persist sass：https://blog.csdn.net/randy521520/article/details/131242242
一天一个webpack报错小总结———更新到webpack初阶学完为止
weixin_44158539的博客
12-13 892
webcpack.config.js文件中的相关代码注释 /* webpack.config.js webpack的配置文件 作用：指示webpack干哪些活儿(当你运行webpack时，会加载里面的配置) *重点：所有的构建工具都是基于nodejs平台运行的~模块化默认采用commonjs */ //resolve：用来拼接绝对路径的方法 const {resolve} = require('path'); module.exports={ //webpack配置
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: PostCSS plugin autopref
qq_44035882的博客
02-28 4269
使用vue+uni-app开发微信小程序运行后报错。 Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: PostCSS plugin autoprefixer requires PostCSS 8.
webpack 错误 Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
热门推荐
马金波
08-30 4万+
npm run build > [email protected] build /home/q/www/webpack_test > webpack Hash: e5a0c99f86239b7fee98 Version: webpack 4.39.3 Time: 345ms Built at: 08/30/2019 7:13:18 PM 1 asset Entrypoint a...
解决uniapp项目中使用vant Weapp图标组件报错问题（Module build failed from ./node_modules/postcss-loader/src/index）
筱竹的博客
12-30 1万+
解决uniapp项目中使用vant 图标报错问题 在使用uniapp开发项目时，使用到了vant Weapp组件库，如下图所示： 但是当运行项目进行编译时或者发行进行项目打包时，报错如下： 以下是具体报错信息 15:25:26.122 Module build failed (from ./node_modules/postcss-loader/src/index.js): 15:25:26.128 SyntaxError 15:25:26.129 (36:193) Unclosed bracke
Module build failed (from ./node_modules/postcss-loader/src/index.js):SyntaxError(35:193) 报错解决
你的阿迁
09-07 1725
今天和往常一样，将uni项目运行到微信开发者工具，项目正常运行，然后我又将项目运行到Android app基座中，就遇到了这个报错，这个报错这个把我搞得非常头大，了解这个报错的话，解决非常非常简单，反之... 我测试了很多种方法，升级 postcss-loader 版本， 降级want weapp版本、修改 postcss.config.js 配置文件、以及在app.vue中引入相关样式文件，都没有成功解决，不过最终在耐心的测试下，终于成功解决...首先看下报错信息，我自己看完真的无从下手啊...
vue 引入 uView 报错：Module build failed (from ./node_modules/postcss-loader/src/index.js): SyntaxError
票票的博客
02-05 1万+
先安装uView 其次分别在三个文件夹引入 uView main.js import uView from "uview-ui" Vue.use(uView) 公共样式 uni.scss @import 'uview-ui/theme.scss'; App.vue <style> /* #ifndef APP-PLUS-NVUE */ @import "uview-ui/index.scss"; @import './utils.css'; /* uni.css .
vue-cli环境安装node-sass问题
weixin_43989837的博客
11-24 969
错误描述 error in ./src/views/index/carNumber.vue?vue&type=style&index=0&id=27bb9816&lang=scss&scoped=true& Module build failed (from ./node_modules/postcss-loader/src/index.js): 解析：这是说明你安装的node-sass版本过高了，需要降低版本重新安装 解决方法： 1，在package
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui）.zip
05-03
Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） Java毕业设计：外卖点餐系统（springboot+vue+vant+element-ui） ......
react移动端项目构建，[email protected]+react-vant+vite+axios+redux+sass
03-06
该架构已解决大部分坑，主要用于[email protected]移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 react：https://react.nodejs.cn/reference/react/hooks vant：https://vant-contrib.gitee.io/vant/#/zh-CN axios：https://www.axios-http.cn/docs/api_intro vite：https://vitejs.cn/ redux：https://cn.redux.js.org/index.html redux-persist：https://github.com/rt2zz/redux-persist sass：https://blog.csdn.net/randy521520/article/details/131242242
HBuilderX.3.1.18.20210609.full.zip
07-22
HBuilderX.3.1.18下载安装，轻松搞定uniapp开发。插件安装。环境搭建一件搞定
iyon-module-implicit.rar_https://www.iyon
09-20
里面使用的是Winsock控件,语音部份是一个用VC写的DLL
vue-cli3 + vant + postcss-px2rem实现移动端页面.docx
09-06
vue-cli3 + vant + postcss-px2rem实现移动端页面
vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass
02-08
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite和vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理持久化储存等功能 ...
Module build failed (from ./node_modules/postcss-loader/src/index.js
路虽远行则将至，事虽难做则必成。
06-05 554
后面发现是有个包配置文件这个包在uni-app中以另外一种形式放在static文件中。这几天在用uni-app搭建架子时候，突然发现一个报错。查阅很久都没说没什么。删除文件时不小心把他删除了，后面恢复就可以了。
Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js)
weixin_45320509的博客
03-24 3717
新建一个项目，在static文件夹中，复制customicons.css和customicons.ttf，最后粘贴到当前项目的static文件夹中。将static文件夹的css文件删除了。
unaipp项目编译报错Module build failed (from ./node_modules/postcss-loader/src/index.js):
weixin_45162034的博客
05-15 2188
解决方法 HBuild创建的uni-app项目，代码生成时没有style的语言，我添加了lang=“less” 或者 lang=“sass” 就ok。
/node_modules/.store/vant@4.6.3/node_modules/vant/es/submit-bar/SubmitBar.mjs
07-27
根据提供的引用内容，你遇到的问题是关于引入Vant组件库时报错的问题。根据引用\[1\]，报错信息是Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=xxxx'。根据引用\[3\]，解决方法是卸载后重装Vant 2.12.2版本，并按需引入组件。 为了解决这个问题，你可以按照以下步骤进行操作： 1. 首先，根据引用\[2\]中的package.json配置，确保你的vue版本是3.2.24，vant版本是3.0.7。 2. 然后，运行命令`npm uninstall vant`卸载当前的Vant组件库。 3. 接下来，运行命令`npm install vant@2.12.2`重新安装Vant 2.12.2版本。 4. 在你的项目中，根据引用\[3\]中的配置方法，安装并配置babel-plugin-import插件。你可以运行命令`npm install babel-plugin-import -D`来安装该插件。 5. 在你的项目的.babelrc文件或babel.config.js文件中，根据你的实际情况添加以下配置： ```json { "plugins": \[ \["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }\] \] } ``` 6. 最后，在你需要使用Vant组件的地方，根据你的需求选择全局注册或页面注册。全局注册可以在main.js文件中引入并使用`Vue.use(Button)`来全局注册Vant组件。页面注册可以在需要使用组件的页面中，通过`import {Button} from 'vant'`来引入组件，并在组件的components选项中注册。 通过以上步骤，你应该能够解决报错问题并成功引入Vant组件库。如果你仍然遇到问题，可以参考Vant官方文档\[3\]中的更多信息和示例。 #### 引用[.reference_title] - *1* *2* [Vue3+Vite+Vant报错Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?...](https://blog.csdn.net/tiven_/article/details/126362355)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue2 vant组件库报错：ERROR in ./node_modules/@vant/use/dist/index.esm.mjs 101:12-19export ‘isVNode...](https://blog.csdn.net/sherlyxoxo/article/details/125984515)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值