Using Node Modules

alain · October 18, 2016, 11:39am

I need some help with the correct set up for using a node_modules in fuse. I am trying to use apollo-client. I understand not all node modules work. I’m expecting for it to fail with some error message if it doesnt work. Right now, i cant get the build to find the module. I have tried various versions from the .unoproj docs to no avail.

This is the .unoproj

{
  "RootNamespace":"",
  "Packages": [
  	"Fuse",
  	"FuseJS"
  ],
  "Includes": [
    "*",
    "node_modules/apollo-client/*/.js:Bundle",
    "Assets/*.png:Bundle"
  ]
}

this is where i am trying to call the module. This the inifinite scroll example from Fusetools Playground repo(mostly)

<App>
	<iOS.StatusBarConfig Style="Light" />
	<JavaScript>
		var Observable = require("FuseJS/Observable");

		var places = Observable();
		var apolloClient = require('/node_modules/apollo-client/index.js');	
		var ApolloClient = apolloClient.default;
		var networkInterface = ApolloClient.createNetworkInterface('http://localhost:8080/graphql');
		var gql = require('./node_modules/graphql-tag/index.js')
		var client = new ApolloClient({
			networkInterface
		})

		// GraphQL query
		var getPlaces = gql`
		  query allPlaces {
		    places(first: 10) {
		      name
		      city
		    }
		  }
		`;
		var test = client({query: getPlaces});
		console.log(test);
		test();
		// client({query: getPlaces});
		// query(getPlaces);

				// function loadMore() {
		// 	for (var i = 0; i < 30; i++) {
		// 		friends.add({
		// 			name: "Generic friend " + friends.length,
		// 			avatar: "Assets/avatar" + (Math.floor(Math.random()*4)+1) + ".png"
		// 		})
		// 	}

		// 	if (friends.length > 60) {
		// 		friends.removeRange(0, 30);
		// 	}
		// }

		// loadMore();

		// module.exports = { friends, loadMore };
		module.exports = { places };
	</JavaScript>

	<DockPanel>
		<DockPanel Dock="Top" Color="#18f">
			<StatusBarBackground Dock="Top" />
			<Panel Height="48">
				<Text  Color="White" FontSize="20" Alignment="Center">Friends</Text>
			</Panel>
		</DockPanel>
		<ScrollView LayoutMode="PreserveVisual">
			<StackPanel>
				<Each Items="{hero}">
					<Panel>
						<Deferred>
							<DockPanel>
								<Image Width="64" Margin="16,4,32,4" File="{avatar}" Dock="Left" />
								<Text Value="{hero.name}" Alignment="CenterLeft"/>
							</DockPanel>
						</Deferred>
					</Panel>
				</Each>
			</StackPanel>
			<Scrolled To="End" Within="300">
				<Callback Handler="{loadMore}" />
			</Scrolled>
		</ScrollView>
	</DockPanel>
</App>

Various errors from trying different configurations of the above. Thanks for any guidance.

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

Andreas_Ronning · October 18, 2016, 10:42pm

Hey Alain

If you don’t mind stepping into the wild side, here’s an npm tool I’m working on to make this process easier for you.

If this doesn’t solve your problem I’d love to hear how it didn’t

alain · October 19, 2016, 7:44am

So I tried this. Seems promising but didnt quite work. i npm installed nfuse and apollo-client, required apollo-client and Fuse saw it. Big victory there. Apollo-client uses lodash. Lodash and everything apolloclient is dependent on is in the node-modules folder but on the same level as apollo-client. When the apollo-client code runs, it refers to the those folders which it did not nfuse because i didnt install them. Seems like it only runs the nfuse on the install dependency but not the dependencies dependencies.

