Ionic-app-scripts: Unable to load moment-timezone in latest 0.0.43

[joshgarwood]

Short description of the problem:

After upgrading to rc2 and ionic-app-scripts 0.0.43, webpack seems to be having trouble loading moment-timezone.

What behavior are you expecting?

When Running ionic-serve, I get this error:

Uncaught Error: Cannot find module "./data/packed/latest.json"
    at webpackMissingModule (webpack:///./~/moment-timezone/index.js?:2:80)
    at eval (webpack:///./~/moment-timezone/index.js?:2:182)
    at Object.<anonymous> (http://localhost:8100/build/main.js:5824:1)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at eval (webpack:///./src/pipes/time.pipe.ts?:4:74)
    at Object.<anonymous> (http://localhost:8100/build/main.js:2643:1)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at eval (webpack:///./src/pages/trips/workflow/workflow.ts?:12:76)
    at Object.<anonymous> (http://localhost:8100/build/main.js:2587:1)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)

Steps to reproduce:

1. install moment-timezone (npm install moment-timezone --save)
2. Add moment-timezone to a component (import 'moment-timezone')
3. Run ionic serve

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

[tobias-a]

Facing the same issue for other libraries after running npm install. It seems that webpack version 2.1.0-beta.26 causes this behaviour. This version was released yesterday. ionic-app-scripts uses "webpack": "^2.1.0-beta.25" so the version is resolved to beta.26.

Workaround
As a temporary workaround I added "webpack": "2.1.0-beta.25" in the package.json of my app. Now webpack is resolved to beta.25 which solves the problem in my case.

[tinquang]

I am using app-scripts 0.0.44 with webpack 2.1.0-beta.25 but still got this error

[aggarwalankush]

I'm also getting same error in 0.0.44. Switching back to webpack beta 25 resolved it.

[tinquang]

My default webpack version in app-scripts 0.0.44 is beta 25 but I still get this error :(

[aggarwalankush]

@danbucholtz Earlier we had this issue with rollup in https://github.com/driftyco/ionic/issues/8375 but after moving to webpack, it was working. But in webpack beta26, there are loader breaking changes which may be causing this issue. Can you please look into this and add a fix in next version if possible?

[danbucholtz]

@aggarwalankush,

Yeah, I'll check it out.

Thanks,
Dan

[danbucholtz]

Should be fixed. Can you test please test again our nightly release and validate for me? I'll re-open if needed. Will go out Monday in an official release.

npm install @ionic/app-scripts@nightly

Thanks,
Dan

[aggarwalankush]

@danbucholtz It's working with nightly 👍

But ionic-app-scripts nightly version 0.0.45-201611190532 is throwing following error:

 copy: Error copying "/my_project_path/node_modules/ionicons/dist/fonts" 
            to "/my_project_path/www/assets/fonts" 

[tinquang]

yes, it works with nightly version. Thanks !
And it got the same error that aggarwalankush reported

[cyates81]

Just wanted to add my +1, ran into this issue, started using nightly, and getting same copying Error.

[danbucholtz]

The copying error is something I am working on. Our existing copy task was insufficient for a lot of cases but our fix is 75% done and will ship this week.

Thanks,
Dan

[TwixD]

It work for me (RC.3):

1. npm install @types/moment-timezone --save
2. npm install json-loader --save
3. On /node_modules/@ionic/app-scripts/config/webpack.config.js

   module: {
    loaders: [
      {
        test: /\.json$/,
        // loader: 'json'
        loader: 'json-loader' // Change this
      }
    ].concat(getSourcemapLoader())
  },

1. On component import moment from 'moment-timezone';

[aggarwalankush]

@TwixD you don't need to install json-loader, it works without that as well.
I am using it in my project without any problems https://github.com/aggarwalankush/ionic2-mosum/blob/master/src/pages/providers/util.service.ts#L6

[TwixD]

After upgrade rc3 to rc4 I realized that a major version of @ionic/app-scripts was released, that version has in node_modules/@ionic/app-scripts/package.json in dependencies "json-loader": "0.5.4" as default & in node_modules/@ionic/app-scripts/config/webpack.config.js loader : loader: 'json-loader'

[ghost]

The solution is to add those dependencies to your devDependencies in package.json file :

upgrade app-scripts to latest ad add sw-toolbox

"devDependencies": {
"@ionic/app-scripts": "1.0.0",
"sw-toolbox": "^3.4.0",
"typescript": "2.0.6"
}

or via cmd:

npm install @ionic/app-scripts@latest --save-dev
npm install sw-toolbox --save-dev

also maybe you need to delete in /src/app those two files (main.prod.ts & main.dev.ts) and create another instead, named main.ts contain:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

[almgwary]

i just reinstalled my packages and this error appear .

[almgwary]

you need to install

npm install moment moment-timezone --save 
npm install @types/moment @types/moment-timezone --save

and it is works