Ionic-framework: Webpack and RC0

[ghaiat]

Short description of the problem:

I am using webpack as a build process (because we also have web applications and i want use the same process) and since you introduced the umd folder, my build is not working anymore.

What behavior are you expecting?

To be able to build an ionic app with webpack

Steps to reproduce:

1. Clone https://github.com/ghaiat/ionic2-rc0
2. npm install && npm run browsersync
3. check the logs, you ll see a lot of errors

49% 491/743 build modulesError: Debug Failure. False expression: Output generation failed Error: Debug Failure. False expression: Output generation failed
    at Object.assert (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/typescript/lib/typescript.js:2406:23)
    at Object.transpileModule (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/typescript/lib/typescript.js:54350:18)
    at State.fastEmit (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/awesome-typescript-loader/src/host.ts:264:39)
    at transform (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/awesome-typescript-loader/src/index.ts:164:28)
    at transformationFunction (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/awesome-typescript-loader/src/index.ts:89:48)
    at compiler (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/awesome-typescript-loader/src/index.ts:105:34)
    at Object.loader (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/awesome-typescript-loader/src/index.ts:18:18)
    at WEBPACK_CORE_LOADER_EXECUTION (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:155:71)
    at runSyncOrAsync (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:155:93)
    at nextLoader (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at Object.context.callback (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.module.exports (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/angular2-template-loader/index.js:32:10)
    at WEBPACK_CORE_LOADER_EXECUTION (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:155:71)
    at runSyncOrAsync (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:155:93)
    at nextLoader (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
Error: Debug Failure. False expression: Output generation failed Error: Debug Failure. False expression: Output generation failed
    at Object.assert (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/typescript/lib/typescript.js:2406:23)
    at Object.transpileModule (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/typescript/lib/typescript.js:54350:18)
    at State.fastEmit (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/awesome-typescript-loader/src/host.ts:264:39)
    at transform (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/awesome-typescript-loader/src/index.ts:164:28)
    at transformationFunction (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/awesome-typescript-loader/src/index.ts:89:48)
    at compiler (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/awesome-typescript-loader/src/index.ts:105:34)
    at Object.loader (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/awesome-typescript-loader/src/index.ts:18:18)
    at WEBPACK_CORE_LOADER_EXECUTION (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:155:71)
    at runSyncOrAsync (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:155:93)
    at nextLoader (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at Object.context.callback (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at Object.module.exports (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/angular2-template-loader/index.js:32:10)
    at WEBPACK_CORE_LOADER_EXECUTION (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:155:71)
    at runSyncOrAsync (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:155:93)
    at nextLoader (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
    at /Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/ghaiat/Documents/Phonegap/test-generator/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)

Which Ionic Version? 2.0.0.rc-0

[ghost]

I've got this exact same issue here with a webpack 1.13.2 based build :/

[ssreekanth]

I'm using webpack too, and I'm seeing lots of these errors with umd. Any suggestions on how to fix these?

WARNING in /Users/test/electron-ionic2-webpack-starter/~/ionic-angular/umd/index.js
Critical dependencies:
3:24-31 require function is used in a way in which dependencies cannot be statically extracted
 @ /Users/test/electron-ionic2-webpack-starter/~/ionic-angular/umd/index.js 3:24-31

WARNING in /Users/test/electron-ionic2-webpack-starter/~/ionic-angular/umd/module.js
Critical dependencies:
3:24-31 require function is used in a way in which dependencies cannot be statically extracted
 @ /Users/test/electron-ionic2-webpack-starter/~/ionic-angular/umd/module.js 3:24-31

WARNING in /Users/test/electron-ionic2-webpack-starter/~/ionic-angular/umd/gestures/drag-gesture.d.ts
Module build failed: Error: Typescript emitted no output for /Users/test/electron-ionic2-webpack-starter/node_modules/ionic-angular/umd/gestures/drag-gesture.d.ts
    at Object.loader (/Users/test/electron-ionic2-webpack-starter/node_modules/ts-loader/index.js:456:15)
 @ /Users/test/electron-ionic2-webpack-starter/~/ionic-angular/umd/gestures ^\.\/.*$

[ghaiat]

Upgrading to webpack 2.1.0-beta.25 seems to have fix the problem for me

[ghost]

yeah my assumption was that Webpack 2.x would fix all of this...just didn't wanna have to dive off into slaying that dragon just yet :/

[danbucholtz]

I think we're building our umd bundles incorrectly. We're learning along with everyone else here. Telling Typescript to create umd is insufficient it seems.

Thanks,
Dan

[mnasyrov]

I managed to fix the umd issue by adding module field to resolve.packageMains of webpack1 configuration:

resolve: {
  packageMains: ['module', "webpack", "browser", "web", "browserify", ["jam", "main"], "main"]
},

[danbucholtz]

Hurray! Glad this is working. Let's close it up!

Thanks,
Dan

[danbucholtz]

All,

We've posted some docs on the subject. Note: They match a version of @ionic/app-scripts that will be dropped in the next day or so. 95% of the concepts still apply.

http://ionicframework.com/docs/v2/resources/third-party-libs/
http://ionicframework.com/docs/v2/resources/app-scripts/

Here's an example with AngularFire2.
Here is a project I implemented that has every library in it that Ionic users have reported trouble with. Most of the libraries worked, but a couple did not. Here is the summary of the findings.

Please let me know how everything goes.

Thanks,
Dan

[zhakhalov]

Same issue here.

After upgrading existing project to

• [email protected]
• [email protected]
• [email protected]
• [email protected]

Builds with ts-loader just stuck an 44%
Builds with awesome-typescript-loader finishes but output is not full.

I've run same config on non-ionic Angular2 project without any issues.

I would say that Ionic should not be dependent on build system.

[danbucholtz]

@m0n01i7h,

Ionic is dependent on a build system. You're free to build with whatever system you want. Sorry it's not working for you. Keep digging and let us know what's wrong please. We are building umd via TSC instead of commonjs so I would expect everything to just work. Unfortunately, we cannot offer technical support and guidance for third party build systems.

Why not use the module field and bundle our ES2015 tree-shakeable modules instead of the legacy stuff?

Thanks,
Dan

[msegers]

So this will remain closed or are we working on a proper webpack implementation?

[danbucholtz]

@msegers,

We have webpack support baked into the build process via the @ionic/app-scripts package.

Thanks,
Dan

[zhakhalov]

Hi everyone,
Here is my working app template https://github.com/m0n01i7h/ionic2-webpack-starter
Maybe it could be interesting for anyone.
I have run it with Webpack 2, ng-compiler-cli and gulp

[msegers]

@m0n01i7h Thanks for sharing I'll look at it intensively, for some reason I just don't get any errors/warnings nor output. Not even with --debug

So I wasn't sure what I"m doing wrong (Still ain't but your example might just help).

It's very strange whenever I use my custom webpack everything seems to break, 0 feedback from app-scripts and an empty page. Your example didn't seem to show anything special as what I"m trying to do. :'(

[zhakhalov]

Hi @msegers
Strange issue. I have run this starter on several computers. Are you trying to run via npm scripts or via webpack cli or via app-scripts?. Try to install webpack2 globally and run webpack.

[msegers]

@m0n01i7h I'm not running your starter I'm sure it would be fine. I just have this app I've been working on since Alpha that suddenly no longer works now it's in RC ;-). I'm messing with the webpack config now, the only way I can get some output (errors) is by not using a custom webpack config.