here is the nfuse (demo)[https://github.com/aarmand/InfiniteScroller-nfuse].

Just for fun I npm installed all of the apollo-client dependecies directly in my package.json file. This got past some of the original ‘module not found’ errors but started having problems with more deeply nested require statements. For example, graphql-tag/printer is required in apollo-client/index.js and its not resolving. I tried changing the path but cant get it to go. Needless to say, chasing all of them down is not practical.

From Fuse Monitor:
LOG: Error: JavaScript error in apollo-client line 5. require(): module not found: graphql-tag/printer in Fuse.Scripting.ScriptModule+RequireContext</usr/local/share/uno/Packages/Fuse.Scripting/0.38.6/$.uno:214>

also, the runkit example on the npmjs.com site doesnt recognize the fuse package. FYI. https://runkit.com/npm/nfuse

Andreas_Ronning · October 19, 2016, 7:02pm

nfuse definitely crawls the whole dependency graph, but it’s making some bad assumptions right now about where it will find files. What it actually does is create a shim for the actual package that is referenced in the package.json, but then recursively crawls for node_modules under that module’s resolved path and bundles all JS files therein. That’s clearly not going to work anymore; Seems new NPM does dedupe by default and resolve behavior has changed.

Thanks for testing this for me, I’ll make some changes and report back. Watch this thread

As for runkit not working, that makes sense, nfuse isn’t a lib you can require.

alain · October 19, 2016, 11:22pm

Happy to help. Wish i was strong enough to help with the solution.

Andreas_Ronning · October 19, 2016, 11:39pm

So I’ve bashed at this one for a bit and I got all the dependencies hooked in, but I’m encountering some other problems that I can’t quite explain yet, seems part of how apollo-client has been written (or one of its dependencies) is really throwing our js implementation for a loop. I’ll try and make a repro case and send it to the team.

Andreas_Ronning · October 19, 2016, 11:46pm

OK so apollo-client uses ES6 features, specifically through the es6-promise dependency. Fuse currently does not support ES6, so this is going to block you outright.

alain · October 20, 2016, 7:55am

I noticed that. I had started to try to figure out how to run babel es2015 preset on apollo-client before running nfuse on it…but seemed above my clearance level…

dafyk · October 22, 2016, 6:24pm

Try something like this

git clone https://github.com/apollostack/apollo-client.git
npm install
npm run compile
// Make sure you have babe-cli installed
npm i -g babel-cli
babel --presets es2015,stage-0 -d lib/ src/
cd lib

alain · October 28, 2016, 11:30am

Thank you, sir. Didnt work, but learned some things.

alain · November 12, 2016, 8:50am

Mac El Capitan
Fuse 0.29. Build 8396

I’ve got this apollo-client library. Its the https://github.com/apollostack/apollo-client package converted to E6 CommonJS modules, then down to ES5 CommonJS Modules. I did this because FuseTools doesnt recognize Promises in ES6 per this forum discussion. From doc diving, I understand that the Babel ES2015 preset converts down to ES5. I used the following babel preset to get a loose output so that the (__es6Module) tag would not be applied.
It can be found here: https://github.com/aarmand/apollo-client-babel-commonjs-project/tree/master/libES5
This is the project repo: https://github.com/aarmand/InfiniteScrollerApollo
I’ve added the following to .unoproj:

{
  "RootNamespace": "",
  "Packages": [
    "Fuse",
    "FuseJS"
  ],
  "Includes": [
    "*",
    "js/**/*.js"
  ],
  "Excludes": [
    "package.json",
    "readme.md"
  ]
}

If I add this folder to Fuse project, How would I access the exported methods?

When i run fuse preview, the project starts then i get a ‘module not found: ApolloClient’ error.

LOG: Error: JavaScript error in MainView.ux line 9: Name: Fuse.Scripting.Error
    Error message: require(): module not found: ApolloClient
    File name: MainView.ux
    Line number: 9
    Source line: 		var ApolloClient = require('ApolloClient'); 
    JS stack trace: [Uno code]
      at Fuse.Scripting.ScriptModule+RequireContext.Require (System.String id) <0x128ea470 + 0x000db> in <filename unknown>:0 
      at Fuse.Scripting.ScriptModule+RequireContext.Require (System.Object[] args) <0x128ea2c0 + 0x0007b> in <filename unknown>:0 
      at Fuse.Scripting.V8.Marshaller+CallbackWrapper.Call (Fuse.Scripting.V8.Simple.UniqueValueVector args) <0x128a6f90 + 0x00059> in <filename unknown>:0 
    [JavaScript code]
    Error: require(): module not found: 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.40.8/$.uno:1445>
LOG: Error: JavaScript error in MainView.ux line 9: Name: Fuse.Scripting.Error
    Error message: require(): module not found: ApolloClient
    File name: MainView.ux
    Line number: 9
    Source line: 		var ApolloClient = require('ApolloClient'); 
    JS stack trace: [Uno code]
      at Fuse.Scripting.ScriptModule+RequireContext.Require (System.String id) <0x128ea470 + 0x000db> in <filename unknown>:0 
      at Fuse.Scripting.ScriptModule+RequireContext.Require (System.Object[] args) <0x128ea2c0 + 0x0007b> in <filename unknown>:0 
      at Fuse.Scripting.V8.Marshaller+CallbackWrapper.Call (Fuse.Scripting.V8.Simple.UniqueValueVector args) <0x128a6f90 + 0x00059> in <filename unknown>:0 
    [JavaScript code]
    Error: require(): module not found: 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.40.8/$.uno:1445>

posted to stackoverflow here http://stackoverflow.com/questions/40562727/using-babel-to-get-apolloclient-to-es5-commonjs-module-format-for-node-environme

alain · November 12, 2016, 11:30am

@andreas do you mean that even if the file is converted down to ES5 spec, as @dafyk suggested, that it will not work in Fusetools?

Thanks.

Andreas_Ronning · November 18, 2016, 10:24am

No, anything that is valid ES5 will work fine

alain · November 22, 2016, 12:28pm

Thank you, sir.

Topic		Replies	Views
Graph QL Support General	5	1546	December 26, 2017
Node.js Modules How-to Discussions	18	1776	August 11, 2015
GraphQL Support with Apollo Feature Suggestions	5	1091	December 26, 2017
NPM in Fuse 1.6 General	8	1143	February 16, 2018
npm package support would be great Feature Suggestions	6	854	October 25, 2016

Using Node Modules

Related Topics