Referencing Scripts in other unoproj files/ unoproj structure

[alain]

##Testing InfiniteScroller with ApolloClent, Fuse, Graphqql with NFuse to get apollo-client into commonjs format.

Repo: https://github.com/aarmand/InfiniteScrollerNFuse/
Based on https://github.com/Duckers/FusePlayground/tree/master/Experiments/InfiniteScroller, just added apollo-client and used nfuse to create the second unoproj file with the scripts.

Im trying to reference the modules in the produced unoproj file but require statements are not finding the modules.

#In the following unoproj file. should "NPM-Packages/InfiniteScrollerNFuse_modules.unoproj” still be accessible even though the directory is excluded?

{ "RootNamespace": "", "Packages": [ "Fuse", "FuseJS" ], "Includes": [ "*" ], "Projects": [ "NPM-Packages/InfiniteScrollerNFuse_modules.unoproj" ], "Excludes": [ "node_modules", "NPM-Packages" ] }

##how do i access a script in second unoproj.

trying this: var ApolloClient = require(‘NPM-Packages/InfiniteScrollerNFuse_modules.unoproj’); to access a script in this unoproj:

{ "Packages": [ "FuseCore", "Fuse.Scripting" ], "Includes": [ "../node_modules/apollo-client/index.js:Bundle", "Lib_apollo_client.uno", "../node_modules/apollo-client/util/Observable.js:Bundle", "../node_modules/apollo-client/util/errorHandling.js:Bundle", ... ] }

Which results in module not found.

This is the path to the file in the project(cut/paste)
path in project /node_modules/apollo-client/ApolloClient.js

Require statement is:

var ApolloClient = require('node_modules/apollo-client/ApolloClient.js');

