引入codemirror时报错，webpack中resolve.extensions配置产生的问题

解决CodeMirror引入错误
最新推荐文章于 2025-03-20 17:08:13 发布
原创 最新推荐文章于 2025-03-20 17:08:13 发布 · 3.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #webpack

本文详细解析了在引入CodeMirror库时遇到的函数缺失问题，揭示了错误原因是由于lib文件夹下存在同名文件，且引入顺序不当导致优先加载了CSS而非JS文件。通过调整webpack配置的extensions顺序，成功解决了这一问题。

问题

在引入codemirror的时候，找不到对应的CodeMirror对应的函数。原因在于在CodeMirror库中lib的CodeMirror文件有2个，相同的名字。

举个例子，在CodeMirror/mode/javascript下的任一个js文件，都是报错的。
在这里插入图片描述
这里引入了lib/CodeMirror,分析了下，是传入的CodeMirror缺失了对应的方法
在这里插入图片描述
我们输出JS文件引入的情况。

在这里插入图片描述
发现了如果没有指名后缀的话，无法找到正确的文件。
在这里插入图片描述
这个导致的原因是lib文件夹下存在2个相同名字的文件。
在这里插入图片描述
如果后缀名没有指名的话，这里判断的顺序是按照webpack配置的extensions顺序来决定的。
在这里插入图片描述
这里CSS大于JS，所以优先引入的是css文件，这就导致了引入文件错误了。

这个时候只要改下引入顺序即可。

结果

在这里插入图片描述
在这里插入图片描述
引入就正常了。

