get storybook to build again in a webpack 5 world

Signed-off-by: shmck <[email protected]>

Author: ShMcK

web-app/.storybook/.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      ["react-app", { "flow": false, "typescript": true }],
+      "@emotion/babel-preset-css-prop"
+    ]
+  }

web-app/.storybook/addons.ts

@@ -1,3 +1,3 @@
-import '@storybook/addon-actions/register'
-import '@storybook/addon-knobs/register'
-import '@storybook/addon-links/register'
+import '@storybook/addon-actions'
+import '@storybook/addon-knobs'
+import '@storybook/addon-links'

web-app/.storybook/webpack.config.js

@@ -12,27 +12,10 @@ module.exports = ({ config }) => {
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     loader: require.resolve('babel-loader'),
-    options: {
-      plugins: [
-        new MiniCssExtractPlugin(),
-        [
-          'babel-plugin-import',
-          {
-            libraryName: '@alifd/next',
-            style: true,
-          },
-        ],
-      ],
-      presets: [
-        // react-app
-        ['react-app', { flow: false, typescript: true }],
-        // allow emotion css prop on html
-        ['@emotion/babel-preset-css-prop'],
-      ],
-    },
   })
 
   config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }))
+  // config.plugins.push(['import', { libraryName: '@alifd/next', libraryDirectory: 'lib', style: true }])
 
   config.resolve.extensions.push('.ts', '.tsx')
 

web-app/package.json

@@ -45,6 +45,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.14.0",
+    "@babel/helper-environment-visitor": "7.16.7",
     "@storybook/addon-actions": "6.4.0",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-links": "6.4.0",

web-app/yarn.lock

@@ -415,6 +415,13 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
+"@babel/[email protected]":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-explode-assignable-expression@^7.12.13":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.13.0.tgz#17b5c59ff473d9f956f40ef570cf3a76ca12657f"
@@ -825,6 +832,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
   integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-validator-identifier@^7.9.0", "@babel/helper-validator-identifier@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
@@ -2804,6 +2816,14 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.7":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.3.3":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.5.tgz#d88ae7e2fde86bfbfe851d4d81afa70a997b5d15"