Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook doesn't work with the newest version 10.0.1 of PostCSS Autoprefixer plugin #12668

Closed
aantipov opened this issue Oct 5, 2020 · 54 comments

Comments

@aantipov
Copy link

aantipov commented Oct 5, 2020

Describe the bug
Storybook is failing to build itself when using newest versions of autoprefixer, postcss and postcss-loader

To Reproduce
Steps to reproduce the behavior:

  1. Install newest versions of autoprefixer (10.0.1), postcss (8.1.1) and postcss-loader (4.0.3)
  2. Use custom webpack configuration (which includes postcss-loader)
  3. Run a command to build storybook
  4. See the build fail with an error:
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading config/preview file in ".storybook".
info => Loading config/preview file in ".storybook".
info => Adding stories defined in ".storybook/main.js".
info => Using custom .postcssrc.js
info => Loading custom Webpack config (full-control mode).
info => Compiling preview..
ERR! => Failed to build the preview
ERR! ./node_modules/@mdi/font/css/materialdesignicons.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/@storybook/core/node_modules/postcss-loader/src??ref--5-2!./node_modules/@mdi/font/css/materialdesignicons.css)
ERR! Module build failed (from ./node_modules/@storybook/core/node_modules/postcss-loader/src/index.js):
ERR! Error: PostCSS plugin autoprefixer requires PostCSS 8.
ERR! Migration guide for end-users:
ERR! https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
ERR!     at Processor.normalize (/Users/<project-path>/node_modules/@storybook/core/node_modules/postcss/lib/processor.js:153:15)
ERR!     at new Processor (/Users/<project-path>/node_modules/@storybook/core/node_modules/postcss/lib/processor.js:56:25)
ERR!     at postcss (/Users/<project-path>/node_modules/@storybook/core/node_modules/postcss/lib/postcss.js:55:10)
ERR!     at /Users/<project-path>/node_modules/@storybook/core/node_modules/postcss-loader/src/index.js:140:12
ERR!  @ ./node_modules/@mdi/font/css/materialdesignicons.css 2:26-182
ERR!  @ ./src/plugins/vuetify.js
ERR!  @ ./.storybook/preview.js
ERR!  @ ./.storybook/preview.js-generated-config-entry.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js
(node:81728) UnhandledPromiseRejectionWarning: [object Object]
(node:81728) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 703)
(node:81728) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
npm ERR! code ELIFECYCLE
npm ERR! errno 1

System
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
  Binaries:
    Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
    Yarn: 1.22.10 - ~/<project-path>/node_modules/.bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.11.1/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 81.0
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.26 => 6.0.26
    @storybook/addon-knobs: ^6.0.26 => 6.0.26
    @storybook/addons: ^6.0.26 => 6.0.26
    @storybook/vue: ^6.0.26 => 6.0.26

Additional context
It looks like the problem comes from the fact that Storybook uses it's own version of postcss-loader, which comes with it's own version 7.x of postcss
One solution that I see is to update postcss-loader and postcss
Another - provide a way to use project's versions of postcss-loader and postcss dependencies

@kiily
Copy link

kiily commented Nov 7, 2020

Having the exact same issue when trying to make my postcss config work. It won't allow postcss-import in my case. Is there a workaround? Can I upgrade those deps in storybook somehow?

@4lejandrito
Copy link

4lejandrito commented Nov 19, 2020

I could workaround this by adding:

"resolutions": {
  "postcss": "8.1.7"
}

to my package.json.

With that I can successfully use Tailwind 2.0 inside storybook.

Edit: There is a better solution: #12668 (comment).

@developer-rakeshpaul
Copy link

@4lejandrito would you mind sharing your storybook setup or a sample repo on this setup.. I am having trouble getting my tailwind 2.0 working with postcss@8

@4lejandrito
Copy link

4lejandrito commented Nov 19, 2020

Hi @developer-rakeshpaul,

At the end I followed the instructions at https://tailwindcss.com/docs/installation#post-css-7-compatibility-build and everything works like a charm without dirty hacks.

