Apply suggested workaround artisanofcode-archive/storybook-preset-cra…

…co#14 (comment)

.storybook/craco.storybook.config.js

@@ -0,0 +1,20 @@
+const cracoConfig = require('../craco.config');
+
+/**
+ * Add a plugin to remove ModuleScopePlugin from webpack when running storybook because it messes
+ * with storybook-preset-craco. 
+ */
+
+cracoConfig.plugins.push({
+  plugin: {
+    overrideWebpackConfig: ({ webpackConfig }) => {
+      webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
+        (plugin) => plugin.constructor.name !== 'ModuleScopePlugin'
+      );
+
+      return webpackConfig;
+    },
+  },
+});
+
+module.exports = cracoConfig;

.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path')
+
 module.exports = {
   "stories": [
     "../src/**/*.stories.mdx",
@@ -6,7 +8,12 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "storybook-preset-craco" // changing this line to "@storybook/preset-create-react-app" fixes storybook build
+    {
+      name: 'storybook-preset-craco',
+      options: {
+        cracoConfigFile: path.join(__dirname, 'craco.storybook.config.js'),
+      },
+    },
   ],
   "framework": "@storybook/react",
   "core": {

craco.config.js

@@ -1,3 +1,4 @@
 module.exports = {
     // Nothing here in particular
+    plugins: []
 };