Vue 中使用 codemirror
前端技术
02-08 1万+
一、安装 官网地址：https://codemirror.net/ npm 插件地址：https://www.npmjs.com/package/vue-codemirror vue 项目中安装， npminstallvue-codemirror--save 可在 package.json 文件中看到，当前是 4.0.6 版 二、使用 1、引入 这里是局部引入，vue 文件中引入 主题dracula 是目前我觉得还比较好看的样式，可在路径 node_modules\codem...
【Webpack--011】配置开发和生产模式的webpack.config.js
m0_61486963的博客
09-19 1131
【Webpack--011】配置开发和生产模式的webpack.config.js
conordion-codemirror-extension：非官方的Concordion Codemirror扩展
02-24
手风琴代码镜像扩展 非官方的Concordion Codemirror扩展
CodeMirror使用小结
热门推荐
haoyanyu_的博客
08-31 2万+
CodeMirror可以在线编辑代码，风格包括js, java, php, c++等等100多种语言。比较强大可以自行配置语言模式。能够做到自动补全，代码折叠，可配置键盘事件，vim， emacs， sublime  text 风格、能完成查找替换，括号匹配，分栏显示，显示行号，自行配置字体大小和风格，等等等等。。。 官网地址如下： https://codemirror.net/index.ht...
vue-codemirror—全局引入路径报错问题
yefeng1308的博客
08-29 8339
搜索了很多网上的例子，结果复制很多都不能用（如：import ‘codemirror/lib/codemirror.css’），都是在引入后报路径错误。有人针对vue框架，封装了cm，提供了一个面向vue的cm组件：vue-codemirror，使用起来比较方便。vue-codemirror的npm安装命令：npm install vue-codemirror --save。安装完成后，首先需要在全局或组件下引入vue-codemirror，这里演示的是在组件下引入。......
codemirror报错 Uncaught TypeError: Cannot read properties of undefined (reading ‘map‘)
m0_53062835的博客
11-14 1613
关于codemirror报错问题，Uncaught TypeError: Cannot read properties of undefined (reading 'map')
resolve-webpack:在 Webpack 中使用 resolve.modulesDirectories
06-07
解析 webpack 在 Webpack 中使用 resolve.modulesDirectories 安装 打开终端 运行npm install 发展 运行npm run dev 打开
vue中webpack.dev.conf.js：和webpack.base.conf.js,
周家大小姐
05-03 5998
'use strict' const utils = require('./utils')// 工具类 const webpack = require('webpack') // 获取配置文件中默认的配置 const config = require('../config') const merge = require('webpack-merge')// 使用webpack配置合并插件...
Vue 教程(二十七)webpack 配置文件 webpack.config.js
yuan_xw的专栏
08-09 1880
Vue 教程(二十七)webpack 配置文件 webpack.config.js npm 初始化 webpack.config.js 开发时依赖 项目配置 在项目根目录下新建 webpack.config.js 文件，配置文件中 path 属性，需要绝对路径，因此需要的初始化 npm 获得 node 中内置的 path 变量，以获得当前绝对路径，命令执行成功后，自动生成：package.json 文件 npm 初始化：npm init ## 包名meet package name: (webpac
webpack配置指南.docx
10-21
2. 在`webpack.config.js`中引入并配置该插件： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ template: path...
在vue里使用codemirror遇到的问题
12-29
前提小结： 第一次用codemirror，而且是在vue里面使用，看了官方文档，一大串都是英文，翻译后大概了解了这个插件，然后在项目中使用时出现过好几个问题： 1.新版的codemirror在lib目录下没有codemirror.js文件，旧版的有，所以网上的很多文章都是直接这样引： [removed][removed] <scriptsrc=mode/javascript/javascr
codeMirror插件使用讲解
08-31
codeMirror是一款十分强大的代码编辑插件，提供了十分丰富的API，最近在项目中用到了这款插件，于是在这里给大家分享下使用方法和心得。具有一定的参考价值，下面跟着小编一起来看下吧
在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏
weixin_30700099的博客
01-12 3025
项目需要在线展示和编辑Json文件，所以需要找一个代码编辑器，因为我们的项目直接使用的vueAdmin-template这个模板 json编辑器也是直接从vue-element-admin项目扒下来的…… //好吧 这个项目看起来很炫，其实有很多坑，我们组没人用过vue，又需要快速完成任务，就随便找了一个= = JsonEditor.vue（和原项目比我改了一下 <...
如何解决iview-admin运行错误：Module not found: Error: Can‘t resolve ‘codemirror/addon/display/fullscreen.js‘
最新发布
tpc4289的专栏
03-20 244
如何解决iview-admin运行错误：Module not found: Error: Can't resolve 'codemirror/addon/display/fullscreen.js'
页面编辑器CodeMirror的使用，以及使用时出现的问题
qq_45030980的博客
06-14 8428
官网：**https://codemirror.net** 使用前先下载依赖： npm install --save codemirror 编译器样式地址(theme): 效果地址: https://codemirror.net/demo/theme.html#default 引入样式地址：https://codemirror.net/theme/ <template> <div id="app"> <textarea id="text...
vue3 codemirror yaml文件编辑器插件
村长在路上
02-09 2307
需求：前端编写yaml配置文件 ，检查yaml语法 提供语法高亮。
解决：code ERESOLVE：ERESOLVE could not resolve 的报错问题
狮子座的男孩
07-16 2万+
大概是因为版本的问题吧，因为我在装。的时候没有问题，且之前项目安装。的时候并没有任何问题；
CodeMirror编辑器使用方式ts+vue3
weixin_45685394的博客
09-12 1865
使用以上方式封装一个组件，然后直接调用使用即可。
code ERESOLVE， ERESOLVE could not resolve
qq_46199553的博客
02-04 2851
npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: biyedurg@0.1.0 npm ERR! Found: webpack@4.46.0 npm ERR! node_modules/webpack npm ERR! peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6 npm ER
Webpack中resolve.modulesDirectories的使用与实践指南
在 Webpack 配置文件（通常是 webpack.config.js）中，可以通过如下方式设置 modulesDirectories 属性： ```javascript module.exports = { // 其他配置... resolve: { modulesDirectories: ['node_modules', '...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值