Ionic 3 build using "--prod" flag does not use custom webpack configuration file. Build using "--dev" flag works. #954
Comments
|
I am having this problem now with ionic3.0.0-rc.1 I always use the -prod flag and I get an error: The custom config in my This used to work in ionic3.0.0-beta7 (then I jumped to rc1) Edit: building without the --prod flag works |
|
Confirming the same issue ( I'm curious as to why the error is thrown before |
|
This happened somewhere between release 1.3.4 and 1.3.5 (1.3.4 works for me using Compare: v1.3.4...v1.3.5 |
|
The issue is present as well with |
|
@vkniazeu: Downgrade app-scripts to 1.3.4 until a fix is out, I'm pretty certain it will work. |
|
Thanks @biesbjerg, downgrading app scripts to v1.3.4 did the trick for me. With Ionic version 3.0.0-rc.1, go to project directory:
Then modify the webpack.config.js as needed and run:
|
|
Should I downgrade to |
|
I also was able to get [ Unfortunately once we tested further, we found that much of the interaction in the app did not function with 1.3.4, so this is not a solution we can move forward with. ] |
|
@SusanKern, @osamasoliman, why isn't the Thanks, |
|
What issue are you having? Thanks, |
|
What's your Advice @danbucholtz ? Running |
|
ionic build android --prod --release is not working for me
|
|
Like the others describe, my custom webpack config is not being picked up when --prod flag is used. |
|
I'll check it out next week. Thanks, |
|
Any updates on this? |
|
I debugged it and it is related to the JS optimization that doesn't load the right webpack config: https://github.com/driftyco/ionic-app-scripts/blob/v1.3.5/src/optimization.ts#L28. You can run without the --optimizejs option and it will build successfully. I am not really sure how to fix that but the preprocess task pass Or maybe the config file doesn't need to be passed there but in that case the problem comes from the |
|
I need to look into this issue still. PRs are welcome if someone wants to dive in and fix it. The The Thanks, |
|
Is running without the |
|
@SusanKern, like Dan commented some days ago there #870 (comment), you can just replace The best solution is just to downgrade to v1.3.4 for now I guess, this is at least what we are doing on our project. If you definitvely want to use latest versions, you could test I'm not sure what is the gain of optimization, probably build size as Dan said it purges unused components from Ionic. |
|
Can you create a quick sample repo that shows the issue? I can probably fix it pretty quickly. Thanks, |
|
Sample there https://github.com/jbarbede/ionic-preview-app/tree/custom-webpack. The custom webpack config uses a css-loader to simply load a classic .css file imported in app.component to change the color of the header title.
|
|
@jbarbede you are reference a custom webpack script in your package.json But I can not find this in your project |
|
@DavidWiesner oh you're right, I just pushed it on the branch. |
|
You have to add an own config for optimization like so: If you do that the optimization.config.js is picked up correctly. Only problem so far is that I can't get it to work. It always results in problems with ngfactory.ts files. Edit: 🎉 Got it working on |
|
Putting my webpack config additionally to "ionic_dependency_tree" in package.json solved the issue for me. It stills feels like a bug though. |
|
Just copying your config over will not make the optimization step work correctly though. You would still have to change the module loader for ts/js files to the custom optimization loader (I guess?) This feels less like a bug and more like a breaking change to me. On the other hand, the error until now was just swallowed (webpack errors were not reported) and optimization was thus "skipped") Commit that broke this: |
|
well there definitely is something off here. i'm just saying that for my special setup and webpack config it works for now if do this in package.json: The dev build ignores the dependency tree setting, the prod build ignores the ionic_webpack one. Both build run fine now and produce the desired (working) outcome. Maybe @danbucholtz can you shed some light on why this is working? I expect that in a future version of app-scripts the production build will also load the |
@danbucholtz actually the typo is not the real issue here, i think it bothered you more than the rest of us ;-) - the problem is that custom webpack configs (via |
|
The optimization part of webpack is purely for building a dependency tree. It just happens to run Webpack. It could just as easily run Rollup, or even a custom tool. I am not clear on why this part needs to be customized. Is the build process failing on the Thanks, |
|
@danbucholtz please refer to my previous comment for a sample repo which shows the problem. The most common issue I can gather from this thread is for customising the webpack resolver so you can write import { HomePage } from 'src/pages/home/home';instead of import { HomePage } from '../../pages/home/home';Obviously if code is written using the former syntax, any webpack processing needs to include the custom resolver configuration. This is why (currently) you need 2 custom webpack files when building with the |
|
@danbucholtz because you asked: the build is failing on the optimization step. @fiznool explained why. Contrary to what i thought first, the problem is not that the If i think about it, it may be necessary to keep having two separate configuration options. If the "normal" config e.g. does some copy tasks, we wouldn't want that to be done in the optimisation step. We just need the stuff there that is needed for the code to "compile" properly. Again, in that case the documentation should make clear that both steps need to be configured in a lot of use cases.
|
|
Hello, I think that ionic_optimization config should be added in the README Thanks @danbucholtz |
|
@Xepe @metzc @fiznool @danbucholtz with @ionic/app-scripts 2.0.0 you can use the --optimization flag per https://github.com/ionic-team/ionic-app-scripts/blob/v2.0.0/src/optimization.ts. So the package.json build script for my "mpm" app looks like this:
However, now I get a webpack error after optimization completes successfully but without the --prod argument builds still work fine. |
|
You are likely running out of memory. You'll need to provide additional memory to Node. I think that will fix it. Thanks, |
|
Thanks @danbucholtz , but even with these two modified build scripts I get the same error (and the scripts still work without the --prod flag):
I have 32 GB RAM so I tried 16384 to no avail. Before upgrading yesterday I was able to run the build script with --prod just fine with @ionic/app-scripts 1.3.1. I also implemented the 2.0.0 new default webpack configuration. Does the introduction of the ModuleConcatenationPlugin or CommonChunksPlugin in 2.0.0 cause memory leaks or do memory leaks occur in ngc or optimization build tasks that affect webpack? |
|
@danbucholtz after a little more digging, my error is "Maximum call stack size exceeded at..." and not "Javascript heap out of memory" so I wonder if it is related to this issue? I am looking at node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js and will attempt to add Kleeb's fix for that old version in the 2.0.0 ionic-app-scripts.js:
|
|
@JoeMeeks, I'm not sure, maybe they do. I haven't seen that, though. Thanks, |
|
@danbucholtz looks like this original issue is solved with the --optimization arg so moving "Maximum call stack size exceeded" error convo to #996 |
|
added an ionic_dependency_tree entry to package.json. And Downgrade app-scripts was the solution in my case. Carlos. |
|
As for
|
|
@pyboosted could you please share your configuration? |
|
That didn't work for me, even after installing, reading and configuring the Here are the relevant parts: package.json: optimization.config.js: Ionic info: Command run: Error: tsconfig.json: webpack.config.js This error is referenced here (https://forum.ionicframework.com/t/error-during-executing-ionic-cordova-run-android-prod/100252/2) but no one has found a solution yet. |
|
Update: I think I've figured out this problem. I had to remove some unused code related to using: |
|
For me the package.json ./config/optimization.config.js var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/optimization.config.js');
module.exports = function () {
// your modifications on useDefaultConfig, in my case somethings like
//
// var env = process.env.DEPLOY_ENV || "develop";
// var deploymentConfigFile = './src/app/DeploymentConfig.' + env + '.ts';
// useDefaultConfig.resolve.alias = {
// "@app/DeploymentConfig": path.resolve(deploymentConfigFile)
//};
return useDefaultConfig;
};So no need to actually copy and modify the optimization configuration from app-scripts. |
|
hi, guys. this problem is always occured when using alias in custom webpack. usually, we have to profiling for each environments. but ionic-cli is not provide environments setting like ng-cli as default. As i know it happens when we build an AOT compile time in ngc. so, i change to here is my const webpack = require('webpack');
const defaults = require('@ionic/app-scripts/config/webpack.config');
const os = require('os');
const options = require('yargs').argv;
const CONFIG_REGEXP = os.type().indexOf("Windows") !== -1
? /src\\env\\dev.config.ts/
: /src\/env\/dev.config.ts/;
const configFilePath = ( options.profile ? options.profile : process.env.IONIC_ENV ) + '.config.ts';
console.log("Using config file is src/env/" + configFilePath);
module.exports = function () {
defaults.plugins.push(new webpack.NormalModuleReplacementPlugin(
CONFIG_REGEXP,
configFilePath
))
return defaults;
} |
|
@sburnicki, @pyboosted thanks, it works. And my optimization.config.js: const path = require('path');
const defaults = require('@ionic/app-scripts/config/optimization.config');
module.exports = function () {
// here to redefine alias again, just same as webpack.config.js
defaults.resolve.alias = {
kl: path.resolve('src/kl')
};
return defaults;
}; |
|
I can't seem to make this work with @ionic/[email protected]. The README no longer has any mention of The Edit: not sure why this comment unasigned @danbucholtz ... |
and others
From @SusanKern on May 2, 2017 13:52
Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
Current behavior:
Build using "--dev" flag works fine, pulling in configuration from custom webpack configuration file. Build using "--prod" flag fails because it cannot resolve modules as specified in custom webpack configuration file.
Expected behavior:
Both --prod and --dev builds would use same custom webpack configuration.
Steps to reproduce:
Related code:
Other information:
Partial output from successful "--dev" build: (Note that lines describing Env, Build type, Build flavor and Build variant come from custom webpack.config.js file)
Partial output from unsuccessful "--prod" build: (Note that the error indicates that a file from within a module cannot be resolved. This "resolve" should have been specified in the custom webpack configuration file, which apparently never ran.)
Custom webpack.config.js:
Ionic info: (run
ionic infofrom a terminal/cmd prompt and paste output below):insert the output from ionic info here
Copied from original issue: ionic-team/ionic-framework#11478
The text was updated successfully, but these errors were encountered: