Webpack 2 doesn't use .web files

mamereu commented 8 years ago

The following error comes out using angular-cli: ng serve ...


Module not found: Error: Can't resolve 'utf8-length' in 'D:\angular2\ng2-tabs4\node_modules\arangojs\lib'
 @ ./~/arangojs/lib/connection.js 41:38-60
 @ ./~/arangojs/lib/database.js
 @ ./~/arangojs/lib/index.js
 @ ./src/app/tabs.service.ts
 @ ./src/app/app.component.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/arangojs/lib/util/request.js
Module not found: Error: Recursion in resolving
Stack:
  resolve: (D:\angular2\ng2-tabs4\node_modules\arangojs\lib\util) linkedlist
  new-resolve: (D:\angular2\ng2-tabs4\node_modules\arangojs\lib\util) linkedlist
  parsed-resolve: (D:\angular2\ng2-tabs4\node_modules\arangojs\lib\util) linkedlist module
  described-resolve: (D:\angular2\ng2-tabs4\node_modules\arangojs\lib\util) linkedlist module
  raw-module: (D:\angular2\ng2-tabs4\node_modules\arangojs\lib\util) linkedlist
  module: (D:\angular2\ng2-tabs4\node_modules\arangojs\lib\util) linkedlist
  resolve: (D:\angular2\ng2-tabs4\node_modules) ./linkedlist
  new-resolve: (D:\angular2\ng2-tabs4\node_modules) ./linkedlist
  parsed-resolve: (D:\angular2\ng2-tabs4\node_modules) ./linkedlist
  described-resolve: (D:\angular2\ng2-tabs4\node_modules) ./linkedlist
  relative: (D:\angular2\ng2-tabs4\node_modules\linkedlist)
  described-relative: (D:\angular2\ng2-tabs4\node_modules\linkedlist)
  directory: (D:\angular2\ng2-tabs4\node_modules\linkedlist)
  existing-directory: (D:\angular2\ng2-tabs4\node_modules\linkedlist)
  resolve: (D:\angular2\ng2-tabs4\node_modules\linkedlist) ./
  new-resolve: (D:\angular2\ng2-tabs4\node_modules\linkedlist) ./
  parsed-resolve: (D:\angular2\ng2-tabs4\node_modules\linkedlist) . directory
  described-resolve: (D:\angular2\ng2-tabs4\node_modules\linkedlist) . directory
  relative: (D:\angular2\ng2-tabs4\node_modules\linkedlist)  directory
  described-relative: (D:\angular2\ng2-tabs4\node_modules\linkedlist)  directory
  directory: (D:\angular2\ng2-tabs4\node_modules\linkedlist)  directory
  existing-directory: (D:\angular2\ng2-tabs4\node_modules\linkedlist)  directory
  resolve: (D:\angular2\ng2-tabs4\node_modules\linkedlist) ./ directory
  new-resolve: (D:\angular2\ng2-tabs4\node_modules\linkedlist) ./ directory
  parsed-resolve: (D:\angular2\ng2-tabs4\node_modules\linkedlist) . directory
 @ ./~/arangojs/lib/util/request.js 83:18-39
 @ ./~/arangojs/lib/connection.js
 @ ./~/arangojs/lib/database.js
 @ ./~/arangojs/lib/index.js
 @ ./src/app/tabs.service.ts
 @ ./src/app/app.component.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main`
Please note that the "not found" error appears in other project configurations too, but angular-cli provides the complete error stack and makes it easy to reproduce the problem.

pluma commented 8 years ago

Are you using arangojs in Node or in the browser? The utf8-length module should only be necessary for the browser version which we provide a UMD bundle for.

mamereu commented 8 years ago

@pluma thank you, the UMD bundle did the trick!!! Some clarification about the context. I am just starting a web app in angular2 and there is a service that must extract some data from arangod and pass an array of objects to other components. I thought that the arangodb Http Api would be the tool of choice, with no need to import arangojs. Alas, in my understanding, using the Http Cursor Api is not easy at all because of:

the CORS issues ("XMLHttpRequest cannot load ...Response to preflight request doesn't pass access control check...) that raise the questions about the control of the "preflight checks" at the application level
the request must have a body, containing the AQL query, and in this case the Http Api requires a content-length header and if this is missing or wrong the request is rejected by the arangodb server; pity that specifying the content-length is not that easy...

Of course a foxx microservice could be implemented for any routine query, providing and endpoint for a GET request. However, it is always better having more than one choice. The arangojs version pointed by @pluma responds perfectly to my simple use case. For anyone else interested in the solution, the details of its use in typescript are shown below:

const arangojs = require('../arangojs.min') /* arangojs must be removed in the package.json dependencies and in the node_modules. The file arangojs.min.js is can be found on the github page of arangojs. No other config with module loaders is needed if the project is managed by angular-cli */_
let db = new arangojs.Database({ url: 'http://192.168.1.65:8530', databaseName: 'feeds' })
let aql=arangojs.aql;
let search="%SHADOW%"
 db.query(aql`FOR r in marvel_vertices FILTER LIKE(r.name,${search} ) RETURN {name:r.name,realname:r.realName}`)
      .then(res =>  res._result.forEach(hero => console.log(hero)) );
----
Object {name: "SHADOWOMAN", realname: "JILLIAN W"}
Object {name: "TIMESHADOW", realname: null}
Object {name: "SHADOWCASTER", realname: ""}
Object {name: "TOWER OF SHADOWS 5", realname: null}
Object {name: "SHADOWCAT 2013", realname: null}
Object {name: "SHADOW KING", realname: "AMAHL FA"}
Object {name: "SHADOWKNIGHT", realname: "RANDALL"}
Object {name: "SHADOWCAT", realname: "KATHERINE "}
Object {name: "HOUSE OF SHADOWS", realname: null}
Object {name: "SHADOW-HAND", realname: "LI CHUN"}
Object {name: "SHADOWCAT | MUTANT X", realname: null}
Object {name: "SHADOW KING | MUTANT", realname: null}
Object {name: "SHADOW QUEEN", realname: "SHIALMA"}

pluma commented 8 years ago

@mamereu Have you looked into the CORS section in the ArangoDB documentation? https://docs.arangodb.com/3.1/HTTP/General/index.html#cross-origin-resource-sharing-cors-requests

If you're seeing CORS issues with the cursor API despite having configured ArangoDB correctly, you might want to file an issue on the ArangoDB repo about that.

If you're still seeing the utf8-length error when using the GitHub version of arangojs that means the module loader is clever enough to load the right modules for building your web bundle and we might want to move the browser dependencies from devDependencies into the regular dependencies.

mamereu commented 8 years ago

@pluma Yes, I read the CORS section and especially after reading that "clients may issue a preflight request via an additional HTTP OPTIONS request" I came to the conclusion that the problems I encountered do not depend on arangodb but on the inability of the client (@angular/http) to issue the above preflight request (or may it's my inability to properly use @angular/http ?). So, if I had to file an issue on this subject it would be on the angular2 repo, as a new feature request.

About the utf8-length error, after dropping the node module, it has completely disappeared. Look at the code of my previous comment: on a first look, one would see no difference with a node/javascript application: actually, apart from the require line, the only difference is that db.query does not return a cursor but an array. Also, consider that I did nothing to convince the module loader, as suggested in http://stackoverflow.com/questions/38465164/using-arangojs-driver-in-angular2-web-application , because this task is finely accomplished by angular-cli. I don't know what would happen if one had to manually configure systemjs or webpack...

About including the browser dependencies into the regular dependencies I think it would be great, especially with a parallel implementation of the arangojs.d,ts file, so that for an angular2/typescript application arangojs could be installed with "npm install @types/arangojs".

pluma commented 8 years ago

The dependencies for the browser version are now included in the regular dependencies but you will of course still need to load core-js or an equivalent to polyfill older browsers. If angular-cli correctly handles .web.js files like webpack does, this should be sufficient for using the npm version of arangojs for the browser.

mamereu commented 8 years ago

Still getting a "module not found error", this time from request.js, line 91, 'Cannot find module "linkedlist"', with angular-cli@1.0.0-beta.21 e arangojs@5.4.1

pluma commented 8 years ago

@mamereu That's weird. "linkedlist" is specified as a dependency. Did you install the module from npm or directly from GitHub?

mamereu commented 8 years ago

The arangojs module was installed with npm. This is the shell ng serve ... ERRROR in ./~/arangojs/lib/util/request.js Module not found: Error: Recursion in resolving Stack: resolve: (D:\angular2-varie\ng2-tabs\node_modules\arangojs\lib\util) linkedlist new-resolve: (D:\angular2-varie\ng2-tabs\node_modules\arangojs\lib\util) linkedlist parsed-resolve: (D:\angular2-varie\ng2-tabs\node_modules\arangojs\lib\util) linkedlist module described-resolve: (D:\angular2-varie\ng2-tabs\node_modules\arangojs\lib\util) linkedlist module raw-module: (D:\angular2-varie\ng2-tabs\node_modules\arangojs\lib\util) linkedlist module: (D:\angular2-varie\ng2-tabs\node_modules\arangojs\lib\util) linkedlist resolve: (D:\angular2-varie\ng2-tabs\node_modules) ./linkedlist new-resolve: (D:\angular2-varie\ng2-tabs\node_modules) ./linkedlist parsed-resolve: (D:\angular2-varie\ng2-tabs\node_modules) ./linkedlist described-resolve: (D:\angular2-varie\ng2-tabs\node_modules) ./linkedlist relative: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) described-relative: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) directory: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) existing-directory: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) resolve: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) ./ new-resolve: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) ./ parsed-resolve: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) . directory described-resolve: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) . directory relative: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) directory described-relative: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) directory directory: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) directory existing-directory: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) directory resolve: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) ./ directory new-resolve: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) ./ directory parsed-resolve: (D:\angular2-varie\ng2-tabs\node_modules\linkedlist) . directory @ ./~/arangojs/lib/util/request.js 91:18-39 @ ./~/arangojs/lib/connection.js @ ./~/arangojs/lib/database.js @ ./~/arangojs/lib/index.js @ ./src/app/tab.service.ts @ ./src/app/app.component.ts @ ./src/app/index.ts @ ./src/main.ts @ multi main

This is the chrome console: request.js:91Uncaught Error: Cannot find module "linkedlist"(…)webpackMissingModule @ request.js:91(anonymous function) @ request.js:91(anonymous function) @ main.bundle.js:67799__webpack_require__ @ bootstrap 61489dc…:52(anonymous function) @ connection.js:33__webpack_require__ @ bootstrap 61489dc…:52(anonymous function) @ database.js:23__webpack_require__ @ bootstrap 61489dc…:52(anonymous function) @ index.js:3__webpack_require__ @ bootstrap 61489dc…:52(anonymous function) @ app.component.ts:25__webpack_require__ @ bootstrap 61489dc…:52(anonymous function) @ main.bundle.js:49062__webpack_require__ @ bootstrap 61489dc…:52(anonymous function) @ app.module.ts:20__webpack_require__ @ bootstrap 61489dc…:52(anonymous function) @ src async:7__webpack_require__ @ bootstrap 61489dc…:52(anonymous function) @ main.bundle.js:100171__webpack_require__ @ bootstrap 61489dc…:52webpackJsonpCallback @ bootstrap 61489dc…:23(anonymous function) @ main.bundle.js:1 zone.js:1382XHR finished loading: GET "http://localhost:4200/sockjs-node/info?t=1479979717351".scheduleTask @ zone.js:1382ZoneDelegate.scheduleTask @ zone.js:245Zone.scheduleMacroTask @ zone.js:171(anonymous function) @ zone.js:1405send @ VM5150:3AbstractXHRObject._start @ abstract-xhr.js:132(anonymous function) @ abstract-xhr.js:21ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154ZoneTask.invoke @ zone.js:335data.args.(anonymous function) @ zone.js:970

pluma commented 8 years ago

Okay, wait a second. That means it's using the node version of util/request.js, not util/request.web.js. I'll have to see whether there's a way to make angular-cli use the correct file like webpack does.

pluma commented 8 years ago

It seems angular-cli uses webpack 2 so this is probably not unique to angular-cli. I'll have to investigate how to make this work with webpack 2 defaults.

shomodj commented 7 years ago

  resolve: {
    alias: {
      linkedlist: path.resolve(__dirname, './node_modules/linkedlist/lib/linkedlist.js')
    }
  },

this worked for me, nodejs+webpack2.2

pluma commented 7 years ago

@shomodj that works when building arangojs directly but the .web.js extension also worked when using arangojs as a dependency via Webpack 1 (Webpack would prefer .web.js files over .js files by default).

pluma commented 7 years ago

Changing resolve.extensions seems to solve this but I'd like a more permanent solution that doesn't rely on library users modifying their config.

For the time being I've added an explicit note in the README: https://github.com/arangodb/arangojs/commit/48292155a7385165cfd153ab22a8c8c23de2695b

pluma commented 7 years ago

Fixed via 20f3771. Thanks to @phpnode and @gaearon via Twitter.

dan-kez commented 7 years ago

I'm also experiencing the same issue as @mamereu with the following config on "arangojs": "^4.5.1".

This is not meant to be run in the browser (e.g. Angular). I am trying to implement this in node on the server.

Config:

   2 module.exports = {
   3   entry: './handler.js',
   4   target: 'node',
   5   module: {
   6     loaders: [{
   7       test: /\.js$/,
   8       loaders: ['babel-loader'],
   9       include: __dirname,
  10       exclude: /node_modules/,
  11     }]
  12   }
  13 };

Error:

     Asset    Size  Chunks                    Chunk Names                                                                                                                                          [18/4696]handler.js  593 kB       0  [emitted]  [big]  main
   [0] ./node_modules/graphql/error/index.js 825 bytes {0} [built]
  [72] ./handler.js 1.71 kB {0} [built]
  [73] ./node_modules/babel-runtime/core-js/object/keys.js 92 bytes {0} [built]
  [74] ./node_modules/core-js/library/fn/object/keys.js 102 bytes {0} [built]
 [100] ./node_modules/babel-runtime/core-js/json/stringify.js 95 bytes {0} [built]
 [101] ./node_modules/core-js/library/fn/json/stringify.js 242 bytes {0} [built]
 [102] ./node_modules/graphql/index.js 18.3 kB {0} [built]
 [103] ./node_modules/graphql/graphql.js 3.11 kB {0} [built]
 [107] ./node_modules/graphql/type/index.js 7.32 kB {0} [built]
 [108] ./node_modules/graphql/language/index.js 2.64 kB {0} [built]
 [109] ./node_modules/graphql/execution/index.js 726 bytes {0} [built]
 [110] ./node_modules/graphql/subscription/index.js 412 bytes {0} [built]
 [113] ./node_modules/graphql/validation/index.js 6.87 kB {0} [built]
 [124] ./node_modules/arangojs/lib/index.js 662 bytes {0} [built]
 [125] ./node_modules/arangojs/lib/database.js 11.6 kB {0} [built]
    + 130 hidden modules

ERROR in ./node_modules/arangojs/lib/connection.js
Module not found: Error: Can't resolve 'utf8-length' in '/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib'
 @ ./node_modules/arangojs/lib/connection.js 41:38-60
 @ ./node_modules/arangojs/lib/database.js
 @ ./node_modules/arangojs/lib/index.js
 @ ./handler.js

ERROR in ./node_modules/arangojs/lib/util/request.js
Module not found: Error: Recursion in resolving
Stack:
  resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist
  new-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist
  parsed-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist module
  described-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist module
  raw-module: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist
  module: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist
  resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules) ./linkedlist
  new-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules) ./linkedlist
  parsed-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules) ./linkedlist
  described-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules) ./linkedlist
  relative: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)
  described-relative: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)
  directory: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)
  existing-directory: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)
  resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) ./
  new-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) ./
  parsed-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) . directory
  described-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) . directory
  relative: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)  directory
  described-relative: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)  directory
  directory: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)  directory
  existing-directory: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)  directory
  resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) ./ directory
  new-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) ./ directory
  parsed-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) . directory
 @ ./node_modules/arangojs/lib/util/request.js 83:18-39
 @ ./node_modules/arangojs/lib/connection.js
 @ ./node_modules/arangojs/lib/database.js
 @ ./node_modules/arangojs/lib/index.js
 @ ./handler.js

When I upgrade to "arangojs": "^5.7.0" I still see the following error:

ERROR in ./node_modules/arangojs/lib/util/request.node.js
Module not found: Error: Recursion in resolving
Stack:
  resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist
  new-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist
  parsed-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist module
  described-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist module
  raw-module: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist
  module: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/arangojs/lib/util) linkedlist
  resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules) ./linkedlist
  new-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules) ./linkedlist
  parsed-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules) ./linkedlist
  described-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules) ./linkedlist
  relative: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)
  described-relative: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)
  directory: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)
  existing-directory: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)
  resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) ./
  new-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) ./
  parsed-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) . directory
  described-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) . directory
  relative: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)  directory
  described-relative: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)  directory
  directory: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)  directory
  existing-directory: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist)  directory
  resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) ./ directory
  new-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) ./ directory
  parsed-resolve: (/Users/dkez/projects/serverless-cocktail-graphql/node_modules/linkedlist) . directory
 @ ./node_modules/arangojs/lib/util/request.node.js 92:18-39
 @ ./node_modules/arangojs/lib/util/request.js
 @ ./node_modules/arangojs/lib/connection.js
 @ ./node_modules/arangojs/lib/database.js
 @ ./node_modules/arangojs/lib/index.js
 @ ./handler.js

I was able to fix this with the following stop gap (from https://github.com/anandanand84/technicalindicators/issues/40 )

  resolve: {
    ...
    alias: {
      linkedlist: 'linkedlist/lib/linkedlist.js',
    },
  },

arangodb / arangojs

Webpack 2 doesn't use .web files #356