babel.config.js：加载配置时出错 - 找不到模块“纤维”

Question

这让我发疯了。

IDE：Visual Studion 2019 项目：创建了一个新的“基本 Vue.js 项目”——我选择了 *.ts 风格

我验证新站点的运行。确实如此。

在 Vuetify 快速入门之后：https://vuetifyjs.com/en/getting-started/quick-start/#bootstrapping-the-vuetify-object

在每一步之后，我都会验证该站点仍将编译和运行。

我到达了我们向项目添加新模块的部分。我运行这一行：

npm install sass sass-loader fibers deepmerge -D

现在该站点将无法运行。当我调试时，我得到这个输出：

------ Build started: Project: MCCC.Web, Configuration: Debug Any CPU ------
        > mccc.web@0.1.0 build C:\Labs\MCCC\Web\MCCC-Web\MCCC.Web
        > vue-cli-service build
        -  Building for production...
        Starting type checking service...
        Using 1 worker with 2048MB memory limit
         ERROR  Failed to compile with 1 errors5:04:50 PM
         error  in ./src/main.ts
        Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
        Thread Loader (Worker 0)
        C:\Labs\MCCC\Web\MCCC-Web\MCCC.Web\babel.config.js: Error while loading config - Cannot find module 'fibers'
            at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
            at Function.Module._load (internal/modules/cjs/loader.js:562:25)
            at Module.require (internal/modules/cjs/loader.js:690:17)
            at require (internal/modules/cjs/helpers.js:25:18)
            at Object.<anonymous> (C:\Labs\MCCC\Web\MCCC-Web\MCCC.Web\babel.config.js:17:32)
            at Module._compile (internal/modules/cjs/loader.js:776:30)
            at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
            at Module.load (internal/modules/cjs/loader.js:653:32)
            at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
            at Function.Module._load (internal/modules/cjs/loader.js:585:3)
         @ multi ./src/main.ts
         ERROR  Build failed with errors.
        npm ERR! code ELIFECYCLE
        npm ERR! errno 1
        npm ERR! mccc.web@0.1.0 build: `vue-cli-service build`
        npm ERR! Exit status 1
        npm ERR! 
        npm ERR! Failed at the mccc.web@0.1.0 build script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
        npm ERR! A complete log of this run can be found in:
        npm ERR!     C:\Users\Dwainwright.BC\AppData\Roaming\npm-cache\_logs\2020-04-26T21_04_50_521Z-debug.log
C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\MSBuild\Microsoft\VisualStudio\v16.0\Node.js Tools\Microsoft.NodejsToolsV2.targets(60,5): error MSB3073: The command "npm run build" exited with code 1.
Done building project "MCCC.Web.njsproj" -- FAILED.

Build FAILED.
========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========

最让我印象深刻的是：

C:\Labs\MCCC\Web\MCCC-Web\MCCC.Web\babel.config.js: Error while loading config - Cannot find module 'fibers'

fibers 是 babel.config.json 中的引用，我在其中添加了快速入门中列出的规则：

module.exports = {
  presets: [
        '@vue/app',
        '@babel/preset-env'
    ],
    rules: [
        {
            test: /\.s(c|a)ss$/,
            use: [
                'vue-style-loader',
                'css-loader',
                {
                    loader: 'sass-loader',
                    // Requires sass-loader@^7.0.0
                    options: {
                    implementation: require('sass'),
                    fiber: require('fibers'),
                    indentedSyntax: true // optional
                },
                // Requires sass-loader@^8.0.0
                options: {
                    implementation: require('sass'),
                    sassOptions: {
                        fiber: require('fibers'),
                        indentedSyntax: true // optional
                    },
                },
            },
        ],
    },
]
};

有人知道我该如何解决这个问题吗？很高兴分享更多信息；不知道你还需要什么。

Answer 1

您使用的是最新版本的文档吗？我点击了您提供的链接，并且锚点 #bootstrapping-the-vuetify-object 似乎不再存在。按照以下步骤，我能够成功启动并运行一个基本项目：

1. vue create myapp：选择“自定义”并勾选所有框，对于 TypeScript，选择默认的“类样式组件”
2. 已验证 npm run serve 有效
3. vue add vuetify：选择“配置”，这些选项：
   1. 是（默认）
   2. 是
   3. 是
   4. Material Design 图标（默认）
   5. N（默认）
   6. 是（默认）
   7. 英语（默认）
4. npm run serve 会运行，但我收到有关 vuetify/lib 类型声明的警告。 This answer 将我带到this FAQ item，这使警告消失了。 （您必须将"vuetify" 添加到项目根tsconfig.json 中的compilerOptions.types 数组中。）

FWIW，fibers 似乎不再包含在项目中（在package-lock.json 中搜索“纤维”）。我的babel.config.js 文件看起来像：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

而vue.config.js 看起来像：

module.exports = {
  transpileDependencies: [
    'vuetify'
  ]
}

希望这会有所帮助！