Unable to call npm run build using vue-cli in production

Question

Expected Behavior

npm run build should create the production dist bundle that I can serve on a given machine

Current Behavior

Despite being able to build locally, whenever I try to run npm run build on an external resource (such as a Digital Ocean VM or Heroku machine), I receive the below error.

Failure Logs

root@nodejs-lazyq-dev:/var/www/html/Vue# npm run build

> vue-material-dashboard-pro@1.0.0 build /var/www/html/Vue
> vue-cli-service build


⠴  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                   09:29:00

 error  in ./src/assets/scss/_material-dashboard.scss

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "md/plugins/fullCalendar";
^
      File to import not found or unreadable: md/plugins/fullCalendar.
      in /var/www/html/Vue/src/assets/scss/_material-dashboard.scss (line 59, column 1)
    at runLoaders (/var/www/html/Vue/node_modules/webpack/lib/NormalModule.js:286:20)
    at /var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/var/www/html/Vue/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/var/www/html/Vue/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.done [as callback] (/var/www/html/Vue/node_modules/neo-async/async.js:7974:18)
    at options.error (/var/www/html/Vue/node_modules/node-sass/lib/index.js:294:32)

 @ ./src/material-dashboard.js 17:0-48
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-material-dashboard-pro@1.0.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-material-dashboard-pro@1.0.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!     /root/.npm/_logs/2018-09-03T09_29_01_030Z-debug.log

Additionally, I have tried running npm rebuild node-sass, updated the material-dashboard.css file to include the underscore: _material-dashboard.css, passing --production in npm install --production, but am having no luck.

nodejs version: v8.11.4 npm version: v5.6.0

I've been trying to solve this for a few hours now but am not having any luck. I don't understand why it works locally but not when on another production machine.

@Chris so I double-checked and just commented out this import and it built successfully. Now I'm even more confused though because the file IS there and it builds locally. What the heck? — Lukon, Sep 03 '18 at 20:33
I would guess that your file is perhaps not checked in or is missing during your build/transfer/copy process. — Chris, Sep 03 '18 at 20:57

score 0 · Answer 1 · answered Oct 23 '18 at 16:06

This happens because of a spelling mistake (wrong case) in the import statement of this Vue UI library. The file is named "fullcalendar" while the import is called by "fullCalendar" (notice the capital "C"). When you fix this (make the capital "C" simple in the import statement) it will run the "npm run prod" command successfully. It should be noted that, for me, this did not occur in the windows environment for some reason, but only occurs in the Linux environment.

Unable to call npm run build using vue-cli in production

Expected Behavior

Current Behavior

Failure Logs

1 Answers1