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

[chasebank]

Version

3.0.0-rc.3

Reproduction link

https://github.com/vuejs/vue-cli

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.

[LinusBorg]

What does The following command return in your command line?

echo $NODE_ENV

[chasebank]

Thanks for the reply Linus!

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

[LinusBorg]

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.

[chasebank]

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

LOL! I knew you were going to say that

[Akryum]

What is your node version?

[chasebank]

@Akryum 8.11.2

[Ravadre]

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.

[chasebank]

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]

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.

[Akryum]

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 fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" 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]

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 fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" 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 fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" 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.