fix: cli template and widget compile issue (#1717)

packages/babel-settings/babel.config.js

@@ -31,25 +31,12 @@ function normalizePresetEnvOptions({
   };
 }
 
-function checkGulp(caller) {
-  return !!(caller && caller.name === 'babel-gulp');
-}
-
 module.exports = function baseBabelConfig(
   api,
   { presetEnvOptions = {}, sourceType = 'module' } = {},
 ) {
-  const isGulp = api.caller(checkGulp);
+  api.cache(true);
   const newPlugins = [...plugins];
-  if (isGulp) {
-    // use `babel-plugin-direct-import` to import juno directly at widget lib release
-    newPlugins.push([
-      'babel-plugin-direct-import',
-      {
-        modules: ['@ringcentral/juno', '@ringcentral/juno/icon'],
-      },
-    ]);
-  }
   return {
     presets: [
       ['@babel/preset-env', normalizePresetEnvOptions(presetEnvOptions)],

packages/babel-settings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral-integration/babel-settings",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "index.js",
   "description": "RingCentral Integration shared babel settings",
   "repository": {
@@ -26,7 +26,6 @@
     "@babel/preset-typescript": "^7.13.0",
     "@babel/register": "^7.10.5",
     "babel-plugin-const-enum": "^1.0.1",
-    "babel-plugin-direct-import": "^0.9.2",
     "core-js": "^2.6.11",
     "typescript": "^4.5.4"
   },

packages/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral-integration/i18n",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "A simple I18n implementation used in RingCentral Integration projects.",
   "main": "index.js",
   "repository": {

packages/ringcentral-integration/package.json

@@ -95,7 +95,7 @@
   },
   "peerDependencies": {
     "@ringcentral-integration/core": "^0.13.0",
-    "@ringcentral-integration/i18n": "^2.0.1",
+    "@ringcentral-integration/i18n": "^2.1.1",
     "@ringcentral-integration/phone-number": "^1.0.4",
     "@ringcentral/juno": "^1.12.6-beta.5910-6eeb3bdd",
     "@ringcentral/sdk": "^4.6.0",

packages/ringcentral-widgets-cli/templates/Project/package-template.json

@@ -6,43 +6,68 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 0",
     "start": "npm run dev-server",
-    "dev-server": "webpack-dev-server --config webpack-dev-server.config.js --progress --colors --inline",
-    "build": "NODE_ENV=production webpack --config webpack-production.config.js --progress --colors"
+    "dev-server": "webpack serve --config webpack-dev-server.config.js",
+    "build": "NODE_ENV=production webpack --config webpack-production.config.js"
   },
   "devDependencies": {
-    "@ringcentral-integration/babel-settings": "^0.0.1",
+    "@ringcentral-integration/babel-settings": "^0.1.0",
     "@ringcentral-integration/locale-loader": "^2.0.0",
     "@types/classnames": "^2.2.7",
     "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.0.9",
     "@types/react-router": "^5.1.2",
     "autoprefixer": "^9.6.1",
+    "assert": "^2.0.0",
     "babel-loader": "^8.2.2",
+    "browserify": "^14.4.0",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^2.1.1",
+    "crypto-browserify": "^3.12.0",
+    "console-browserify": "^1.2.0",
+    "constants-browserify": "^1.0.0",
     "dotenv": "^6.2.0",
+    "domain-browser": "^4.22.0",
+    "events": "^3.3.0",
     "file-loader": "^6.2.0",
-    "sass": "^1.43.4",
+    "https-browserify": "^1.0.0",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
     "postcss-loader": "^3.0.0",
+    "process": "^0.11.10",
+    "punycode": "^2.1.1",
+    "querystring-es3": "^0.2.1",
     "react-svg-loader": "^3.0.3",
+    "sass": "^1.43.4",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "string_decoder": "^1.3.0",
+    "string-replace-loader": "^3.0.3",
+    "timers-browserify": "^2.0.12",
+    "tty-browserify": "^0.0.1",
     "url-loader": "^4.1.1",
+    "url": "^0.11.0",
+    "util": "^0.12.4",
+    "vm-browserify": "1.1.2",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0",
     "webpack-dev-server": "^4.3.1"
   },
   "dependencies": {
     "@rc-ex/core": "^0.10.5",
-    "@ringcentral-integration/commons": "^0.13.0",
-    "@ringcentral-integration/core": "^0.13.0",
-    "@ringcentral-integration/i18n": "^2.0.1",
+    "@ringcentral-integration/commons": "^0.13.3",
+    "@ringcentral-integration/core": "^0.13.3",
+    "@ringcentral-integration/i18n": "^2.1.1",
     "@ringcentral-integration/phone-number": "^1.0.2",
+    "@ringcentral-integration/widgets": "^0.13.3",
     "@ringcentral/juno": "^1.12.6-beta.5910-6eeb3bdd",
     "@ringcentral/sdk": "^4.5.0",
     "@ringcentral/subscriptions": "^4.5.0",
     "classnames": "^2.2.5",
-    "format-message": "^5.1.2",
+    "format-message": "^6.2.3",
     "isomorphic-fetch": "^2.2.1",
     "normalize-css": "^2.3.1",
     "prop-types": "^15.7.2",
@@ -54,7 +79,6 @@
     "react-router-redux": "^4.0.7",
     "redux": "^4.0.4",
     "ringcentral-client": "^1.0.0-beta.2",
-    "@ringcentral-integration/widgets": "^0.13.0",
     "styled-components": "^5.3.3"
   }
 }

packages/ringcentral-widgets-cli/templates/Project/src/containers/App/index.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { Router, Route } from 'react-router';
 
-import PhoneProvider from '@ringcentral-integration/widgets/lib/PhoneProvider';
-
+import { PhoneProvider } from '@ringcentral-integration/widgets/lib/phoneContext';
 import { RegionSettingsPage } from '@ringcentral-integration/widgets/containers/RegionSettingsPage';
 
 import SettingsPage from '@ringcentral-integration/widgets/containers/SettingsPage';

packages/ringcentral-widgets-cli/templates/Project/src/modules/Phone/index.js

@@ -7,30 +7,30 @@ import { LocalForageStorage } from '@ringcentral-integration/commons/lib/LocalFo
 
 import { Alert } from '@ringcentral-integration/commons/modules/Alert';
 import { AlertUI } from '@ringcentral-integration/widgets/modules/AlertUI';
-import AccountInfo from '@ringcentral-integration/commons/modules/AccountInfo';
+import { AccountInfo } from '@ringcentral-integration/commons/modules/AccountInfoV2';
 import { AppFeatures } from '@ringcentral-integration/commons/modules/AppFeatures';
-import Auth from '@ringcentral-integration/commons/modules/Auth';
+import { Auth } from '@ringcentral-integration/commons/modules/AuthV2';
 import { Brand } from '@ringcentral-integration/commons/modules/Brand';
-import ConnectivityMonitor from '@ringcentral-integration/commons/modules/ConnectivityMonitor';
-import DateTimeFormat from '@ringcentral-integration/commons/modules/DateTimeFormat';
+import { ConnectivityMonitor } from '@ringcentral-integration/commons/modules/ConnectivityMonitorV2';
+import { DateTimeFormat } from '@ringcentral-integration/commons/modules/DateTimeFormatV2';
 import { DataFetcherV2 } from '@ringcentral-integration/commons/modules/DataFetcherV2';
-import DialingPlan from '@ringcentral-integration/commons/modules/DialingPlan';
-import Environment from '@ringcentral-integration/commons/modules/Environment';
+import { DialingPlan } from '@ringcentral-integration/commons/modules/DialingPlanV2';
+import { Environment } from '@ringcentral-integration/commons/modules/EnvironmentV2';
 import { ExtensionFeatures } from '@ringcentral-integration/commons/modules/ExtensionFeatures';
-import ExtensionInfo from '@ringcentral-integration/commons/modules/ExtensionInfo';
-import GlobalStorage from '@ringcentral-integration/commons/modules/GlobalStorage';
+import { ExtensionInfo } from '@ringcentral-integration/commons/modules/ExtensionInfoV2';
+import { GlobalStorage } from '@ringcentral-integration/commons/modules/GlobalStorageV2';
 import { Locale } from '@ringcentral-integration/commons/modules/Locale';
-import RateLimiter from '@ringcentral-integration/commons/modules/RateLimiter';
+import { RateLimiter } from '@ringcentral-integration/commons/modules/RateLimiterV2';
 import { RegionSettings } from '@ringcentral-integration/commons/modules/RegionSettings';
-import Storage from '@ringcentral-integration/commons/modules/Storage';
+import { Storage } from '@ringcentral-integration/commons/modules/StorageV2';
 import { SleepDetector } from '@ringcentral-integration/commons/modules/SleepDetectorV2';
-import Subscription from '@ringcentral-integration/commons/modules/Subscription';
+import { Subscription } from '@ringcentral-integration/commons/modules/SubscriptionV2';
 import { ConnectivityBadgeUI } from '@ringcentral-integration/widgets/modules/ConnectivityBadgeUI';
 import { ConnectivityManager } from '@ringcentral-integration/widgets/modules/ConnectivityManager';
 import { LoginUI } from '@ringcentral-integration/widgets/modules/LoginUI';
 import { OAuth } from '@ringcentral-integration/widgets/modules/OAuth';
 import { RegionSettingsUI } from '@ringcentral-integration/widgets/modules/RegionSettingsUI';
-import RouterInteraction from '@ringcentral-integration/widgets/modules/RouterInteraction';
+import { RouterInteraction } from '@ringcentral-integration/widgets/modules/RouterInteraction';
 import { SettingsUI } from '@ringcentral-integration/widgets/modules/SettingsUI';
 
 // user Dependency Injection with decorator to create a phone class

packages/ringcentral-widgets-cli/templates/Project/webpack-dev-server.config.js

@@ -24,19 +24,57 @@ const config = {
     redirect: './src/redirect.js',
   },
   devServer: {
-    contentBase: buildPath,
+    static: buildPath,
     hot: true,
-    inline: true,
     port: 8080,
   },
   devtool: 'eval-source-map',
   output: {
     path: buildPath,
     filename: '[name].js',
   },
+  resolve: {
+    // webpack < 5 used to include polyfills for node.js core modules by default.
+    // This is no longer the case. Verify if you need this module and configure a polyfill for it.
+    //
+    // more doc: https://webpack.js.org/configuration/resolve/#resolvefallback
+    //
+    fallback: {
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      vm: require.resolve('vm-browserify'),
+      timers: require.resolve('timers-browserify'),
+      process: require.resolve('process/browser'),
+      assert: require.resolve('assert'),
+      buffer: require.resolve('buffer'),
+      console: require.resolve('console-browserify'),
+      constants: require.resolve('constants-browserify'),
+      domain: require.resolve('domain-browser'),
+      events: require.resolve('events'),
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
+      os: require.resolve('os-browserify/browser'),
+      path: require.resolve('path-browserify'),
+      punycode: require.resolve('punycode'),
+      querystring: require.resolve('querystring-es3'),
+      string_decoder: require.resolve('string_decoder'),
+      sys: require.resolve('util'),
+      tty: require.resolve('tty-browserify'),
+      url: require.resolve('url'),
+      util: require.resolve('util'),
+      zlib: require.resolve('browserify-zlib'),
+    },
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+      Buffer: ['buffer', 'Buffer'],
+      setImmediate: ['setimmediate', 'setImmedate'],
+      clearImmediate: ['setimmediate', 'clearImmedate'],
+    }),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('development'),
@@ -83,14 +121,21 @@ const config = {
       },
       {
         test: /\.woff|\.woff2|.eot|\.ttf/,
-        use:
-          'url-loader?limit=15000&publicPath=./&name=fonts/[name]_[hash].[ext]',
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 15000,
+            name: 'fonts/[name]_[hash].[ext]',
+            // TODO: it should be upgrade css-loader and update config
+            esModule: false,
+          },
+        },
       },
       {
         test: /\.png|\.jpg|\.gif|\.svg/,
-        exclude: /@ringcentral-integration(\/|\\)widgets(\/|\\)assets(\/|\\)images(\/|\\).+\.svg/,
-        use:
-          'url-loader?limit=20000&publicPath=./&name=images/[name]_[hash].[ext]',
+        exclude:
+          /@ringcentral-integration(\/|\\)widgets(\/|\\)assets(\/|\\)images(\/|\\).+\.svg/,
+        use: 'url-loader?limit=20000&publicPath=./&name=images/[name]_[hash].[ext]',
       },
       {
         test: /\.sass|\.scss/,

packages/ringcentral-widgets-cli/templates/Project/webpack-production.config.js

@@ -28,7 +28,46 @@ const config = {
     path: buildPath,
     filename: '[name].js',
   },
+  resolve: {
+    // webpack < 5 used to include polyfills for node.js core modules by default.
+    // This is no longer the case. Verify if you need this module and configure a polyfill for it.
+    //
+    // more doc: https://webpack.js.org/configuration/resolve/#resolvefallback
+    //
+    fallback: {
+      crypto: require.resolve('crypto-browserify'),
+      stream: require.resolve('stream-browserify'),
+      vm: require.resolve('vm-browserify'),
+      timers: require.resolve('timers-browserify'),
+      process: require.resolve('process/browser'),
+      assert: require.resolve('assert'),
+      buffer: require.resolve('buffer'),
+      console: require.resolve('console-browserify'),
+      constants: require.resolve('constants-browserify'),
+      domain: require.resolve('domain-browser'),
+      events: require.resolve('events'),
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
+      os: require.resolve('os-browserify/browser'),
+      path: require.resolve('path-browserify'),
+      punycode: require.resolve('punycode'),
+      querystring: require.resolve('querystring-es3'),
+      string_decoder: require.resolve('string_decoder'),
+      sys: require.resolve('util'),
+      tty: require.resolve('tty-browserify'),
+      url: require.resolve('url'),
+      util: require.resolve('util'),
+      zlib: require.resolve('browserify-zlib'),
+    },
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
   plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+      Buffer: ['buffer', 'Buffer'],
+      setImmediate: ['setimmediate', 'setImmedate'],
+      clearImmediate: ['setimmediate', 'clearImmedate'],
+    }),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('production'),
@@ -81,18 +120,24 @@ const config = {
       },
       {
         test: /\.woff|\.woff2|.eot|\.ttf/,
-        use: 'url-loader?limit=15000&publicPath=./&name=fonts/[name]_[hash].[ext]',
+        // use:
+        //   'url-loader?limit=15000&publicPath=./&name=fonts/[name]_[hash].[ext]',
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 15000,
+            name: 'fonts/[name]_[hash].[ext]',
+            // TODO: it should be upgrade css-loader and update config
+            esModule: false,
+          },
+        },
       },
       {
         test: /\.png|\.jpg|\.gif|\.svg/,
         exclude:
-          /ringcentral-integration(\/|\\)widgets(\/|\\)assets(\/|\\)images(\/|\\).+\.svg/,
+          /@ringcentral-integration(\/|\\)widgets(\/|\\)assets(\/|\\)images(\/|\\).+\.svg/,
         use: 'url-loader?limit=20000&publicPath=./&name=images/[name]_[hash].[ext]',
       },
-      {
-        test: /\.ogg$/,
-        use: 'file-loader?publicPath=./&name=audio/[name]_[hash].[ext]',
-      },
       {
         test: /\.sass|\.scss/,
         use: [
@@ -121,6 +166,10 @@ const config = {
           },
         ],
       },
+      {
+        test: /\.ogg$/,
+        use: 'file-loader?publicPath=./&name=audio/[name]_[hash].[ext]',
+      },
     ],
   },
 };