Vue-cli: Cannot create an application that builds using vue-cli

[SeanKilleen]

Version

2.9.6

Node and OS info

Node v8.11.3 / npm 5.6.0 / vue-cli 2.9.6 / Windows 10 x64

Steps to reproduce

Note: this issue happens with v2.9.6 but that wasn't an option in the version list.

To recreate I ran "vue create ui-vue". I select the standard features (babel, eslint). The issue also happens if I select manual options, no matter what manual options I select.

One the process finishes, I enter the directory ("cd ui-vue") and then run the build ("npm run build")

What is expected?

Build should complete successfully

What is actually happening?

Error:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[NS] is not a function
    at childCompiler.runAsChild (C:\users\SeanK\Repositories\BDEasy\src\ui-vue\node_modules\mini-css-extract-plugin\dist\loader.js:148:15)

[Akryum]

The old vue-cli package (version2.x) doesn't have the create command, but the new @vue/cli package (version 3.0) does. So I don't really understand what you are doing.

[SeanKilleen]

@Akryum I'm trying to get started with a vue app from the CLI following what I think is the recommended wizard.

Running npm view vue-cli version returns 2.9.6. are you saying that vue-cli does not have the create command until 3.0? If so, I'm pretty confused too.

[SeanKilleen]

Ah I see -- I may be referencing the wrong package version above. Also possible that I have vue-cli and @vue/cli conflicting. I'll spin up a fresh node install and see if I can recreate with only @vue/cli installed.

[SeanKilleen]

I figured out what that particular issue was, but the problem still exists.

I had competing versions of node installed on my system and one was incorrectly taking precedence, thus using an old/incorrect package for the vue command.

Steps to resolve the conflicting versions of node:

• Run nvm list and uninstall all versions
• Run vue. Notice that it was still apparently installed.
• Check my chocolatey packages via choco list -lo
• Notice that nodejs and yarn were apparently installed that way, not sure why
• Uninstall them via chocolatey.
• Verify that node will not run and appears to be uninstalled.
• Reinstall node v8.11.3 via nvm and select it via 'nvm use 8.11.3`
• Verify that the vue command is not available

So, at that point, I have a fresh install of node 8.11.3 via nvm, with npm 5.6.0.

• Run npm install -g @vue/cli
• Run vue create ui-vue
• Select manual options (I also then tried with standard options, etc.)
• Select all options except ui tests

My output is below:

Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

• The folder is created and things complete.
• I run npm install. It completes.
• I run npm run build .

I see:

error in ./src/App.vue?vue&type=style&index=0&lang=scss&
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[NS] is not a function

I then also tried explicitly installing the services, just to be sure:

• npm install -g @vue/cli-service-global

I then repeated the process. Still no luck.

I also attempted to select the "standard" option (babel, eslint). I also received the same result.

I will record my screen to ensure I'm not missing anything in my reproduction.

[SeanKilleen]

Here is an animated gif of me going through the whole process, so that you can see all the version numbers, what I select, and anything else I do throughout the whole process. Hoping I'm doing something silly.

[vpeti]

@SeanKilleen I had the same situation. Using cmd instead of powershell solved it.

[SeanKilleen]

@vpeti you appear to be correct -- using cmd.exe, I am able to run npm run build without error. Thanks for the great tip!

I'm not sure what the difference is here. I consider it a viable workaround, but given that all my consoles default to powershell in Win10, I'd love to know if there's anything that can be done to fix this piece for those using a powershell console on Windows.

[sodatea]

So according to https://github.com/vuejs/vue-cli/issues/1775#issuecomment-416644185
It seems to be an upstream issue in mini-css-extract-plugin: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/73

[alvarigno]

Hi, I resolved it, I deleted "node_modules" and wrote "npm install" again. That works for me.

[ahmadtech199]

Hi, i find another solved about this problem:
1- remove vue-cli from terminal:
npm uninstall vue-cli -g or yarn global remove vue-cli
2- add owner in local (write in terminal) :
whoami ,look ...the name now shows like this john note: john name is fake , don't forget that ;)
3- write in terminal:
sudo chown -R john /usr/local/
4-You are asked password Password: now you don't see password .. don't worry ;)
go ahead write password
5- write in teminal: ls -la /usr/local/lib/node_modules/
now .. added owner new in local (like this): drwxr-xr-x 5 john wheel 160 Jul 22 20:29
6- now can you add vue cli in terminal: npm install -g @vue/cli
7- in final, can you create project like this: vue create hello-world

[LinusBorg]

This seems to be outdated and resolved upstream