Error in monitor is:

    Error message: require(): module not found: node_modules/apollo-client/ApolloClient.js
    File name: MainView.ux
    Line number: 9
    Source line:         var ApolloClient = require('node_modules/apollo-client/ApolloClient.js'); 
    JS stack trace: [Uno code]
      at Fuse.Scripting.ScriptModule+RequireContext.Require (System.String id) <0xee173b0 + 0x000db> in <filename unknown>:0 
      at Fuse.Scripting.ScriptModule+RequireContext.Require (System.Object[] args) <0xee17200 + 0x0007b> in <filename unknown>:0 
      at Fuse.Scripting.V8.Marshaller+CallbackWrapper.Call (Fuse.Scripting.V8.Simple.UniqueValueVector args) <0xee15588 + 0x00059> in <filename unknown>:0 
    [JavaScript code]
    Error: require(): module not found: node_modules/apollo-client/ApolloClient.js
        at (Error Handler):1:49
        at null._tempMethod (MainView.ux:9:22)
     in Fuse.Reactive.JavaScript</usr/local/share/uno/Packages/Fuse.Reactive/0.39.3/$.uno:1444>```

 
same error without .js in require.

```LOG: Error: JavaScript error in MainView.ux line 9: Name: Fuse.Scripting.Error
    Error message: require(): module not found: node_modules/apollo-client/ApolloClient
    File name: MainView.ux
    Line number: 9
    Source line:         var ApolloClient = require('node_modules/apollo-client/ApolloClient'); 
    JS stack trace: [Uno code]
      at Fuse.Scripting.ScriptModule+RequireContext.Require (System.String id) <0xee173b0 + 0x000db> in <filename unknown>:0 
      at Fuse.Scripting.ScriptModule+RequireContext.Require (System.Object[] args) <0xee17200 + 0x0007b> in <filename unknown>:0 
      at Fuse.Scripting.V8.Marshaller+CallbackWrapper.Call (Fuse.Scripting.V8.Simple.UniqueValueVector args) <0xee15588 + 0x00059> in <filename unknown>:0 
    [JavaScript code]
    Error: require(): module not found: node_modules/apollo-client/ApolloClient
        at (Error Handler):1:49
        at null._tempMethod (MainView.ux:9:22)
     in Fuse.Reactive.JavaScript</usr/local/share/uno/Packages/Fuse.Reactive/0.39.3/$.uno:1444> ```

[Andreas_Ronning]

Hey Alain

nfuse tries to approximate how node’s implementation of require works by creating uno files that make the necessary mappings so you can just do require('apollo-client') as opposed to needing to fully qualify the path to the library. If you look in the source of Lib_apollo_client.uno you’ll see this mapping take place. nfuse makes the assumption that you want to require the libraries in your package.json by their names, not by the path to the specific js file which depends on that library’s definition.

Generally speaking, if you have to look inside the NPM-Packages folder and project, nfuse is doing something wrong. The development experience should mimic how it would feel to write a nodejs project.

[alain]

That helped. Using that syntax gets the file locations that where process with NFuse. Two things you run into after that.

1. Dependencies of dependencies with their own require statements are not being recognized by NFuse and included in the ux:Global. I then went ahead and just added that dependency to the root json and then Fuse was able to access it.

2. The second thing is that, after doing #1 if a dependency is called with dot notation, NFuse doesn’t process it correctly or it does and Fuse cant read it. I posted this in detail on the NFuse project (https://github.com/Sunjammer/nfuse/issues/21). At any rate, there are no include scripts for /node_modules methods in folders with dot name structures like lodash.assign.

Im guessing (dont know a thing about c#) that “Lib_lodash.assign” in the following snippet is not a qualified class name.

namespace NpmModules
  {
    [UXGlobalModule]
    public sealed class Lib_lodash.assign : FileModule, IModuleProvider
    {
      public Module GetModule()
  		{
  			return this;
  		}
      
      public Lib_lodash.assign() : base(GetSource())
      {
  			Resource.SetGlobalKey(this, "lodash.assign");
      }
      
      static FileSource GetSource()
      {
        return Bundle.Get("InfiniteScrollerNFuse_modules").GetFile("../node_modules/lodash.assign/index.js");
      }
    }
  }

Ideas?

[Andreas_Ronning]

Yep, the idea is that you found a bug in nfuse I just published a new version of nfuse that can handle filenames with periods in them. nfuse 2.2.2 should handle this scenario. Also I added some experimental “prerelease” features you can enable with the -e flag that, for instance, will fully crawl the dependency tree and create uno modules for every encountered module. You shouldn’t need this but it might solve some problems with individual modules.

[alain]

Nice. Makes posting errors worth it when you see it can help. I got it working without Nfuse but I am happy to have been useful!

Thanks. I will try it out.

[alain]

Hi Andreas,

I deleted the node_modules, and NPM Packages folder. I ran npm install nfuse -g to update to your latest version. I changed the package.json to test the default use case by removing everything but apollo-client. I ran npm install to reinstall apollo-client. I then ran NFuse and NFUSE -e to see what happens. These are the errors in the console:

 klik:InfiniteScrollerNFuse klik$ npm install -g nfuse
/Users/klik/.nvm/versions/node/v6.2.1/bin/nfuse -> /Users/klik/.nvm/versions/node/v6.2.1/lib/node_modules/nfuse/lib/nfuse.js
/Users/klik/.nvm/versions/node/v6.2.1/lib
└─┬ nfuse@2.2.3 
  ├─┬ fstream-ignore@1.0.5
  │ └─┬ fstream@1.0.10
  │   └── graceful-fs@4.1.10 
  └── lodash@4.16.6 

klik:InfiniteScrollerNFuse klik$ nfuse
Couldn't resolve /Users/klik/Projects/FuseProjects/InfiniteScrollerNFuse/node_modules/@types/async as directory
Couldn't resolve /Users/klik/Projects/FuseProjects/InfiniteScrollerNFuse/node_modules/@types/isomorphic-fetch as directory
Couldn't resolve /Users/klik/Projects/FuseProjects/InfiniteScrollerNFuse/node_modules/@types/lodash as directory
Couldn't resolve /Users/klik/Projects/FuseProjects/InfiniteScrollerNFuse/node_modules/@types/node as directory
Couldn't resolve /Users/klik/Projects/FuseProjects/InfiniteScrollerNFuse/node_modules/@types/promises-a-plus as directory
Couldn't resolve /Users/klik/Projects/FuseProjects/InfiniteScrollerNFuse/node_modules/@types/redux as directory
Couldn't resolve /Users/klik/Projects/FuseProjects/InfiniteScrollerNFuse/node_modules/@types/sinon as directory
nfuse: Including module 'apollo-client' as 'node_modules/apollo-client/index.js'
nfuse: Completed successfully
klik:InfiniteScrollerNFuse klik$ which nfuse
/Users/klik/.nvm/versions/node/v6.2.1/bin/nfuse
klik:InfiniteScrollerNFuse klik$ nfuse -v
usage: nfuse [-h] [-f] [-b libname] [-i jspath] [-e]
nfuse: error: Unrecognized arguments: -v.
klik:InfiniteScrollerNFuse klik$ nfuse -h
usage: nfuse [-h] [-f] [-b libname] [-i jspath] [-e]

Fuse project integration utility for NPM. Creates a Uno project and Uno 
source to ease the use of NPM packages in Fuse projects based on an adjacent 
package.json.

Optional arguments:
  -h, --help            Show this help message and exit.
  -f, --force           Force a reconstruction of the package project
  -b libname, --browser libname
                        Prefer browser entrypoint for this library over main 
                        if found. Repeatable (-b foo -b bar).
  -i jspath, --include jspath
                        Generate the Uno shim for a custom JS entrypoint path.
                         Repeatable (-i foo.js -i bar.js)
  -e, --experimental    Enable experimental features (see github)
klik:InfiniteScrollerNFuse klik$ nfuse -e
nfuse: No changes required
klik:InfiniteScrollerNFuse klik$ 

And in the build logs:

Configuring (3.3s)
Compiling syntax tree
build/Local/Preview/cache/ux11/MainView.g.uno(82.37): E3111: 'NpmModules' does not contain type or namespace 'Lib_lodash'. Could you be missing a package reference?
build/Local/Preview/cache/ux11/MainView.g.uno(83.37): E3111: 'NpmModules' does not contain type or namespace 'Lib_whatwg_fetch'. Could you be missing a package reference?
(2.9s)

Build completed in 6.30 seconds
    2 errors

# Build complete.

[alain]

And in NPM-Packages/InfiniteScrollerNFuse_modules.unoproj we can see what the process produced:

{
  "Packages": [
    "FuseCore",
    "Fuse.Scripting"
  ],
  "Includes": [
    "../node_modules/apollo-client/index.js:Bundle",
    "../node_modules/es6-promise/dist/es6-promise.js:Bundle",
    "../node_modules/graphql-anywhere/lib/src/index.js:Bundle",
    "../node_modules/lodash.assign/index.js:Bundle",
    "../node_modules/lodash.clonedeep/index.js:Bundle",
    "../node_modules/lodash.countby/index.js:Bundle",
    "../node_modules/lodash.flatten/index.js:Bundle",
    "../node_modules/lodash.forown/index.js:Bundle",
    "../node_modules/lodash.has/index.js:Bundle",
    "../node_modules/lodash.identity/index.js:Bundle",
    "../node_modules/lodash.includes/index.js:Bundle",
    "../node_modules/lodash.isequal/index.js:Bundle",
    "../node_modules/lodash.isnull/index.js:Bundle",
    "../node_modules/lodash.isnumber/index.js:Bundle",
    "../node_modules/lodash.isobject/index.js:Bundle",
    "../node_modules/lodash.isstring/index.js:Bundle",
    "../node_modules/lodash.isundefined/index.js:Bundle",
    "../node_modules/lodash.mapvalues/index.js:Bundle",
    "../node_modules/lodash.merge/index.js:Bundle",
    "../node_modules/lodash.pick/index.js:Bundle",
    "../node_modules/graphql-tag/index.js:Bundle",
    "../node_modules/lodash.assign/index.js:Bundle",
    "../node_modules/lodash.clonedeep/index.js:Bundle",
    "../node_modules/lodash.countby/index.js:Bundle",
    "../node_modules/lodash.flatten/index.js:Bundle",
    "../node_modules/lodash.forown/index.js:Bundle",
    "../node_modules/lodash.has/index.js:Bundle",
    "../node_modules/lodash.identity/index.js:Bundle",
    "../node_modules/lodash.includes/index.js:Bundle",
    "../node_modules/lodash.isboolean/index.js:Bundle",
    "../node_modules/lodash.isequal/index.js:Bundle",
    "../node_modules/lodash.isnull/index.js:Bundle",
    "../node_modules/lodash.isnumber/index.js:Bundle",
    "../node_modules/lodash.isobject/index.js:Bundle",
    "../node_modules/lodash.isstring/index.js:Bundle",
    "../node_modules/lodash.isundefined/index.js:Bundle",
    "../node_modules/lodash.mapvalues/index.js:Bundle",
    "../node_modules/lodash.merge/index.js:Bundle",
    "../node_modules/lodash.pick/index.js:Bundle",
    "../node_modules/redux/lib/index.js:Bundle",
    "../node_modules/lodash/lodash.js:Bundle",
    "../node_modules/lodash-es/lodash.js:Bundle",
    "../node_modules/loose-envify/index.js:Bundle",
    "../node_modules/js-tokens/index.js:Bundle",
    "../node_modules/symbol-observable/index.js:Bundle",
    "../node_modules/symbol-observable/index.js:Bundle",
    "../node_modules/whatwg-fetch/fetch.js:Bundle",
    "Lib_apollo_client.uno",
    "../node_modules/apollo-client/util/Observable.js:Bundle",
    "../node_modules/apollo-client/util/errorHandling.js:Bundle",
    "../node_modules/apollo-client/ApolloClient.js:Bundle",
    "../node_modules/apollo-client/actions.js:Bundle",
    "../node_modules/apollo-client/core/ObservableQuery.js:Bundle",
    "../node_modules/apollo-client/core/QueryManager.js:Bundle",
    "../node_modules/apollo-client/core/watchQueryOptions.js:Bundle",
    "../node_modules/apollo-client/data/resultReducers.js:Bundle",
    "../node_modules/apollo-client/data/mutationResults.js:Bundle",
    "../node_modules/apollo-client/data/readFromStore.js:Bundle",
    "../node_modules/apollo-client/data/replaceQueryResults.js:Bundle",
    "../node_modules/apollo-client/data/extensions.js:Bundle",
    "../node_modules/apollo-client/data/scopeQuery.js:Bundle",
    "../node_modules/apollo-client/data/store.js:Bundle",
    "../node_modules/apollo-client/data/storeUtils.js:Bundle",
    "../node_modules/apollo-client/data/writeToStore.js:Bundle",
    "../node_modules/apollo-client/errors/ApolloError.js:Bundle",
    "../node_modules/apollo-client/fragments.js:Bundle",
    "../node_modules/apollo-client/mutations/store.js:Bundle",
    "../node_modules/apollo-client/optimistic-data/store.js:Bundle",
    "../node_modules/apollo-client/queries/getFromAST.js:Bundle",
    "../node_modules/apollo-client/queries/directives.js:Bundle",
    "../node_modules/apollo-client/queries/queryTransform.js:Bundle",
    "../node_modules/apollo-client/queries/store.js:Bundle",
    "../node_modules/apollo-client/scheduler/scheduler.js:Bundle",
    "../node_modules/apollo-client/store.js:Bundle",
    "../node_modules/apollo-client/transport/batching.js:Bundle",
    "../node_modules/apollo-client/transport/batchedNetworkInterface.js:Bundle",
    "../node_modules/apollo-client/transport/afterware.js:Bundle",
    "../node_modules/apollo-client/transport/middleware.js:Bundle",
    "../node_modules/apollo-client/transport/networkInterface.js:Bundle",
    "../node_modules/es6-promise/auto.js:Bundle",
    "../node_modules/es6-promise/dist/es6-promise.auto.js:Bundle",
    "../node_modules/es6-promise/dist/es6-promise.auto.min.js:Bundle",
    "../node_modules/es6-promise/dist/es6-promise.min.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/-internal.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/asap.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/enumerator.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/polyfill.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/promise/all.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/promise/race.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/promise/reject.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/promise/resolve.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/promise.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/then.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise/utils.js:Bundle",
    "../node_modules/es6-promise/lib/es6-promise.js:Bundle",
    "../node_modules/graphql-anywhere/lib/src/getFromAST.js:Bundle",
    "../node_modules/graphql-anywhere/lib/src/directives.js:Bundle",
    "../node_modules/graphql-anywhere/lib/src/storeUtils.js:Bundle",
    "../node_modules/graphql-tag/loader.js:Bundle",
    "../node_modules/graphql-tag/parser.js:Bundle",
    "../node_modules/graphql-tag/printer.js:Bundle",
    "../node_modules/redux/dist/redux.js:Bundle",
    "../node_modules/redux/dist/redux.min.js:Bundle",
    "../node_modules/redux/es/applyMiddleware.js:Bundle",
    "../node_modules/redux/es/bindActionCreators.js:Bundle",
    "../node_modules/redux/es/combineReducers.js:Bundle",
    "../node_modules/redux/es/compose.js:Bundle",
    "../node_modules/redux/es/createStore.js:Bundle",
    "../node_modules/redux/es/index.js:Bundle",
    "../node_modules/redux/es/utils/warning.js:Bundle",
    "../node_modules/redux/lib/applyMiddleware.js:Bundle",
    "../node_modules/redux/lib/bindActionCreators.js:Bundle",
    "../node_modules/redux/lib/combineReducers.js:Bundle",
    "../node_modules/redux/lib/compose.js:Bundle",
    "../node_modules/redux/lib/createStore.js:Bundle",
    "../node_modules/redux/lib/utils/warning.js:Bundle",
    "../node_modules/redux/src/applyMiddleware.js:Bundle",
    "../node_modules/redux/src/bindActionCreators.js:Bundle",
    "../node_modules/redux/src/combineReducers.js:Bundle",
    "../node_modules/redux/src/compose.js:Bundle",
    "../node_modules/redux/src/createStore.js:Bundle",
    "../node_modules/redux/src/index.js:Bundle",
    "../node_modules/redux/src/utils/warning.js:Bundle",
    "../node_modules/lodash/ceil.js:Bundle",
    "../node_modules/lodash/_DataView.js:Bundle",
    "../node_modules/lodash/_Hash.js:Bundle",
    "../node_modules/lodash/_LazyWrapper.js:Bundle",
    "../node_modules/lodash/_ListCache.js:Bundle",
    "../node_modules/lodash/_LodashWrapper.js:Bundle",
    "../node_modules/lodash/_Map.js:Bundle",
    "../node_modules/lodash/_MapCache.js:Bundle",
    "../node_modules/lodash/_Promise.js:Bundle",
    "../node_modules/lodash/_Set.js:Bundle",
    "../node_modules/lodash/_SetCache.js:Bundle",
    "../node_modules/lodash/_Stack.js:Bundle",
    "../node_modules/lodash/_Symbol.js:Bundle",
    "../node_modules/lodash/_Uint8Array.js:Bundle",
    "../node_modules/lodash/_WeakMap.js:Bundle",
    "../node_modules/lodash/_addMapEntry.js:Bundle",
    "../node_modules/lodash/_addSetEntry.js:Bundle",
    "../node_modules/lodash/_apply.js:Bundle",
    "../node_modules/lodash/_arrayAggregator.js:Bundle",
    "../node_modules/lodash/_arrayEach.js:Bundle",
    "../node_modules/lodash/_arrayEachRight.js:Bundle",
    "../node_modules/lodash/_arrayEvery.js:Bundle",
    "../node_modules/lodash/_arrayFilter.js:Bundle",
    "../node_modules/lodash/_arrayIncludes.js:Bundle",
    "../node_modules/lodash/_arrayIncludesWith.js:Bundle",
    "../node_modules/lodash/_arrayLikeKeys.js:Bundle",
    "../node_modules/lodash/_arrayMap.js:Bundle",
    "../node_modules/lodash/_arrayPush.js:Bundle",
    "../node_modules/lodash/_arrayReduce.js:Bundle",
    "../node_modules/lodash/_arrayReduceRight.js:Bundle",
    "../node_modules/lodash/_arraySample.js:Bundle",
    "../node_modules/lodash/_arraySampleSize.js:Bundle",
    "../node_modules/lodash/_arrayShuffle.js:Bundle",
    "../node_modules/lodash/_arraySome.js:Bundle",
    "../node_modules/lodash/_asciiSize.js:Bundle",
    "../node_modules/lodash/_asciiToArray.js:Bundle",
    "../node_modules/lodash/_asciiWords.js:Bundle",
    "../node_modules/lodash/_assignInDefaults.js:Bundle",
    "../node_modules/lodash/_assignMergeValue.js:Bundle",
    "../node_modules/lodash/_assignValue.js:Bundle",
    "../node_modules/lodash/_assocIndexOf.js:Bundle",
    "../node_modules/lodash/_baseAggregator.js:Bundle",
....

[alain]

So it looks like, the process is not creating the Ux:Global Module for the subdependencies and that the build is looking for that. If I had any idea about UNO i would try to go deeper. Soon…