wix-incubator / mjml-react

React component library to generate the HTML emails on the fly
MIT License
993 stars 50 forks source link

Storybook config #70

Closed trigun539 closed 2 years ago

trigun539 commented 2 years ago

Hello all, not sure if possible but does anyone have a storybook config which works with react-mjml? Currently getting this error:

ERROR in ./node_modules/clean-css/lib/reader/read-sources.js
Module not found: Error: Can't resolve 'fs' in '/Users/eperez/apps/mortgage/relay/node_modules/clean-css/lib/reader'
 @ ./node_modules/clean-css/lib/reader/read-sources.js 1:9-22
 @ ./node_modules/clean-css/lib/clean.js
 @ ./node_modules/clean-css/index.js
 @ ./node_modules/html-minifier/src/htmlminifier.js
 @ ./node_modules/mjml-core/lib/index.js
 @ ./node_modules/mjml/lib/index.js
 @ ./node_modules/mjml-react/dist/es/src/index.js
 @ ./src/card.js
 @ ./src/email.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/clean-css/lib/reader/apply-source-maps.js
Module not found: Error: Can't resolve 'fs' in '/Users/eperez/apps/mortgage/relay/node_modules/clean-css/lib/reader'
 @ ./node_modules/clean-css/lib/reader/apply-source-maps.js 1:9-22
 @ ./node_modules/clean-css/lib/reader/read-sources.js
 @ ./node_modules/clean-css/lib/clean.js
 @ ./node_modules/clean-css/index.js
 @ ./node_modules/html-minifier/src/htmlminifier.js
 @ ./node_modules/mjml-core/lib/index.js
 @ ./node_modules/mjml/lib/index.js
 @ ./node_modules/mjml-react/dist/es/src/index.js
 @ ./src/card.js
 @ ./src/email.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./generated-stories-entry.js

ERROR in ./node_modules/clean-css/lib/reader/load-original-sources.js
Module not found: Error: Can't resolve 'fs' in '/Users/eperez/apps/mortgage/relay/node_modules/clean-css/lib/reader'
 @ ./node_modules/clean-css/lib/reader/load-original-sources.js 1:9-22
 @ ./node_modules/clean-css/lib/reader/read-sources.js
 @ ./node_modules/clean-css/lib/clean.js
 @ ./node_modules/clean-css/index.js
 @ ./node_modules/html-minifier/src/htmlminifier.js
 @ ./node_modules/mjml-core/lib/index.js
 @ ./node_modules/mjml/lib/index.js
 @ ./node_modules/mjml-react/dist/es/src/index.js
 @ ./src/card.js
 @ ./src/email.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./generated-stories-entry.js
daliusd commented 2 years ago

Storybook runs in browser therefore you need mjml-browser. See https://github.com/wix-incubator/mjml-react/issues/52 for hints.

daliusd commented 2 years ago

Closing as duplicate

strtw commented 2 years ago

See https://github.com/mjmlio/mjml/issues/1365 for more info on using Storybook with MJML