Unable to npm run build on new project #5022

ddreier · 2020-01-02T22:52:52Z

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.

The text was updated successfully, but these errors were encountered:

ddreier · 2020-01-03T05:39:11Z

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

haoqunjiang · 2020-01-03T06:34:06Z

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

ddreier · 2020-01-03T16:33:29Z

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 · 2020-01-03T17:26:04Z

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 · 2020-01-03T19:15:42Z

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 · 2020-01-04T06:29:22Z

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 · 2020-01-04T06:43:34Z

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

ddreier · 2020-01-04T06:49:33Z

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 · 2020-01-04T07:02:01Z

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 · 2020-01-04T07:36:48Z

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 · 2020-01-04T07:59:21Z

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 · 2020-01-04T09:35:15Z

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 · 2020-01-04T09:40:33Z

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

vue-cli/packages/@vue/cli-service/lib/config/base.js

Lines 183 to 185 in 80b9395

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

ddreier · 2020-01-07T05:03:01Z

Thanks for your help! It was the path casing. 🤦‍♂

closes vuejs#2547 closes vuejs#5032 I'm still very hesitant on adding this feature, though. First, this change allows project creation in a folder with uppercase letters in its name. It is strongly discouraged and may cause many weird issues all over the ecosystem. For example, vuejs#5022, vuejs#4424, vuejs#3665, vuejs#4174#issuecomment-569709494 are all caused by case issues. Adding support for uppercase project names will only worsen this situation. Secondly, it adds a lot of maintenance burden to us. As noted in the comments, these prompts are hard to test right now (because `createTestProject` runs in another process so it's hard to intercept the prompts). Even if such test utilities are added in the future, it's still very tedious to take care of all the case issues in the test suite. What's worse is that we can affect the project folders created by @vue/cli by converting the project name to lower case. But for `vue create .`, we cannot change the current folder's name. So, we'll have another edge case to test.

douglasg14b · 2020-01-31T18:26:58Z

What is the solution for this? I also cannot run a build on a new project that was created with vue ui

And the project name is lowercase.

ddreier · 2020-02-01T06:37:27Z

@douglasg14b the solution for me was to make sure that the path casing in my terminal matched the actual path casing in the filesystem (on Windows).

Might be a different issue if your casing already matches.

anzuj · 2020-02-23T14:56:27Z

@douglasg14b the solution for me was to make sure that the path casing in my terminal matched the actual path casing in the filesystem (on Windows).

Might be a different issue if your casing already matches.

@ddreier Hi there! Very sorry to bother you, but I am very new to Vue and coding in general. Would you perhaps help by describing a bit more how can I check these paths (terminal vs filesystem) and fix them?

wmkDev · 2020-03-13T19:37:58Z

I had a problem with path casing too, if i try to build the project using the wrong path casing it fails.

Just to clarify:
npm run build using
d:\Projects\... it throws "Error: No module factory available for dependency type: CssDependency"

D:\Projects\.. Works fine.

@anzuj, check if it solve ur problem.

shortpoet · 2020-03-26T20:48:27Z

Not sure if I'll have to use the plugin eventually. Reading through similar issues I tried running build command in powershell and it just worked. Guessing it resolves the casing properly. This issue for me is in using bash shell for windows which I would like to be able to continue using if anyone has a fix for that.

atulSnapy · 2020-04-29T06:39:08Z

I renamed every directory in lower case, worked fine,

example "D:\Project\Test1\vueproject" to "D:\project\test1\vueproject"

douglasg14b · 2020-06-29T05:51:53Z

@ddreier I'm using the vue ui, how can I fix it's casing, or how it's handling casing?

sumeshsadau · 2020-07-04T13:38:50Z

Changing all the alphabets in the path which i was are providing in my script to lower case made it work.
eg: 'C:\software\workspace_c\CRM\client' to 'C:\software\workspace_c\crm\client'

m-mohr · 2020-08-28T15:08:02Z

Interestingly, it works for me in the good old cmd, but not in PowerShell...

karam94 · 2020-09-12T10:51:08Z

The problem is certainly caused by casing, however it seems that this issue has been closed without actually addressing it with a long term solution?

haoqunjiang added the needs feedback label Jan 3, 2020

haoqunjiang closed this as completed Jan 4, 2020

haoqunjiang mentioned this issue Jan 7, 2020

Error: No module factory available for dependency type: CssDependency #5043

Closed

haoqunjiang mentioned this issue Jan 20, 2020

feat: convert project name to lowercase and warn on creation #5096

Closed

9 tasks

haoqunjiang mentioned this issue Feb 7, 2020

Error: No module factory available for dependency type: CssDependency #5154

Closed

wengjq mentioned this issue Jun 16, 2020

运行到小程序模拟器微信开发者工具报错 dcloudio/uni-app#1797

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to npm run build on new project #5022

Unable to npm run build on new project #5022

ddreier commented Jan 2, 2020

ddreier commented Jan 3, 2020

haoqunjiang commented Jan 3, 2020

ddreier commented Jan 3, 2020

haoqunjiang commented Jan 3, 2020

ddreier commented Jan 3, 2020 •

edited

Loading

haoqunjiang commented Jan 4, 2020

haoqunjiang commented Jan 4, 2020

ddreier commented Jan 4, 2020

haoqunjiang commented Jan 4, 2020

ddreier commented Jan 4, 2020

ddreier commented Jan 4, 2020

haoqunjiang commented Jan 4, 2020

haoqunjiang commented Jan 4, 2020

ddreier commented Jan 7, 2020

douglasg14b commented Jan 31, 2020 •

edited

Loading

ddreier commented Feb 1, 2020

anzuj commented Feb 23, 2020

wmkDev commented Mar 13, 2020 •

edited

Loading

shortpoet commented Mar 26, 2020

atulSnapy commented Apr 29, 2020 •

edited

Loading

douglasg14b commented Jun 29, 2020

sumeshsadau commented Jul 4, 2020

m-mohr commented Aug 28, 2020

karam94 commented Sep 12, 2020

Unable to npm run build on new project #5022

Unable to npm run build on new project #5022

Comments

ddreier commented Jan 2, 2020

Version

Environment info

Steps to reproduce

What is expected?

What is actually happening?

ddreier commented Jan 3, 2020

haoqunjiang commented Jan 3, 2020

ddreier commented Jan 3, 2020

haoqunjiang commented Jan 3, 2020

ddreier commented Jan 3, 2020 • edited Loading

haoqunjiang commented Jan 4, 2020

haoqunjiang commented Jan 4, 2020

ddreier commented Jan 4, 2020

haoqunjiang commented Jan 4, 2020

ddreier commented Jan 4, 2020

ddreier commented Jan 4, 2020

haoqunjiang commented Jan 4, 2020

haoqunjiang commented Jan 4, 2020

ddreier commented Jan 7, 2020

douglasg14b commented Jan 31, 2020 • edited Loading

ddreier commented Feb 1, 2020

anzuj commented Feb 23, 2020

wmkDev commented Mar 13, 2020 • edited Loading

shortpoet commented Mar 26, 2020

atulSnapy commented Apr 29, 2020 • edited Loading

douglasg14b commented Jun 29, 2020

sumeshsadau commented Jul 4, 2020

m-mohr commented Aug 28, 2020

karam94 commented Sep 12, 2020

ddreier commented Jan 3, 2020 •

edited

Loading

douglasg14b commented Jan 31, 2020 •

edited

Loading

wmkDev commented Mar 13, 2020 •

edited

Loading

atulSnapy commented Apr 29, 2020 •

edited

Loading