Ionic-app-scripts: ionic serve - rollup: No name was provided for external module

[kesozjura]

Short description of the problem:

ionic serve started to throw error:

[08:24:37]  rollup: Treating 'child_process' as external dependency
[08:24:40]  rollup: No name was provided for external module 'fs' in options.globals – guessing 'fs'
[08:24:40]  rollup: No name was provided for external module 'child_process' in options.globals – guessing
            'child_process'

mail.js is bundled, but in browser it throws error:

Uncaught ReferenceError: fs is not defined main.dev.ts:5

app-scripts 0.0.30 were fine.

What behavior are you expecting?

to successfully compile project

Steps to reproduce:

1. ionic serve

Our packages in package.json:

 "dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/compiler-cli": "^0.6.2",
    "@angular/core": "^2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/platform-server": "^2.0.0",
    "@ionic/storage": "1.0.3",

    "angular2-redux-store": "1.2.0",
    "highcharts": "5.0.0",
    "immutable": "3.8.1",
    "intl": "1.2.4",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.0.3",
    "ionicons": "3.0.0",
    "moment": "2.15.1",
    "redux": "3.6.0",
    "redux-thunk": "2.1.0",
    "rxjs": "5.0.0-beta.12",
    "symbol-observable": "1.0.4",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.33",
    "@types/chai": "3.4.34",
    "@types/highcharts": "4.2.37",
    "@types/immutable": "3.8.4",
    "@types/lodash": "4.14.36",
    "@types/mocha": "2.2.32",
    "@types/redux": "3.5.30",
    "@types/redux-thunk": "2.1.31",
    "buffer": "5.0.0",
    "chai": "3.5.0",
    "mocha": "3.0.1",
    "reflect-metadata": "0.1.8",
    "rollup-plugin-commonjs": "5.0.5",
    "rollup-plugin-multi-entry": "2.0.1",
    "rollup-plugin-node-resolve": "2.0.0",
    "rollup-plugin-typescript": "0.8.1",
    "source-map-support": "0.4.3",
    "typescript": "2.0.3",
    "watch": "1.0.1"
  },

Which @ionic/app-scripts version are you using?
0.0.33

This is happening if I import mocha in app.component.ts as workaround for issue described in https://github.com/driftyco/ionic-app-scripts/issues/157
so I don't know if it is real issue then.

[danbucholtz]

@kesozjura,

I'm not sure if these libraries are suited for the web. child_process implies that there would in fact be a separate process running as is the case from node, but that doesn't make sense on the web.

Having said that, we have implemented Webpack to bundle code and are in the testing phase with it. If you can sit tight for a few days, we can see if that will handle it better. Hopefully it does.

Thanks,
Dan

[jgw96]

@kesozjura The webpack integration is now in our latest beta release of app-scripts! To give it a try just run npm install @ionic/app-scripts@beta in your project. Thanks!

[Divs-B]

HI team,

I am having same issue - Uncaught Error: Cannot find module "fs" .

Initially I encountered 'no name found for fs..' and 'Uncaught ReferenceError: fs is not defined' in the browser than I updated just now with latest app scripts and end up with cannot find module fs error.

do let me know what I am missing with.

I have now version updated to:
"@ionic/app-scripts": "^0.0.36",
"typescript": "^2.0.3"

[jgw96]

@Divs-B Is there a reason you are trying to use fs, which is a built in node.js method, in the browser? fs is not made to work in the browser as the browser does not have direct access to the underlying file system on your machine like node.js does.

[Divs-B]

Thanks jgw96 for clearing this. I won't use 'fs' for browser now.
though I had this in mind but couldn't find relative information anywhere thats why was always trying on ionic serve.

Can i read csv file from my ionic app on browser by any ways?
I saw 'node-csv' package but that also has 'fs' to read files.

Any help will be highly appreciated.

[kesozjura]

@jgw96 now ionic serve have some other problems:

> ionic-app-scripts watch                                                                                                                                               
[07:32:30]  ionic-app-scripts 0.0.37                                                                                                                                    
[07:32:30]  watch started ...                                                                                                                                           
[07:32:30]  build dev started ...                                                                                                                                       
[07:32:30]  clean started ...                                                                                                                                           
[07:32:30]  clean finished in 6 ms                                                                                                                                      
[07:32:30]  copy started ...                                                                                                                                            
[07:32:30]  transpile started ...                                                                                                                                       
[07:32:35]  transpile finished in 5.31 s                                                                                                                                
[07:32:35]  webpack started ...                                                                                                                                         
(node:14848) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: [object Object]                                                    

[07:32:36]  copy finished in 6.07 s                                                                                                                                     
[07:32:42]  webpack finished in 6.96 s                                                                                                                                  
[07:32:42]  sass started ...                                                                                                                                            
[07:32:42]  build dev failed: [object Object]                                                                                                                           

(node:14848) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 1)                                                             

[07:32:44]  sass finished in 1.26 s

Original error was because i was importing mocha in main.dev.ts. This was wrong. After removing that import and adding

 "types": [
      "mocha"
    ]

to tsconfig.json I have no problem with serve and build. But with beta I have error mentioned above.

[danbucholtz]

@kesozjura,

We'll try to publish an update today. Stay tuned.

Thanks,
Dan

[rodriguesgm]

I think I'm having the same problem after I installed SockJS https://www.npmjs.com/package/sockjs.
When I tried to import it in a provider and use it, I have the following error when run ionic serve

I was using app-scripts v0.0.23, but even with v0.0.36 this happens
any help?

[danbucholtz]

@rodriguesgm,

