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

aantipov commented 3 years ago

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:

Install newest versions of autoprefixer (10.0.1), postcss (8.1.1) and postcss-loader (4.0.3)
Use custom webpack configuration (which includes postcss-loader)
Run a command to build storybook

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

mct-dev commented 2 years ago

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 commented 2 years ago

@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 commented 1 year ago

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 commented 1 year ago

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 . . .

storybookjs / storybook