Vue-cli: Module build failed: TypeError: this[NS] is not a function

Created on 6 Jul 2018 · 23Comments · Source: vuejs/vue-cli

Version

3.0.0-rc.3

Reproduction link

Steps to reproduce

I'm getting this error when executing the build command.

I've reduced it back to a clean project created with a fresh install of the cli. The error appears to throw on App.vue and HelloWorld.vue

What is expected?

No errors

What is actually happening?

Errors

Here's the full body of the error

 ERROR  Failed to compile with 2 errors                                                                         23:09:16
 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
    at childCompiler.runAsChild (C:\users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\mini-css-extract-plugin\dist\loader.js:148:15)
    at compile (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\webpack\lib\Compiler.js:296:11)
    at hooks.afterCompile.callAsync.err (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\webpack\lib\Compiler.js:553:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\tapable\lib\Hook.js:35:21)
    at compilation.seal.err (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\webpack\lib\Compiler.js:550:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.optimizeAssets.callAsync.err (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\webpack\lib\Compilation.js:1283:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\webpack\lib\Compilation.js:1274:32)
    at _err1 (eval at create (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1)
    at C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\uglifyjs-webpack-plugin\dist\index.js:282:11
    at _class.runTasks (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\uglifyjs-webpack-plugin\dist\uglify\index.js:63:9)
    at UglifyJsPlugin.optimizeFn (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\uglifyjs-webpack-plugin\dist\index.js:195:16)
    at _fn0.then._result0 (eval at create (C:\Users\chase\desktop\dev\vue-cordova-test\one-more-time\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

 @ ./src/App.vue?vue&type=style&index=0&lang=scss 1:0-463 1:479-482 1:484-944 1:484-944
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./src/main.js

I noticed the mention of "mini-css-extract-plugin" and found this issue but haven't been able to resolve the issue.

I searched package-lock and noticed that the plugin is a dependency of vue cli-service, and hoping I might find some solution here. The only other thing I could say is that I'm on Windows 10.

cannot reproduce cli-service build

Source

chasebank

Most helpful comment

I found it's a case sensitive issue in the path. I talked about it in this issue: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/73#issuecomment-416643790

Aymkdn on 28 Aug 2018

👍3

All 23 comments

What does The following command return in your command line?

echo $NODE_ENV

LinusBorg on 6 Jul 2018

Thanks for the reply Linus!

That returns nothing, which I'm hoping is a major clue?

chasebank on 6 Jul 2018

It would have been a clue if it returns anything but nothing.

The discussion in the issue that you linked to makes it seem that this error can happen if the config includes the loader for this plugin, but not the plugin itself, and my suspicion was that this may be happening if you had a bad value for NODE_ENV added to your env.

Which you don't, so there goes that idea.

LinusBorg on 6 Jul 2018

It would have been a clue if it returns anything but nothing.

LOL! I knew you were going to say that

chasebank on 6 Jul 2018

What is your node version?

Akryum on 7 Jul 2018

@Akryum 8.11.2

chasebank on 7 Jul 2018

I am facing similar issue. On 1 machine I can both serve and build projects, on the other - only serve, build fails with the same errors as above.

I removed all vue packages from global to make sure I am running the same bits, but it didn't help.

What I have found out, is that npm run build doesn't work, however, when I do node .\node_modules\@vue\cli-service\bin\vue-cli-service.js build everything is fine - dist package is built.

Any ideas how those 2 commands differ and how can I debug it further?

On the machine that only workaround works, node ver. is 10.6.0, npm ver. is 6.1.0. On the second one: node 10.4.1, npm is 6.1.0.

Ravadre on 7 Jul 2018

Possible duplicate also with Vue. I can’t read it though... to tell how close it is.

But interesting that he is experiencing it on a Mac

chasebank on 7 Jul 2018

The only other things I've been able to find so far are this and this which suggest that using Object.assign can cause conflicts between production and dev plugin configs. So that even if the plugin and loader is correctly setup in one, it may be lost in the other.

There's also a person in that mini-css-extract-plugin issue that encountered this error with vue-loader, and solved it by "adding new MiniCssExtractPlugin() in the plugins array". But shouldn't that already be handled by the CLI?

Is it possible there's some type of conflict in how the CLI is building the template, maybe related to Object.assing?

The CLI options I'm using are

Babel
Progressive Web App (PWA) Support
Router
Vuex
CSS Pre-processors > SASS
Dedicated config file

Converting the build command from "build": "vue-cli-service build" to "build": "node .\node_modules\@vue\cli-service\bin\vue-cli-service.js build" like @Ravadre mentioned makes the command run without issue.

chasebank on 8 Jul 2018

Can't reproduce with Window 10 / Node 10.6.0:

D:\Mes documents\GitHub>vue --version
3.0.0-rc.3

D:\Mes documents\GitHub>node --version
v10.6.0

D:\Mes documents\GitHub>vue create test-1775


Vue CLI v3.0.0-rc.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v3.0.0-rc.3
✨  Creating project in D:\Mes documents\GitHub\test-1775.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.6.0
(node:19792) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.


success Saved lockfile.
Done in 54.97s.
[-/1] ⢀ waiting...
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.6.0
(node:20316) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[1/4] Resolving packages...
[2/4] Fetching packages...




success Saved lockfile.
Done in 23.36s.
[-/1] ⠠ waiting...
⚓  Running completion hooks...
[-/1] ⠠ waiting...
🎉  Successfully created project test-1775.
👉  Get started with the following commands:

 $ cd test-1775
 $ yarn serve


D:\Mes documents\GitHub>cd test-1775

D:\Mes documents\GitHub\test-1775>yarn build
yarn run v1.6.0
(node:21300) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
$ vue-cli-service build

/  Building for production...

 DONE  Compiled successfully in 9993ms                                                                                                        18:43:47
  File                                      Size             Gzipped

  dist\js\chunk-vendors.77c34716.js         108.73 kb        37.62 kb
  dist\js\app.a95211ed.js                   5.59 kb          2.08 kb
  dist\service-worker.js                    0.94 kb          0.54 kb
  dist\precache-manifest.4a7aa5223103808    0.46 kb          0.24 kb
  c7e68f8221b87a60a.js
  dist\css\app.f0fcc334.css                 0.42 kb          0.26 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.

Done in 18.28s.

Akryum on 8 Jul 2018

Can't reproduce on Windows 10 / Node 8.11.2 either:

D:\Mes documents\GitHub>vue --version
3.0.0-rc.3

D:\Mes documents\GitHub>node --version
v8.11.2

D:\Mes documents\GitHub>vue create test-1775-2


Vue CLI v3.0.0-rc.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v3.0.0-rc.3
✨  Creating project in D:\Mes documents\GitHub\test-1775-2.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.6.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...

success Saved lockfile.
Done in 45.59s.

🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.6.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 25.09s.

⚓  Running completion hooks...
[-/1] ⠄ waiting...
🎉  Successfully created project test-1775-2.
👉  Get started with the following commands:

 $ cd test-1775-2
 $ yarn serve


D:\Mes documents\GitHub>cd test-1775-2

D:\Mes documents\GitHub\test-1775-2>yarn build
yarn run v1.6.0
$ vue-cli-service build

-  Building for production...

 DONE  Compiled successfully in 10373ms                                                                                                       18:53:46
  File                                      Size             Gzipped

  dist\js\chunk-vendors.77c34716.js         108.73 kb        37.62 kb
  dist\js\app.5ed364ce.js                   5.59 kb          2.08 kb
  dist\service-worker.js                    0.95 kb          0.54 kb
  dist\precache-manifest.0b8124680329701    0.46 kb          0.24 kb
  0a7d5f1e8b338d82d.js
  dist\css\app.f0fcc334.css                 0.42 kb          0.26 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.

Done in 17.44s.

Akryum on 8 Jul 2018

I appreciate you leaving the issue open for now @Akryum

But since we can't make much sense of this otherwise, I'll just reiterate what @Ravadre asked: What is the difference between running npm run build verses node .\node_modules\@vue\cli-service\bin\vue-cli-service.js build

Do we have any ideas what could possibly cause the latter to work perfectly, while the default command does not?

chasebank on 8 Jul 2018

@chasebank the former makes npm execute the same command as the latter, so unless something random is wrong with your npm installation I don't see how that could really. Have an influence.

LinusBorg on 9 Jul 2018

Going to go ahead and close this.

There's enough sporadic people hitting this in recent months, that I do think there's an issue. But I'm confident that it's not Vue.

I went out of town and worked on an old laptop that I haven't worked on in ages. I ran updates on Node and all global packages, and then started getting the same exact error. So, there's a severe conflict somewhere, with something... but I got fed up and decided to go Nuclear. I reformatted everything.

I followed this guide by Dave Rupert and my whole dev environment seems better for it.

Haven't seen this error since.

chasebank on 23 Jul 2018

I ran into this same issue, and it turned out that my custom vue.config.js line-endings had changed to CRLF at one point. I converted back to LF, and the build ran like a charm.

bnovick on 17 Aug 2018

What is the difference between running npm run build verses node .[email protected] build

npm run executes vue-cli-service.cmd that adds full path.

Works:

cd C:\My\Project\Dir
node .\node_modules\@vue\cli-service\bin\vue-cli-service.js build

Fails:

cd C:\My\Project\Dir
node C:\My\Project\Dir\node_modules\@vue\cli-service\bin\vue-cli-service.js build

dermeister0 on 22 Aug 2018

Works:

Command line: "C:\Program Files (x86)\Jenkins\tools\jenkins.plugins.nodejs.tools.NodeJSInstallation\node-8.11.1\node.exe" C:\Temp\F\node_modules\@vue\cli-service\bin\vue-cli-service.js build
Current directory: C:\Temp\F\

Fails:

Command line: "C:\Program Files (x86)\Jenkins\tools\jenkins.plugins.nodejs.tools.NodeJSInstallation\node-8.11.1\node.exe" C:\TEMP\F\node_modules\.bin\\..\@vue\cli-service\bin\vue-cli-service.js build
Current directory: C:\Temp\F\

dermeister0 on 22 Aug 2018

@chasebank @dermeister0 on Windows using cmd instead of powershell solved this for me

vpeti on 26 Aug 2018

👍1

@vpeti Interesting observation. I randomly hit this error on three different computers all of the sudden, so I knew it wasn't my set up. I was indeed obviously using Powershell though.

Now that I reformatted and am using Linux on Windows (obv. not Powershell), and everything works, that could technically be consistent with Powershell having something to do with it.

chasebank on 26 Aug 2018

@vpeti This indeed works...

P-de-Jong on 28 Aug 2018

I found it's a case sensitive issue in the path. I talked about it in this issue: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/73#issuecomment-416643790

Aymkdn on 28 Aug 2018

👍3

@Aymkdn, @vpeti
I confirm.

rem CMD works.
C:\>cd \temp\1\f
C:\TEMP\1\F>npm run build

# PowerShell with correct register works.
PS C:\>cd \TEMP\1\F
PS C:\TEMP\1\F>npm run build

# PowerShell with different register fails.
PS C:\>cd \temp\1\f
PS C:\temp\1\f>npm run build

dermeister0 on 29 Aug 2018

👍1

I also encountered this problem in the new version of vue-cli3.0.1, windows7 node: v8.11.4 yarn 1.9.2 running the yarn build will fail to package, the above error message appears. Hope to solve, thank you!