Export mode conflict between backgrounds plugins and storybook (TailwindCSS)

[soullivaneuh]

Describe the bug

I'm trying to export my TailwindCSS configuration colors.

To Reproduce

The WIP is on this open-source MR: https://gitlab.com/nexylan/design/-/merge_requests/29

1. Clone the project on the right branch
2. Run npm install && npm run storybook
3. Try to load storybook with the dev tools of your browser.
4. You will see the error: TypeError: "exports" is read-only

Expected behavior

Working. :-)

This is because of the export tag of tailwind.config.js:

module.exports = {
  theme: {
    },
};

But if I replace it by export default {, I have this storybook runtime error:

ERROR in ./src/app.css (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/postcss-loader/src??postcss!./src/app.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
/home/sullivan/p/gitlab.com/nexylan/design/tailwind.config.js:54
export default {
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1067:16)
    at Module._compile (internal/modules/cjs/loader.js:1115:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at /home/sullivan/p/gitlab.com/nexylan/design/node_modules/tailwindcss/lib/index.js:67:122
    at /home/sullivan/p/gitlab.com/nexylan/design/node_modules/tailwindcss/lib/processTailwindFeatures.js:32:20
    at LazyResult.run (/home/sullivan/p/gitlab.com/nexylan/design/node_modules/postcss/lib/lazy-result.js:295:14)
    at LazyResult.asyncTick (/home/sullivan/p/gitlab.com/nexylan/design/node_modules/postcss/lib/lazy-result.js:208:26)
    at LazyResult.asyncTick (/home/sullivan/p/gitlab.com/nexylan/design/node_modules/postcss/lib/lazy-result.js:221:14)
    at /home/sullivan/p/gitlab.com/nexylan/design/node_modules/postcss/lib/lazy-result.js:213:17
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
 @ ./src/app.css 2:26-204 22:4-35:5 25:25-203
 @ ./stories/index.stories.js
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^/]*?\.stories\.js\/?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

  System:
    OS: Linux 4.19 Manjaro Linux
    CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
  Binaries:
    Node: 13.7.0 - /usr/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.13.6 - /usr/bin/npm
  Browsers:
    Firefox: 72.0.2
  npmPackages:
    @storybook/addon-a11y: ^5.3.12 => 5.3.12 
    @storybook/addon-actions: ^5.3.12 => 5.3.12 
    @storybook/addon-backgrounds: ^5.3.12 => 5.3.12 
    @storybook/addon-knobs: ^5.3.12 => 5.3.12 
    @storybook/addon-links: ^5.3.12 => 5.3.12 
    @storybook/addon-notes: ^5.3.12 => 5.3.12 
    @storybook/addon-storysource: ^5.3.12 => 5.3.12 
    @storybook/addon-viewport: ^5.3.12 => 5.3.12 
    @storybook/html: ^5.3.12 => 5.3.12 

Additional context

All the code source are on the opened MR. :-)

I'm not sure of the source of the issue, so don't hesitate to comment if you need more details. 👍

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[soullivaneuh]

Up to avoid closing.

Do you have any feedback/question about this?

[soullivaneuh]

Another use case on a story using tailwind config:

import '../src/app.css';

const config = require("../tailwind.config.js");

export default {
  title: 'Typography',
};

export const Titles = () => {
  const div = document.createElement('div');

  for (let level = 1; level <= 6; level++) {
    const title = document.createElement(`h${level}`);

    title.innerText = `Level ${level} title`;

    div.appendChild(title);
  }

  return div;
};

export const Sizes = () => {
  const div = document.createElement('div');

  Object.keys(config.theme.fontSize).forEach(size => {
    const text = document.createElement('div');

    text.innerText = size;

    div.appendChild(text);
  })


  return div;
};

Got:

TypeError: "exports" is read-only

I don't think this is related to my config file. Currently, it's required on svelte file without any error.

[soullivaneuh]

The issue seems to come from this code block of tailwind.config.js:

let customColors = Object.assign(colors, {
  green: makeColor('#48d3aa'),
  orange: makeColor('#ff9e00'),
  yellow: makeColor('#ffe000'),
  purple: makeColor('#5f4ae3'),
  teal: makeColor('#0b7d89'),
  pink: makeColor('#ffabb7'),
  gray: makeColor('#43414E', 900),
});

[soullivaneuh]

Also tried:

let customColors = Object.assign(colors, {});

And even:

let test = {};
let customColors = Object.assign(test, {});

It seems Object.assign is the problem, but I don't know why.

[soullivaneuh]

Applied #5298 (comment), works well.