Search code examples
javascriptnpmwebpackdependencies

updating code in JS node dependency package leads to compile bug (here in npm/Vue.js)


I have created a Js library that I want to use in some projects. It's not completely stable and has a few bugs I want to work on. But how is it meant to develop a library, when HMR does not work with dependencies? Use case:

  • create a new Vue project: vue create fooproject, cd into that directory.
  • add a local javascript module as dependency
    • you can download my library if you want somewhere in your ~/tmp directory; Then add it using: npm install --save ~/tmp/vue-extensions # or where your lib lives.
  • Your node_modules now should have a symlink to that directory.
  • Run npm run serve - it compiles the Vue project and runs the dev webserver. Leave that terminal open.
  • Now change some code in the local vue-extensions library - just add a whitespace anywhere and save.
  • Nothing happens - as the lib itself was not compiled with the change. Imports search in the dist/ directory. This is normal AFAIK.
  • Now, go to the vue-extensions dir and run npm run build - It should build the lib and return qith success.
  • In this moment, the first terminal should change: Webpack should detect the code change and trigger HMR - it breaks in the first place - I suppose because vue-extensionpoints.common.js was temporarily deleted (before recreating) and webpack doesn't find it any more:
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: ENOENT: no such file or directory, open '/home/christian/vue-extensionpoints/dist/vue-extensionpoints.common.js'

 @ ./src/main.js 7:0-50 10:8-23
 @ multi (webpack)-dev-server/client?http://192.168.4.3:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

This is no problem, just restart the build: npm run serve

And now is the problem: It breaks again, with many errors:

error: Unexpected newline between function and ( of function call (no-unexpected-multiline) at ../../Projekte/vue-extensionpoints/dist/vue-extensionpoints.common.js:88:10:
  86 | /******/ })
  87 | /************************************************************************/
> 88 | /******/ ({
     |          ^
  89 | 
  90 | /***/ "06cf":
  91 | /***/ (function(module, exports, __webpack_require__) {


error: 'exports' is defined but never used (no-unused-vars) at ../../Projekte/vue-extensionpoints/dist/vue-extensionpoints.common.js:135:25:
  133 | 
  134 | /***/ "1d80":
> 135 | /***/ (function(module, exports) {
      |                         ^
  136 | 
  137 | // `RequireObjectCoercible` abstract operation
  138 | // https://tc39.github.io/ecma262/#sec-requireobjectcoercible


error: 'exports' is defined but never used (no-unused-vars) at ../../Projekte/vue-extensionpoints/dist/vue-extensionpoints.common.js:370:25:
  368 | 
  369 | /***/ "5135":
> 370 | /***/ (function(module, exports) {
      |                         ^
  371 | 
  372 | var hasOwnProperty = {}.hasOwnProperty;
  373 | 


error: 'exports' is defined but never used (no-unused-vars) at ../../Projekte/vue-extensionpoints/dist/vue-extensionpoints.common.js:417:25:
  415 | 
  416 | /***/ "5c6c":
> 417 | /***/ (function(module, exports) {
      |                         ^
  418 | 
  419 | module.exports = function (bitmap, value) {
  420 |   return {


error: 'exports' is defined but never used (no-unused-vars) at ../../Projekte/vue-extensionpoints/dist/vue-extensionpoints.common.js:603:25:

[...and so on...]

Just break with Ctrl+C and run npm run serve again, and it works.

A npm cache clear [--force] does not help.

How the heck am I supposed to change a library and reload it with HMR when I ALWAYS have to rebuild the lib, and stop and restart the main server twice? This makes developement impossible, except you have too much time and patience for things like that.

There must be an (obviously) easier way to accomplish library developing, right?

Thanks in advance.


Solution

  • I hate it. Again. After days of struggle. Almost EVERY single time I post a question at Stackoverflow, I find the answer myself a few minutes later...

    I just deleted the /dist/ folder in the lib. And it worked.