I created a sample project: https://github.com/4lejandrito/storybook-tailwind2.

@developer-rakeshpaul
Copy link

@4lejandrito thanks you so much for taking the time to set up the sample repo for reference. I did try the instructions for post-css-7-compatibility-build.. However, I was getting some weird errors.. I am trying to use this as part of rushjs monorepo.. Tried your repo and it is working perfectly fine.. Will try to incorporate my stories to yours and see if it works..

@aantipov
Copy link
Author

The workaround with resolutions field in package.json seems to work only for yarn users. Npm doesn't support it :(
For resolultions to work with npm you need to install extra tool - npm-force-resolutions.
I think I better wait for Storybook to migrate to latest Postcss

@4lejandrito
Copy link

4lejandrito commented Nov 19, 2020

Hey @aantipov at the end I didn't need to use resolutions. See my previous comment. Tailwind provides a compat version for PostCSS 7.

Hi @developer-rakeshpaul,

At the end I followed the instructions at https://tailwindcss.com/docs/installation#post-css-7-compatibility-build and everything works like a charm without dirty hacks.

I created a sample project: https://github.com/4lejandrito/storybook-tailwind2.

@eric-burel
Copy link
Contributor

eric-burel commented Nov 19, 2020

Hi, I've a similar issue with styled-jsx-plugin-postcss and next, where the build hangs instead of failing.

(Non minimal) reproduction here: https://github.com/VulcanJS/vulcan-next/tree/bugfix/styled-jsx-postcss-storybook-build-fail, in main.js we can see that removing the plugin will make the build work again

Edit: I've cross-posted to Next github where it is probably more suited.

@developer-rakeshpaul
Copy link

I was using tsdx for building a react component library and it is throwing errors even after setting up this for PostCSS 7. Got it working with non tsdx version easily with the sample @4lejandrito shared.

@developer-rakeshpaul
Copy link

it was more of a tailwind issue than of tsdx. tailwindlabs/tailwindcss#2795. got it working by commenting the "@tailwind components"

@eric-burel
Copy link
Contributor

The styled-jsx-plugin-postcss issue is fixed by upgrading it to >3.0.2 (I was using v2), also upgraded Next 10.0.2. Now Storybook is building again.
Thanks @shilman and @ndelangen for narrowing done the issue. I've now have a full working example of Next 10 + Storybook v6, including advanced features of Next like styled-jsx support.

@shilman
Copy link
Member

shilman commented Nov 20, 2020

Great news @eric-burel ! Awesome job figuring that out. Thanks to you we're one step closer to a first class nextjs/storybook integration 🎉

@dazuaz
Copy link

dazuaz commented Nov 24, 2020

As a workaround for TailwindCSS, I opted to first, build out the CSS and then adding it to the (.storybook/preview-head.html), I think this method is more robust and easier to maintain. Example repo.

@kawinie
Copy link

kawinie commented Nov 30, 2020

Hey @dazuaz I tried following your example repo but storybook still trigger tailwind build when ran. I understand your reasoning here but I don't get how you stop tailwind from doing that. Still same error: PostCSS plugin tailwindcss requires PostCSS 8

@dazuaz
Copy link

dazuaz commented Nov 30, 2020

@kawinie Are you able to run next without any errors? or tailwind build ./styles/tailwind.css -o ./public/storybook/tailwind.storybook.css ,make sure you check the examples package.json

storybook will trigger tailwind build if you import it in .storybook/preview.js

Are you able to clone the repo and run it?

