Barrel error with webpack (0.0.39)

[maxkunitsa]

Short description of the problem:

In version 0.0.39 rollup bundler works correct, but with webpack bundler i have error in browser console: 'Error: Cannot find module "../../common/services/index/"(…)'. This file is barrel.

What behaviour are you expecting?

Correct build both with rollup or webpack without any error's in console.

Steps to reproduce:

1. Create 'barrel' file in ionic project
2. Run 'ionic serve' with ionic-app-scripts@0.0.39 and webpack as bundler
3. Browser started with white screen and error in console: 'Error: Cannot find module "../../common/services/index/"(…)'

Example of barrel (https://angular.io/docs/ts/latest/guide/glossary.html#!#sts=Barrel)

//common/services/index.ts
export * from './utils/color.utils';
export * from './utils/localstorage.utils';
export * from './utils/math.utils';
export * from './utils/uuid.utils';

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

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
Dont have any ideas

[ValterSantosMatos]

+1, @maxkunitsa not a fix but until this issue is fixed you can use a rollup config file instead with 0.0.39.

[alan-agius4]

Had an issue with barrels and webpack sometime ago.
Had it solve with https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-commonjs

[maxkunitsa]

@alan-agius4 u use it as plugin in webpack config or ...?

[alan-agius4]

@maxkunitsa I used it as a loader.

npm i babel-loader babel-plugin-transform-es2015-modules-commonjs --save-dev

Add the below to the webpack config

module: {
    loaders: [
        {
            test: /(.js|.ts)$/,
            exclude: "node_modules",
            loader: "babel-loader",
            include: [
                `src/app`,
                `.tmp/app`
            ].map(x => path.resolve(x)),
            query: {
                plugins: [
                    "babel-plugin-transform-es2015-modules-commonjs"
                ].map(require.resolve)
            }
        }
    ]
}

I can't remember if you need babel-core as well as a dependency.

If this doesn't work I'll re-post an update tomorrow, as right now I don't have access to my code base.

[maxkunitsa]

@alan-agius4 big tnx for helping, but suggested solution didnt help.

[alan-agius4]

Do you have a link for the repo that I can have a look at?

[maxkunitsa]

@alan-agius4 sorry, but no, because project is private...

[mbakker96]

I've the same problem.

@maxkunitsa did you try the fix from @ValterSantosMatos?

[alan-agius4]

Hi, all I updated my above snippet. Can you have a look and see if it works now?

[mbakker96]

Hi @alan-agius4,

I see in your snippet that you use test: "/\.js$/" but I quest that it is not working with *.ts files. or am I wrong?

[alan-agius4]

@mbakker96 no it must be .js as at that stage the ts files are already transpiled

[maxkunitsa]

@alan-agius4 hello. I tried your snippet and still got error in console. I shared my webpack config, could u please take a look? Maybe something else should be changed https://www.dropbox.com/s/klmhtase7c1670x/webpack.config.js?dl=0

[mbakker96]

I think i've a different error. I created a different issue

[ValterSantosMatos]

@maxkunitsa and @alan-agius4 I also tried the snipped and didn't work, just changing it to rollup.