fix(storybook): nodejs-17+ requires webpack@5+ [1]

1: storybookjs/storybook#16555
conversionxl · Feb 20, 2023 · f0ecd9a · f0ecd9a
1 parent 7afba39
commit f0ecd9a
Show file tree

Hide file tree

Showing 9 changed files with 294 additions and 13 deletions.
diff --git a/packages/cxl-ui/package.json b/packages/cxl-ui/package.json
@@ -38,6 +38,7 @@
     "mark.js": "^8.11.1",
     "postcss": "^8.2.4",
     "postcss-preset-env": "^6.7.0",
+    "stream-browserify": "^3.0.0",
     "subtitle": "^4.2.1"
   },
   "scripts": {

diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
@@ -1,4 +1,8 @@
 module.exports = {
+  // @see https://github.com/storybookjs/storybook/issues/16555
+  core: {
+    builder: 'webpack5',
+  },
   // @see https://github.com/storybookjs/storybook/issues/12307
   stories: ['../**/*.stories.js'],
   addons: [
@@ -8,4 +12,17 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-viewport',
   ],
+  // @see https://stackoverflow.com/questions/61375674/upgrade-to-webpack-5-breaking-storybook-5
+  webpackFinal: (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        fallback: {
+          ...config.fallback,
+          stream: require.resolve('stream-browserify'),
+        },
+      },
+    };
+  },
 };
diff --git a/packages/storybook/cxl-ui/cxl-paywall.stories.js b/packages/storybook/cxl-ui/cxl-paywall.stories.js
@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import '../../cxl-ui/src/components/cxl-paywall';
 import { loremIpsum } from 'lorem-ipsum';
 

diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card.story.js
@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
 import '@conversionxl/cxl-ui/src/components/cxl-accordion-card.js';
 import '@conversionxl/cxl-ui/src/components/cxl-save-favorite.js';

diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-playbook-accordion.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-playbook-accordion.story.js
@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import playbookStepData from './cxl-playbook-accordion.data.json';
 
 export const CXLPlaybookAccordion = ({ FeedbackButtonLabel, PlaybookId }) => html`

diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/partials/cxl-singleversion-card-display.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/partials/cxl-singleversion-card-display.js
@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 const CxlSingleversionCardDisplay = (el, userId, selected) => {
   const postType = el.cxl_hybrid_attr_post['@attributes'].class.includes(

diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-faq.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-faq.story.js
@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
 import faqData from './theme=cxl-faq.data.json';
 

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -29,5 +29,9 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16"
   }
 }