fix: fix cjs build (#496)

Author: MarcusNotheis

.storybook/main.js

@@ -28,7 +28,8 @@ module.exports = {
         {
           loader: require.resolve('babel-loader'),
           options: {
-            presets: [[require.resolve('babel-preset-react-app'), { flow: false, typescript: true }]]
+            envName: 'esm',
+            configFile: path.resolve(PATHS.root, 'babel.config.js')
           }
         }
       ]
@@ -55,10 +56,35 @@ module.exports = {
         include: DEPENDENCY_REGEX,
         loader: 'babel-loader',
         options: {
+          sourceType: 'unambiguous',
           babelrc: false,
           configFile: false,
           compact: false,
-          presets: [['babel-preset-react-app/dependencies', { helpers: true }]],
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                // Allow importing core-js in entrypoint and use browserlist to select polyfills
+                useBuiltIns: 'entry',
+                // Set the corejs version we are using to avoid warnings in console
+                // This will need to change once we upgrade to corejs@3
+                corejs: 3,
+                // Do not transform modules to CJS
+                modules: false,
+                // Exclude transforms that make all code slower
+                exclude: ['transform-typeof-symbol']
+              }
+            ]
+          ],
+          plugins: [
+            [
+              '@babel/plugin-transform-runtime',
+              {
+                version: require('@babel/runtime/package.json').version,
+                useESModules: true
+              }
+            ]
+          ],
           cacheDirectory: true,
           cacheCompression: false,
 

babel.config.js

@@ -0,0 +1,50 @@
+module.exports = function (api) {
+  return {
+    presets: [
+      api.env('test') && [
+        // ES features necessary for user's Node version
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      !api.env('test') && [
+        '@babel/preset-env',
+        {
+          useBuiltIns: 'entry',
+          corejs: 3,
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      '@babel/preset-react',
+      '@babel/preset-typescript'
+    ].filter(Boolean),
+    plugins: [
+      [
+        '@babel/plugin-proposal-decorators',
+        {
+          legacy: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-class-properties',
+        {
+          loose: true
+        }
+      ],
+      '@babel/plugin-proposal-numeric-separator',
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          version: require('@babel/runtime/package.json').version,
+          useESModules: api.env('esm')
+        }
+      ],
+      '@babel/plugin-proposal-optional-chaining',
+      '@babel/plugin-proposal-nullish-coalescing-operator'
+    ]
+  };
+};

babel.config.json

@@ -39,12 +39,5 @@ module.exports = {
     '^@ui5/webcomponents-react-charts/(.*)$': '<rootDir>/packages/charts/src/$1',
     '\\.(css|less)$': 'identity-obj-proxy'
   },
-  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
-  globals: {
-    'ts-jest': {
-      diagnostics: {
-        ignoreCodes: [2307]
-      }
-    }
-  }
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx']
 };

config/jest.config.js

@@ -7,9 +7,6 @@ import ResizeObserver from 'resize-observer-polyfill';
 import 'intersection-observer';
 import '@ui5/webcomponents/dist/generated/json-imports/i18n';
 
-process.env.NODE_ENV = 'test';
-process.env.BABEL_ENV = 'test';
-
 // React 16 Enzyme adapter
 Enzyme.configure({ adapter: new Adapter() });
 

config/jestsetup.ts

@@ -6,7 +6,10 @@
   "license": "Apache-2.0",
   "scripts": {
     "start": "lerna run build:i18n && start-storybook -p 6006 -c .storybook",
-    "build": "yarn clean && lerna run build --stream && node ./scripts/rollup/build.js",
+    "build": "npm-run-all -s build:clean build:esm build:cjs",
+    "build:clean": "yarn clean",
+    "build:esm": "lerna run build --stream",
+    "build:cjs": "node ./scripts/rollup/build.js",
     "build:storybook": "lerna run build:i18n && build-storybook -c .storybook -o .out",
     "pretest": "rimraf coverage && lerna run build:i18n",
     "test": "jest --config=config/jest.config.js --coverage",
@@ -32,8 +35,15 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-decorators": "^7.8.3",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.8.3",
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+    "@babel/plugin-transform-runtime": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-json": "^4.0.3",
@@ -50,8 +60,8 @@
     "@typescript-eslint/parser": "^2.31.0",
     "@ui5/webcomponents-tools": "^1.0.0-rc.6",
     "babel-code-frame": "^6.26.0",
+    "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
-    "babel-preset-react-app": "^9.1.2",
     "chalk": "^4.0.0",
     "dedent": "^0.7.0",
     "dotenv": "^8.2.0",
@@ -67,7 +77,7 @@
     "google-closure-compiler": "^20200406.0.0",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^25.5.4",
+    "jest": "^26.0.1",
     "jest-canvas-mock": "^2.2.0",
     "jest-environment-jsdom-sixteen": "^1.0.2",
     "jest-enzyme": "^7.1.2",
@@ -93,7 +103,8 @@
     "typescript": "^3.8.3"
   },
   "resolutions": {
-    "@types/react": "16.9.34"
+    "@types/react": "16.9.34",
+    "@babel/runtime": "7.9.6"
   },
   "husky": {
     "hooks": {

package.json

@@ -27,7 +27,7 @@
     "build": "npm-run-all -s build:rollup build:polyfills"
   },
   "dependencies": {
-    "@babel/runtime": "7.9.0",
+    "@babel/runtime": "7.9.6",
     "core-js": "3.6.4",
     "intersection-observer": "0.8.0",
     "proxy-polyfill": "0.3.1",

packages/base/package.json

@@ -21,7 +21,7 @@
     "build": "rollup -c rollup.config.js"
   },
   "dependencies": {
-    "@babel/runtime": "7.9.0",
+    "@babel/runtime": "7.9.6",
     "chart.js": "^2.9.3",
     "chartjs-plugin-datalabels": "^0.7.0",
     "get-best-contrast-color": "^0.3.1",

packages/charts/package.json

@@ -31,7 +31,7 @@
     "build:assets": "node ../../scripts/generate-assets/index.js"
   },
   "dependencies": {
-    "@babel/runtime": "7.9.0",
+    "@babel/runtime": "7.9.6",
     "@ui5/webcomponents-react-base": "^0.9.2",
     "lodash.debounce": "^4.0.8",
     "react-content-loader": "^5.0.4",

packages/main/package.json

@@ -14,6 +14,7 @@ const fs = require('fs');
 const Packaging = require('./packaging');
 const Modules = require('./modules');
 const { createDeclarationFiles } = require('./declarations');
+const PATHS = require('../../config/paths');
 
 const argv = require('minimist')(process.argv.slice(2));
 const forcePrettyOutput = argv.pretty;
@@ -175,9 +176,7 @@ function shouldSkipBundle(bundle, bundleType) {
 
 function getBabelConfig(updateBabelOptions, bundleType, filename) {
   let options = {
-    exclude: '/**/node_modules/**',
-    presets: [['babel-preset-react-app/prod', { absoluteRuntime: false }]],
-    plugins: [],
+    configFile: path.resolve(PATHS.root, 'babel.config.js'),
     babelHelpers: 'runtime',
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
   };

scripts/rollup/build.js

@@ -30,7 +30,7 @@ const rollupConfigFactory = (pkgName, externals = []) => {
     babel({
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
       babelHelpers: 'runtime',
-      configFile: path.resolve(PATHS.root, 'babel.config.json')
+      configFile: path.resolve(PATHS.root, 'babel.config.js')
     })
   ];