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

Question

This is driving me nuts.

IDE: Visual Studion 2019 Project: Created a new "Basic Vue.js project" - I chose the *.ts flavour

I validate the new site runs. It does.

Following the quick start on Vuetify: https://vuetifyjs.com/en/getting-started/quick-start/#bootstrapping-the-vuetify-object

After each step I validate the site will still compile and run.

I reach the section where we add new modules to our project. I run this line:

npm install sass sass-loader fibers deepmerge -D

And now the site will not run. When I debug I get this output:

------ 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 ==========

The line that sticks out the most to me is:

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

fibres is references in the babel.config.json where I added the rules laid out in quick start:

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
                    },
                },
            },
        ],
    },
]
};

Does anybody know how i can resolve this? Happy to share further info; not sure what else you may need.

Answer 1

Are you using the latest version of the docs? I followed the link you provided and the anchor #bootstrapping-the-vuetify-object doesn't appear to exist anymore. I was able to get a basic project up and running successfully following these steps:

1. vue create myapp : Selected "custom" and ticked all the boxes, for TypeScript, chose the default "class-style components"
2. verified that npm run serve worked
3. vue add vuetify : Selected "Configure", and these options:
   1. Y (default)
   2. y
   3. y
   4. Material Design Icons (default)
   5. N (default)
   6. Y (default)
   7. English (default)
4. npm run serve would run, but I got warnings about type declaration for vuetify/lib . This answer led me to this FAQ item which made the warnings go away. (You have to add "vuetify" to the compilerOptions.types array in the root tsconfig.json for the project.)

FWIW, fibers does not appear to be included in the project at all anymore (searched for "fibers" in package-lock.json ). My babel.config.js file looks like:

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

And vue.config.js looks like:

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

Hope this helps!