打包组件报错：Error: Cannot find module ‘vue/compiler-sfc‘

解决Vue组件库Webpack打包错误：找不到'module/compiler-sfc'

最新推荐文章于 2023-04-09 18:35:43 发布

xuelong-ming

最新推荐文章于 2023-04-09 18:35:43 发布

阅读量1.8w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： webpack web 前端文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/xuelong5201314/article/details/122843874

前端同时被 3 个专栏收录

58 篇文章

订阅专栏

web

11 篇文章

订阅专栏

webpack

1 篇文章

订阅专栏

在搭建Vue组件库并使用Webpack打包时遇到错误，问题源于'vue/compiler-sfc'模块未找到。错误出现在'webpack.config.js'文件中，尝试引入VueLoaderPlugin时出错。检查发现'vue-loader'版本为17.0.0，而该版本可能不包含所需模块。解决方案是回退到低版本的'vue-loader'，如15.0.0，通过'npm install vue-loader@15-D'进行安装。执行此操作后，问题得到解决，成功打包组件库。

vue组件库搭建过程中使用webpack打包组件时报错，报错内容如下：

Error: Cannot find module 'vue/compiler-sfc'
Require stack:
- D:\vue2\moon-ui\node_modules\vue-loader\dist\index.js
- D:\vue2\moon-ui\webpack.config.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (D:\vue2\moon-ui\node_modules\vue-loader\dist\index.js:8:24)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\vue2\\moon-ui\\node_modules\\vue-loader\\dist\\index.js',
    'D:\\vue2\\moon-ui\\webpack.config.js'
  ]
}

发现报错文件：webpack.config.js

const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const glob = require("glob");
const list = {};

async function makeList(dirPath, list) {
    const files = glob.sync(`${dirPath}/**/index.js`)
    for (const file of files) {
        const component = file.split(/[/.]/)[2];
        list[component] = `./${file}`;
    }
}
makeList("components/lib", list)
module.exports = {
    entry: list,
    output: {
        filename: '[name].umd.js',
        path: path.resolve(__dirname, "dist"),
        library: 'mui',
        libraryTarget: 'umd'
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    { loader: 'vue-loader' },
                ]
            }
        ]
    }
};

通过执行下面代码，测试当前文件是否可执行：

node webpack.config.js

发现当引入VueLoaderPligin时报错

const VueLoaderPlugin = require('vue-loader/lib/plugin');

查询发现package.json中vue-loader版本是17.0.0：

{
  ...
  "devDependencies": {
    ...
    "vue-loader": "^17.0.0",
    ...
  }
}

解决方法

npm i vue-loader@15 -D

安装低版本的vue-loader

打包组件报错：Error: Cannot find module ‘vue/compiler-sfc‘

vue组件库搭建过程中使用webpack打包组件时报错，报错内容如下：

解决方法

重新尝试打包，解决问题！