diff --git a/__tests__/FlagDropDown.test.js b/__tests__/FlagDropDown.test.js index 57a2999a9..c10e3bae4 100644 --- a/__tests__/FlagDropDown.test.js +++ b/__tests__/FlagDropDown.test.js @@ -65,8 +65,10 @@ describe('FlagDropDown', function () { // eslint-disable-line func-names }; const subject = await this.makeSubject(); - expect(subject.state().countryCode).toBe('jp'); - window.localStorage.clear(); + subject.instance().utilsScriptDeferred.then(() => { + expect(subject.state().countryCode).toBe('jp'); + window.localStorage.clear(); + }); }); it('should has .separate-dial-code class when with separateDialCode = true', () => { @@ -160,7 +162,9 @@ describe('FlagDropDown', function () { // eslint-disable-line func-names }; const subject = await this.makeSubject(); - expect(subject.state().countryCode).toBe('jp'); + subject.instance().utilsScriptDeferred.then(() => { + expect(subject.state().countryCode).toBe('jp'); + }); }); describe('with original ReactTestUtils', () => { diff --git a/config/babel.dev.js b/config/babel.dev.js index ae1fb9f9e..c335405e6 100644 --- a/config/babel.dev.js +++ b/config/babel.dev.js @@ -6,9 +6,17 @@ module.exports = { // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in OS temporary directory for faster rebuilds. cacheDirectory: true, + env: { + test: { + plugins: [ + // to enable dynamic import in tests + require.resolve('babel-plugin-dynamic-import-node') + ] + } + }, presets: [ // Latest stable ECMAScript features - ['latest'], + ['env'], // JSX, Flow require.resolve('babel-preset-react'), ], @@ -17,6 +25,8 @@ module.exports = { require.resolve('babel-plugin-transform-class-properties'), // { ...todo, completed: true } require.resolve('babel-plugin-transform-object-rest-spread'), + // to enable import() [dynamic import] + require.resolve('babel-plugin-syntax-dynamic-import'), // function* () { yield 42; yield 43; } [require.resolve('babel-plugin-transform-regenerator'), { // Async functions are converted to generators by babel-preset-latest diff --git a/config/babel.prod.js b/config/babel.prod.js index b100665e9..47ac8040f 100644 --- a/config/babel.prod.js +++ b/config/babel.prod.js @@ -5,7 +5,7 @@ module.exports = { babelrc: false, presets: [ // Latest stable ECMAScript features - ['latest', { es2015: { 'modules': false } }], + ['env', { es2015: { 'modules': false } }], // JSX, Flow require.resolve('babel-preset-react') ], @@ -36,5 +36,7 @@ module.exports = { // * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/ // TODO: Enable again when these issues are resolved. // require.resolve('babel-plugin-transform-react-constant-elements') + // to enable import() [dynamic import] + require.resolve('babel-plugin-syntax-dynamic-import'), ] }; diff --git a/package.json b/package.json index cb790f728..20bbaf293 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,9 @@ "babel-plugin-transform-react-remove-prop-types": "^0.4.13", "babel-plugin-transform-regenerator": "^6.21.0", "babel-plugin-transform-runtime": "^6.15.0", - "babel-preset-latest": "^6.16.0", + "babel-plugin-dynamic-import-node": "^2.0.0", + "babel-plugin-syntax-dynamic-import": "^6.18.0", + "babel-preset-env": "^1.1.8", "babel-preset-react": "^6.16.0", "babel-preset-react-app": "^2.0.1", "babel-runtime": "^6.20.0", diff --git a/src/components/IntlTelInputApp.js b/src/components/IntlTelInputApp.js index 0db261d04..d720e0699 100644 --- a/src/components/IntlTelInputApp.js +++ b/src/components/IntlTelInputApp.js @@ -512,7 +512,10 @@ class IntlTelInputApp extends Component { }); } } else { - this.utilsScriptDeferred.resolve(); + import('../libphonenumber').then(() => { + this.loadUtils(); + this.utilsScriptDeferred.resolve(); + }); } if (this.tempCountry === 'auto') { diff --git a/src/example.js b/src/example.js index a5680888a..ee7aabb79 100644 --- a/src/example.js +++ b/src/example.js @@ -79,7 +79,6 @@ class DemoComponent extends Component { value={ this.state.phone1 } geoIpLookup={ lookup } css={ ['intl-tel-input', 'form-control'] } - utilsScript="libphonenumber.js" format />
Phone Number: {this.state.phone1 }
@@ -91,7 +90,6 @@ class DemoComponent extends Component { defaultCountry={ 'jp' } value={ this.state.phone2 } css={ ['intl-tel-input', 'form-control'] } - utilsScript="libphonenumber.js" />
Phone Number: {this.state.phone2}