Try running Webpack. That will have better luck with built in dependencies. Check out

npm install @ionic/app-scripts@nightly

If you have a custom rollup config file, temporarily change the name of it to something else while you test this out. If a rollup config is detected, the nightly will still use Rollup instead of Webpack.

Thanks,
Dan

[kesozjura]

Using this nightly "ionic serve" stuck on following:

$ ionic serve
Running 'serve:before' npm script before serve
> myApp watch D:\myApp\src
> ionic-app-scripts watch
[10:41:33]  ionic-app-scripts 0.0.37-1
[10:41:33]  watch started ...
[10:41:33]  build dev started ...
[10:41:33]  clean started ...
[10:41:33]  clean finished in 5 ms
[10:41:33]  copy started ...
[10:41:33]  transpile started ...
[10:41:33]  lint started ...
[10:41:33]  lint finished in 6 ms
[10:41:38]  transpile finished in 4.93 s
[10:41:38]  webpack started ...
[10:41:38]  copy finished in 5.17 s
[10:41:45]  webpack finished in 7.79 s
[10:41:45]  sass started ...
[10:41:47]  sass finished in 1.86 s
[10:41:47]  build dev finished in 14.60 s

server is not started...

[jgw96]

Hello @kesozjura. Can you make sure that you have all the files here including the manifest.jsonand the service worker? There is a bug with app-scripts at the moment that we are working on that makes the build halt when the copy task does not find a file.

[GamaRiverib]

I have the same problem

[09:06:09] ionic-app-scripts 0.0.36
[09:06:09] watch started ...
[09:06:09] build dev started ...
[09:06:09] clean started ...
[09:06:09] clean finished in 16 ms
[09:06:09] copy started ...
[09:06:09] transpile started ...
[09:06:11] lint started ...
[09:06:19] lint finished in 7.39 s
[09:06:22] transpile finished in 12.71 s
[09:06:22] bundle started ...
[09:06:22] copy finished in 12.96 s
[09:06:40] rollup: Treating 'fs' as external dependency
[09:06:42] rollup: Treating 'net' as external dependency
[09:06:42] rollup: Treating 'dns' as external dependency
[09:06:53] rollup: No name was provided for external module 'fs' in options.globals – guessing 'fs'
[09:06:53] rollup: No name was provided for external module 'net' in options.globals – guessing 'net'
[09:06:53] rollup: No name was provided for external module 'dns' in options.globals – guessing 'dns'
[09:07:02] bundle finished in 39.46 s
[09:07:02] sass started ...
[09:07:08] sass finished in 6.26 s
[09:07:08] build dev finished in 58.51 s
[09:07:08] watch ready in 58.93 s

node v6.8.1
npm v3.10.8
ionic 2.1.4

"@ionic/app-scripts": "^0.0.36",
"typescript": "^2.0.3"

[rodriguesgm]

@danbucholtz With your solution + @jgw96 answer the error is not logging on prompt when running ionic serve.
But on console browser, the problem still happens

[jgw96]

Hello all! I am going to be closing this issue for now. The issue here is that the libraries that you all are trying to use all use built in node modules such as fs that are not built to work in the browser. Most likely these libraries are meant to be used server side with Node.js.

[rodriguesgm]

Hi @jgw96.
Not sure if you are right. I'm trying to use SockJs as this example here:
http://www.concretepage.com/spring-4/spring-4-websocket-sockjs-stomp-tomcat-example

So, that's why if think it should work.

[danbucholtz]

@rodriguesgm,

I added a mock for the fs to the default webpack config. Should be in the next release.
Thanks,
Dan

[vunb]

@danbucholtz after upgrade to @ionic/app-scripts v0.0.38 my error disappears. Thank you !

[nabilfreeman]

Likewise - I started using Loki https://github.com/techfort/LokiJS yesterday with Ionic 2, immediately ran into fs is not defined. The nightly install above works perfectly, such good timing as well. You guys are the best!

[rodriguesgm]

@danbucholtz hey man
I tried it here with ionic RC2 and app-spricts v0.0.39, but it still the same problem. Even with nightly.
Is there any other solution?

[nabilfreeman]

@rodriguesgm when you run ionic serve, can you see in the logs that it is using Webpack instead of Rollup? If not, you might need to look for the Rollup config files as mentioned above by @danbucholtz

[rodriguesgm]

@nabilfreeman yeah, i can see that its logging webpack on console. I can post here a print later today. And the behaviour are different when using weback and when using rollup,
With rollup I can see the error on console like here https://cloud.githubusercontent.com/assets/10141664/19709862/b52a6bec-9b08-11e6-92a4-cc11745e1a91.jpg and in the browser.

but with webpack, nothing is printed on console but on browser debug the errors remains https://cloud.githubusercontent.com/assets/10141664/19745566/eac08180-9bb0-11e6-8804-90a0b7815468.jpg

[danbucholtz]

@nabilfreeman, @rodriguesgm,

Hmm. That should not be the case. We're providing an empty mock just like create-react-app. Maybe you won't be able to use that library on the web, I'm not sure. If you can create a sample repo with a reproduction, I can take a look.

Thanks,
Dan

[rodriguesgm]

hi @danbucholtz
i've just came back to retest it. It seems that that problem was solved. I'm using the webpack and ionic-app-scripts v0.0.44. But I'm getting a new weird problem. Any clue to help me?

[danbucholtz]

@rodriguesgm,

Seems like it's trying to load a json file into the bundle. I'm not sure exactly what the issue is. Lots of libraries have lots of problems with even the best bundlers.

Thanks,
Dan