wlach added a commit to mozilla/glean-dictionary that referenced this issue Dec 4, 2020
There is an incompatibility between storybook and the latest
version of postcss (see: storybookjs/storybook#12668) which we didn't
notice because we weren't generating the actual storybook in CI.
wlach added a commit to mozilla/glean-dictionary that referenced this issue Dec 4, 2020
There is an incompatibility between storybook and the latest
version of postcss (see: storybookjs/storybook#12668) which we didn't
notice because we weren't generating the actual storybook in CI.
@kawinie
Copy link

kawinie commented Dec 5, 2020

@dazuaz It seems like storybook itself looks for postcss.config.js and triggers Tailwind when it sees Tailwind in the plugin list. I couldn't get it to work even with a custom storybook Webpack config, storybook stills use the top-level PostCSS config. However, using Tailwind compat works, so that's what I'm using for now.

@astorije
Copy link
Contributor

It seems like a lot of workarounds depend on Tailwind, but for anyone who ends up here in despair, this is unrelated to Tailwind, so it may happen to you (as it does to us) even if you're not using Tailwind.

In our case, we're using plain PostCSS with Autoprefixer, postcss-url, etc.
@shilman, are there any plans to upgrade the version of PostCSS that Storybook uses internally?

Thanks everyone!

@LukyVj
Copy link

LukyVj commented Dec 16, 2020

As a workaround for TailwindCSS, I opted to first, build out the CSS and then adding it to the (.storybook/preview-head.html), I think this method is more robust and easier to maintain. Example repo.

Thank you @dazuaz, this approach fixed my issue.

I'm using Storybook with NextJS ( but not tailwind ) and I was facing this error:

ERROR in ./src/styles/globals.css (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/@storybook/core/node_modules/postcss-loader/src??ref--7-2!./src/styles/globals.css)
Module build failed (from ./node_modules/@storybook/core/node_modules/postcss-loader/src/index.js):
TypeError: Invalid PostCSS Plugin found at: plugins[0]

The approach you show in your repo helped me getting rid of it.

@TheRusskiy
Copy link

I also had an issue with tailwind in storybook, ended up doing this ugliness, but it works:
Import already compiled tailwind from node_modules
.storybook/preview.js:

...
import 'tailwindcss/dist/base.css'
import 'tailwindcss/dist/components.css'
import 'tailwindcss/dist/utilities.css'
...

Specify somewhere that we are running a storybook
.storybook/main.js:

...
global.__isStorybook = true
...

Disable tailwind postcss plugin if running within a storybook context
postcss.config.js:

...
const plugins = {
  tailwindcss: {}
}

if (global.__isStorybook) {
  delete plugins.tailwindcss
}

module.exports = {
  plugins
}

...

@shilman
Copy link
Member

shilman commented Jan 25, 2021

@vdh did you try @storybook/addon-postcss by @phated which is our proposed solution? Examples in the linked PR above.

@seonghyeonkimm
Copy link

seonghyeonkimm commented Jan 28, 2021

when I do npx sb upgrade --prerelease, it does not affect my package.json at all. Am I doing upgrade in the wrong way? @shilman

@matamatanot
Copy link
Contributor

matamatanot commented Feb 5, 2021

I tried @storybook/addon-postcss.

"postcss": "8.2.4"

  addons: [
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],

However, I got an error that PostCSS 8 was not being used.

> start-storybook -p 6006

info @storybook/react v6.2.0-alpha.21
info
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 8 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Using PostCSS preset with postcss@8.2.4

~

ERROR in ./src/styles/global.css (/foobar/node_modules/css-loader/dist/cjs.js!/foobar/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js??ref--11-2!./src/styles/global.css)
Module build failed (from /foobar/node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin postcss-nested requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

src/styles/global.css ("tailwindcss": "2.0.2")

@tailwind base;
@tailwind components;
@tailwind utilities;

@danspratling
Copy link

danspratling commented Feb 5, 2021

I also get the same issue as @matamatanot (also with tailwind 2.0.2)

I might have missed something from my config after doing

npx sb upgrade --prerelease

It's really not very clear what needs to be changed (if anything) to this to get storybook working with postcss 8 other than running the above command

Any guidance would be great but right now there's no difference than running the current version of sb, with my app running normally on postcss 8, but storybook failing.

ERROR in ./src/styles/index.css (./node_modules/css-loader/dist/cjs.js??ref--11-1!./node_modules/@storybook/core/node_modules/postcss-loader/dist/cjs.js??ref--11-2!./src/styles/index.css)
Module build failed (from ./node_modules/@storybook/core/node_modules/postcss-loader/dist/cjs.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.

Edit:

Looks like @storybook/addon-postcss does NOT get added automatically with the alpha version of storybook, but is required to fix the postcss errors.

Solution:

  1. Install alpha version of storybook
npx sb upgrade --prerelease

your package.json should now look like this

"@storybook/addon-actions": "^6.2.0-alpha.23",
"@storybook/addon-essentials": "^6.2.0-alpha.23",
"@storybook/addon-links": "^6.2.0-alpha.23",
"@storybook/react": "^6.2.0-alpha.23",
  1. Manually add alpha version of addon-postcss
npm i @storybook/addon-postcss@latest -D

your package.json should now look like this

"@storybook/addon-actions": "^6.2.0-alpha.23",
"@storybook/addon-essentials": "^6.2.0-alpha.23",
"@storybook/addon-links": "^6.2.0-alpha.23",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/react": "^6.2.0-alpha.23",
  1. Ensure @storybook/addon-postcss is being used by storybook
    .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    // Add everything below here
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
}
  1. Run Storybook
npm run storybook

@phated
Copy link
Contributor

phated commented Feb 5, 2021

@danspratling Thanks for the guide! You are correct that addon-postcss isn't automatically added as a dependency when you upgrade because the deprecation is the only real "change". Adding addon-postcss is a solution for people that want to opt-in to using postcss (and then you can further configure it as outlined in your guide). Thanks again 😄

@shilman
Copy link
Member

shilman commented Feb 6, 2021

@seonghyeonkimm sorry for the confusion. --prerelease updates you to the most recently released version, which is the alpha version 99% of the time since I release alphas all the time. However, occasionally I release a patch version without releasing an alpha afterward, and then that becomes the upgrade target. It's is a bug in the upgrade script, but a corner case.

@renielsalvador

This comment has been minimized.

@dominikhaid

This comment has been minimized.

@phated
Copy link
Contributor

phated commented Feb 25, 2021

@dominikhaid this is already fixed in the prerelease + installing the @storybook/addon-postcss module.

@phated
Copy link
Contributor

phated commented Feb 25, 2021

For people just getting to this thread, #12668 (comment) is a guide on using new postcss with the prerelease of storybook 6.2

@larsenwork
Copy link

larsenwork commented Mar 3, 2021

In relation to npx sb upgrade --prerelease not resolving to the latest prerelease but to the latest release #12668 (comment) the package.json currently required to get things working is

    "@storybook/addon-actions": "^6.2.0-beta.6",
    "@storybook/addon-essentials": "^6.2.0-beta.6",
    "@storybook/addon-links": "^6.2.0-beta.6",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/react": "^6.2.0-beta.6",

@shilman
Copy link
Member

shilman commented Mar 3, 2021

@larsenwork apologies. fixing with the release of 6.2.0-beta.7 now

@skworden
Copy link

skworden commented Mar 15, 2021

npx sb upgrade --prerelease worked for me - it push it to ^6.2.0-rc.0

@dalmo3
Copy link

dalmo3 commented Jun 3, 2021

I'm runnning Storybook 6.2.9 + NextJS 10 + Tailwind 2 and although the addons-postcss solution from #12668 (comment) allowed sb to build, upon visiting localhost:6006 it shows Cannot GET /.

What worked for me was downgrading tailwind as per #12668 (comment).

@heldr
Copy link

heldr commented Jun 23, 2021

Got running in 6.2.9 with #12668 (comment) , but after upgrading to 6.3.0 error is back.

@Dupflo
Copy link

Dupflo commented Jul 28, 2021

Got running in 6.2.9 with #12668 (comment) , but after upgrading to 6.3.0 error is back.

Same for Next.js 11 and Tailwind 2

@skworden
Copy link

Got running in 6.2.9 with #12668 (comment) , but after upgrading to 6.3.0 error is back.

Same for Next.js 11 and Tailwind 2

I explicitly added webpack@5 to my packages and my Next 11 / tailwind2 app works again.

@CodyBontecou
Copy link

Hi @developer-rakeshpaul,

At the end I followed the instructions at https://tailwindcss.com/docs/installation#post-css-7-compatibility-build and everything works like a charm without dirty hacks.

I created a sample project: https://github.com/4lejandrito/storybook-tailwind2.

This did it for me.

@developer-rakeshpaul
Copy link

@CodyBontecou thanks a lot for the repo. I also got it working following the instructions. Much appreciate your efforts. Regards..

@mct-dev
Copy link

mct-dev commented Jul 8, 2022

Hello all! I'm still having this issue after following several of the above suggested solutions. I'm wondering if it's a version thing? Here's what I've got:

package.json:

  ...
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@bbbtech/storybook-formik": "^2.5.0",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@tailwindcss/forms": "^0.5.1",
    "@tailwindcss/typography": "^0.5.2",
    ...
    "postcss": "^8.4.13",
    ...
    "storybook-addon-next": "^1.6.7",
    "tailwindcss": "^3.0.24",
    ...
  },
  ...

main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');


module.exports = {
    stories: [
        "../components/**/*.stories.@(js|jsx|ts|tsx)",
        "../features/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "storybook-formik/register",
        {
            name: '@storybook/addon-postcss',
            options: {
                postcssLoaderOptions: {
                    implementation: require('postcss'),
                },
            },
        },
        "storybook-addon-next",
    ],
    core: {
        builder: 'webpack5',
    },
    framework: "@storybook/react",
    webpackFinal: async (config, { configType }) => {
        config.resolve.plugins = [new TsconfigPathsPlugin()];
        return config;
    }
}

preview.js

import "../styles/globals.css";

module.exports = {
  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)", "../features/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  // docs panel as default
  previewTabs: {
    "storybook/docs/panel": { index: -1 },
  },
  framework: "@storybook/react",
  parameters: {
    backgrounds: {
      default: "gray-100",
      values: [
        { name: "gray-100", value: "#f3f4f6" },
        { name: "blue-900", value: "#061146" },
      ],
    },
  },
};

It looks like all my versions are newer than the ones listed in the issue history here.

@artdevgame
Copy link

@mct-dev - Have you taken a look in your package-lock.json (or yarn.lock) file to see what has been installed? You could try deleting that file and trying the install again - I had a similar issue recently, where it kept reinstalling the old version due to the lock file.

@kylegoines
Copy link

This almost works for me, but i seem to not be able to compile .css files that use @apply bg-primary mt-10.
they seem to be ommited from the files.

@vibbs
Copy link

vibbs commented Mar 9, 2023

Seems like for version bumps solution posted above might not be a feasible solution.

For the Tailwindcss version >3.*.* and Storybook version > 6.5.* along with postcss version of 8.*, the followign steps worked or me:

Adding the following import in the preview.js file under story book configuration.

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';

Original Solution posted here


Overall setup:

Dependencies

"devDependencies": {
        "@babel/core": "^7.21.0",
        "@storybook/addon-actions": "^6.5.16",
        "@storybook/addon-essentials": "^6.5.16",
        "@storybook/addon-interactions": "^6.5.16",
        "@storybook/addon-links": "^6.5.16",
        "@storybook/builder-webpack5": "^6.5.16",
        "@storybook/manager-webpack5": "^6.5.16",
        "@storybook/react": "^6.5.16",
        "@storybook/testing-library": "^0.0.13",
        "autoprefixer": "^10.4.13",
        "babel-loader": "^8.3.0",
        "eslint-plugin-storybook": "^0.6.11",
        "plop": "^3.1.2",
        "postcss": "^8.4.21",
        "storybook-css-modules-preset": "^1.1.1",
        "tailwindcss": "^3.2.7"
    },

.storybook/main.js

module.exports = {
    stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
    staticDirs: ['../public'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
        'storybook-css-modules-preset',
    ],
    framework: '@storybook/react',
    core: {
        builder: '@storybook/builder-webpack5',
    },
};

.storybook/preview.js

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
// your other configurations . . .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests