Skip to content

Unable to npm run build on new project #5022

Closed
@ddreier

Description

@ddreier

Version

4.1.2

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.17134
    CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1505M v5 @ 2.80GHz
  Binaries:
    Node: 10.16.2 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1098.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.1.2
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.1.2
    @vue/cli-plugin-babel: ^4.1.0 => 4.1.2
    @vue/cli-plugin-eslint: ^4.1.0 => 4.1.2
    @vue/cli-plugin-router:  4.1.2
    @vue/cli-plugin-vuex:  4.1.2
    @vue/cli-service: ^4.1.0 => 4.1.2
    @vue/cli-shared-utils:  4.1.2
    @vue/component-compiler-utils:  3.1.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3
    vue: ^2.6.10 => 2.6.11
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.8.3
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

PS C:\code> vue create -d repro
PS C:\code> cd repro
PS C:\code\repro> npm run build

What is expected?

npm run build works out of the box

What is actually happening?

PS C:\code\repro> npm run build

> repro@0.1.0 build C:\code\repro
> vue-cli-service build


 ERROR  Error: No module factory available for dependency type: CssDependency
Error: No module factory available for dependency type: CssDependency
    at addDependency (C:\Code\repro\node_modules\webpack\lib\Compilation.js:800:12)
    at iterationOfArrayCallback (C:\Code\repro\node_modules\webpack\lib\Compilation.js:208:3)
    at addDependenciesBlock (C:\Code\repro\node_modules\webpack\lib\Compilation.js:816:5)
    at Compilation.processModuleDependencies (C:\Code\repro\node_modules\webpack\lib\Compilation.js:827:4)
    at afterBuild (C:\Code\repro\node_modules\webpack\lib\Compilation.js:954:15)
    at buildModule.err (C:\Code\repro\node_modules\webpack\lib\Compilation.js:998:11)
    at callback (C:\Code\repro\node_modules\webpack\lib\Compilation.js:734:5)
    at module.build.error (C:\Code\repro\node_modules\webpack\lib\Compilation.js:782:12)
    at handleParseResult (C:\Code\repro\node_modules\webpack\lib\NormalModule.js:478:12)
    at doBuild.err (C:\Code\repro\node_modules\webpack\lib\NormalModule.js:500:6)
    at runLoaders (C:\Code\repro\node_modules\webpack\lib\NormalModule.js:358:12)
    at C:\Code\repro\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Code\repro\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at C:\Code\repro\node_modules\loader-runner\lib\LoaderRunner.js:186:6
    at context.callback (C:\Code\repro\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at childCompiler.runAsChild (C:\code\repro\node_modules\mini-css-extract-plugin\dist\loader.js:198:12)
    at compile (C:\Code\repro\node_modules\webpack\lib\Compiler.js:343:11)
    at hooks.afterCompile.callAsync.err (C:\Code\repro\node_modules\webpack\lib\Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Code\repro\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Code\repro\node_modules\tapable\lib\Hook.js:154:20)
    at compilation.seal.err (C:\Code\repro\node_modules\webpack\lib\Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Code\repro\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! repro@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the repro@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\ddreier\AppData\Roaming\npm-cache\_logs\2020-01-02T22_36_06_103Z-debug.log

Running npm run serve works, and running vue build from the src directory also works.

I'm not sure why vue info says "@vue/cli: Not Found" when it clearly is installed. Before opening this issue I ran npm uninstall -g @vue/cli and npm install -g @vue/cli.

Activity

ddreier

ddreier commented on Jan 3, 2020

@ddreier
Author

I just noticed that I'm only getting that error when building in production mode.

haoqunjiang

haoqunjiang commented on Jan 3, 2020

@haoqunjiang
Member

I'm sorry but I can't reproduce this issue locally…
Could you provide a reproduction repo?

ddreier

ddreier commented on Jan 3, 2020

@ddreier
Author

Thanks for looking! I have uploaded the exact same code that I used when filling out the issue: https://github.com/ddreier/vue-cli-repro

haoqunjiang

haoqunjiang commented on Jan 3, 2020

@haoqunjiang
Member

Still can't reproduce.

As I looked into the code, seems the only possible way to trigger this issue is to remove mini-css-extract-plugin from the config while retains its corresponding loader. Have you added any custom config to your project?

ddreier

ddreier commented on Jan 3, 2020

@ddreier
Author

I have only added

  configureWebpack: {
    devtool: "source-map"
  }

In my vue.config.js to get source maps. The build fails with and without that.

haoqunjiang

haoqunjiang commented on Jan 4, 2020

@haoqunjiang
Member

Have you changed anything in package.json?
Have you tried delete package-lock.json and reinstall the dependencies?

It could be a dependency conflict.

haoqunjiang

haoqunjiang commented on Jan 4, 2020

@haoqunjiang
Member

Like, what's the output of npm ls webpack? If it's not correctly deduped then there might be a problem.

ddreier

ddreier commented on Jan 4, 2020

@ddreier
Author

Only change to package.json is adding a new script. Otherwise it's straight out of vue create -d.

"watch": "vue-cli-service build --watch"

I just tried deleting package-lock.json and ran npm install. Same error.

Here's the output of npm ls webpack:

PS C:\code\repro> npm ls webpack
repro@0.1.0 C:\code\repro
+-- @vue/cli-plugin-babel@4.1.2
| `-- webpack@4.41.5
+-- @vue/cli-plugin-eslint@4.1.2
| `-- webpack@4.41.5  deduped
`-- @vue/cli-service@4.1.2
  `-- webpack@4.41.5  deduped
haoqunjiang

haoqunjiang commented on Jan 4, 2020

@haoqunjiang
Member

I googled the error message and the only reports I got are these:

#5030
https://techcommunity.microsoft.com/t5/windows-dev-appconsult/how-to-integrate-vue-js-and-asp-net-core-using-spa-extension/bc-p/1081095/highlight/true#M209

So it's a very rare issue.

I noticed that all of the 3 cases are running on Windows (and maybe PowerShell).
Could you try to use a different terminal for the same command? Cmd for example.

ddreier

ddreier commented on Jan 4, 2020

@ddreier
Author

Wow, I didn't find that MS Tech Community thread when I was trying to search around.

And what do you know, I did npm run build in a Cmd instead of PowerShell and it works. That's bizarre.

Microsoft Windows [Version 10.0.17134.1130]
(c) 2018 Microsoft Corporation. All rights reserved.

C:\Users\ddreier>cd C:\code\repro

C:\Code\repro>npm run build

> repro@0.1.0 build C:\Code\repro
> vue-cli-service build


\  Building for production...

 DONE  Compiled successfully in 6620ms                                                                        1:13:08 AM

  File                                 Size               Gzipped

  dist\js\chunk-vendors.8ac9e3f6.js    89.13 KiB          31.93 KiB
  dist\js\app.f0aab1b1.js              4.62 KiB           1.64 KiB
  dist\css\app.e2713bb0.css            0.33 KiB           0.23 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
ddreier

ddreier commented on Jan 4, 2020

@ddreier
Author

I have tried with 4.1.0 and 4.0.5 and gotten the same error in PowerShell.

Installed 3.12.1 and it's the same situation, PowerShell doesn't work but Command Prompt does. The actual error is different though:

PS C:\code\repro3121> npm run build

> repro3121@0.1.0 build C:\code\repro3121
> vue-cli-service build


C:\Code\repro3121\node_modules\neo-async\async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (C:\Code\repro3121\node_modules\neo-async\async.js:16:11)
    at C:\Code\repro3121\node_modules\neo-async\async.js:2818:7
    at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! repro3121@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the repro3121@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\ddreier\AppData\Roaming\npm-cache\_logs\2020-01-04T07_56_09_650Z-debug.log
haoqunjiang

haoqunjiang commented on Jan 4, 2020

@haoqunjiang
Member

Looks like webpack fails to load some loader/plugin when executed in PowerShell.
I'm not familiar with PowerShell but you can check for the path cases…

I noticed that in the PS prompts it's C:\code while in cmd it's C:\Code. Maybe that's the problem.

haoqunjiang

haoqunjiang commented on Jan 4, 2020

@haoqunjiang
Member

Anyway, not likely a Vue CLI bug, if the real cause confirmed, please report to webpack.

In Vue CLI we've already enabled the case-sensitive-paths-webpack-plugin to avoid such issues. But seems in this case the error came before the plugin had a chance to complain

webpackConfig
.plugin('case-sensitive-paths')
.use(require('case-sensitive-paths-webpack-plugin'))

16 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ddreier@douglasg14b@haoqunjiang@m-mohr@wmkDev

        Issue actions

          Unable to npm run build on new project · Issue #5022 · vuejs/vue-cli