# Using Node Modules

**URL:** <https://forums.fusetools.com/t/using-node-modules/2728>\
**Category:** How-to Discussions\
**Created:** [October 18, 2016, 11:39am UTC](https://forums.fusetools.com/t/using-node-modules/2728 "2016-10-18T11:39:23Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![alain](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/alain/32/283_2.png) [@alain](https://forums.fusetools.com/u/alain)\
**Post date:** [October 18, 2016, 11:39am UTC](https://forums.fusetools.com/t/using-node-modules/2728/1 "2016-10-18T11:39:23Z")

</div>

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

```auto
{
  "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)

```auto
<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.

```auto
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>

```

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [October 18, 2016, 10:42pm UTC](https://forums.fusetools.com/t/using-node-modules/2728/2 "2016-10-18T22:42:54Z")

</div>

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.

> **[nfuse](https://www.npmjs.com/package/nfuse)**
>
> Fuse project integration utility for NPM

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

---

<div class="post-metadata">

**Author:** ![alain](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/alain/32/283_2.png) [@alain](https://forums.fusetools.com/u/alain)\
**Post date:** [October 19, 2016, 7:44am UTC](https://forums.fusetools.com/t/using-node-modules/2728/3 "2016-10-19T07:44:05Z")

</div>

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](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](http://npmjs.com) site doesnt recognize the fuse package. FYI. [https://runkit.com/npm/nfuse](https://runkit.com/npm/nfuse)

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [October 19, 2016, 7:02pm UTC](https://forums.fusetools.com/t/using-node-modules/2728/4 "2016-10-19T19:02:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![alain](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/alain/32/283_2.png) [@alain](https://forums.fusetools.com/u/alain)\
**Post date:** [October 19, 2016, 11:22pm UTC](https://forums.fusetools.com/t/using-node-modules/2728/5 "2016-10-19T23:22:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [October 19, 2016, 11:39pm UTC](https://forums.fusetools.com/t/using-node-modules/2728/6 "2016-10-19T23:39:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [October 19, 2016, 11:46pm UTC](https://forums.fusetools.com/t/using-node-modules/2728/7 "2016-10-19T23:46:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![alain](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/alain/32/283_2.png) [@alain](https://forums.fusetools.com/u/alain)\
**Post date:** [October 20, 2016, 7:55am UTC](https://forums.fusetools.com/t/using-node-modules/2728/8 "2016-10-20T07:55:19Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![dafyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/dafyk/32/146_2.png) [@dafyk](https://forums.fusetools.com/u/dafyk)\
**Post date:** [October 22, 2016, 6:24pm UTC](https://forums.fusetools.com/t/using-node-modules/2728/9 "2016-10-22T18:24:21Z")

</div>

Try something like this

```auto
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

```

---

<div class="post-metadata">

**Author:** ![alain](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/alain/32/283_2.png) [@alain](https://forums.fusetools.com/u/alain)\
**Post date:** [October 28, 2016, 11:30am UTC](https://forums.fusetools.com/t/using-node-modules/2728/10 "2016-10-28T11:30:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![alain](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/alain/32/283_2.png) [@alain](https://forums.fusetools.com/u/alain)\
**Post date:** [November 12, 2016, 8:50am UTC](https://forums.fusetools.com/t/using-node-modules/2728/11 "2016-11-12T08:50:48Z")

</div>

Mac El Capitan  
Fuse 0.29. Build 8396

I’ve got this apollo-client library. Its the [https://github.com/apollostack/apollo-client](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](https://github.com/aarmand/apollo-client-babel-commonjs-project/tree/master/libES5)  
This is the project repo: [https://github.com/aarmand/InfiniteScrollerApollo](https://github.com/aarmand/InfiniteScrollerApollo)  
I’ve added the following to .unoproj:

```auto
{
  "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.

```auto
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](http://stackoverflow.com/questions/40562727/using-babel-to-get-apolloclient-to-es5-commonjs-module-format-for-node-environme)

---

<div class="post-metadata">

**Author:** ![alain](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/alain/32/283_2.png) [@alain](https://forums.fusetools.com/u/alain)\
**Post date:** [November 12, 2016, 11:30am UTC](https://forums.fusetools.com/t/using-node-modules/2728/12 "2016-11-12T11:30:16Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [November 18, 2016, 10:24am UTC](https://forums.fusetools.com/t/using-node-modules/2728/13 "2016-11-18T10:24:00Z")

</div>

No, anything that is valid ES5 will work fine 🙂

---

<div class="post-metadata">

**Author:** ![alain](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/alain/32/283_2.png) [@alain](https://forums.fusetools.com/u/alain)\
**Post date:** [November 22, 2016, 12:28pm UTC](https://forums.fusetools.com/t/using-node-modules/2728/14 "2016-11-22T12:28:42Z")

</div>

Thank you, sir.