search

storybookjs / addon-postcss

This Storybook addon can be used to run the PostCSS preprocessor against your stories.
MIT License
20 stars 22 forks source link

[Bug] PostCSS 8 duplicate css loaders #11

Closed jose-mpd closed 3 years ago

jose-mpd commented 3 years ago

Describe the bug

Use postcss version 8 with storybook and @addon-postcss produces duplication in loader configurations

Steps to reproduce the behavior

  1. Run storybook script
  2. Console shows this error 
    
Module build failed (from ./node_modules/@storybook/addon-postcss/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) /home/josyto/proyect/packages/frontend/src/styles/index.css Unknown word

1 | var api = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../node_modules/@storybook/core/node_modules/css-loader/dist/cjs.js??ref--12-1!../../node_modules/postcss-loader/src/index.js??ref--12-2!./index.css"); 3 |

@ ./src/styles/index.css 2:26-409 53:4-74:5 56:18-401 @ ./.storybook/preview.js @ ./.storybook/preview.js-generated-config-entry.js @ 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-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/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 ./node_modules/@storybook/addon-backgrounds/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/addParameter.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined Child HtmlWebpackCompiler: Asset Size Chunks Chunk Names child-HtmlWebpackPlugin_0 6.19 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0 Entrypoint HtmlWebpackPlugin_0 = child-HtmlWebpackPlugin_0 [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 1.98 KiB {HtmlWebpackPlugin_0} [built]


3. Review the storybook webpack settings with the recommended settings
```js
//main.js
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');

module.exports = {
    stories: ['../src/**/*.stories.@(tsx)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        {
            name: '@storybook/addon-postcss',
            options: {
                postcssLoaderOptions: {
                    implementation: require('postcss'),
                },
            },
        },
    ],
    typescript: {
        check: false,
        checkOptions: {},
        reactDocgen: 'react-docgen-typescript',
        reactDocgenTypescriptOptions: {
            shouldExtractLiteralValuesFromEnum: true,
            propFilter: prop =>
                prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
        },
    },
    webpackFinal: async config => {
        [].push.apply(config.resolve.plugins, [
            new TsconfigPathsPlugin({ extensions: config.resolve.extensions }),
        ]);

        console.log(config.module.rules);

        return config;
    },
};
  1. Check the log and see that there are two duplicate css rules
info @storybook/react v6.1.14
info 
info => Loading static files from /home/josyto/proyect/packages/frontend/public and serving at /.
info => Loading custom manager config
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
info => Loading custom manager config
info => Using PostCSS preset with postcss@8.2.4
info => Using custom postcss.config.js
[
  {
    test: /\.(mjs|tsx?|jsx?)$/,
    use: [ [Object] ],
    include: [ '/home/josyto/proyect' ],
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    use: [ [Object] ],
    include: /[\\/]node_modules[\\/](@storybook\/node-logger|are-you-es5|better-opn|boxen|chalk|commander|find-cache-dir|find-up|fs-extra|json5|node-fetch|pkg-dir|resolve-from|semver)/
  },
  { test: /\.md$/, use: [ [Object] ] },
  {
    test: /\.js$/,
    include: /node_modules\/acorn-jsx/,
    use: [ [Object] ]
  },
  { test: /\.(stories|story)\.mdx$/, use: [ [Object], [Object] ] },
  {
    test: /\.mdx$/,
    exclude: /\.(stories|story)\.mdx$/,
    use: [ [Object], [Object] ]
  },
  {
    test: /\.(stories|story)\.[tj]sx?$/,
    loader: '/home/josyto/proyect/packages/frontend/node_modules/@storybook/source-loader/dist/index.js',
    options: { injectStoryParameters: true, inspectLocalDependencies: true },
    enforce: 'pre'
  },
  {
    test: /\.css$/,
    sideEffects: true,
    use: [ [Object], [Object], [Object] ]
  },
  {
    test: /\.css$/,
    sideEffects: true,
    use: [
      '/home/josyto/proyect/packages/frontend/node_modules/style-loader/dist/cjs.js',
      [Object],
      [Object]
    ]
  },
  {
    test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
    loader: '/home/josyto/proyect/packages/frontend/node_modules/file-loader/dist/cjs.js',
    options: { name: 'static/media/[name].[hash:8].[ext]', esModule: false }
  },
  {
    test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
    loader: '/home/josyto/proyect/packages/frontend/node_modules/url-loader/dist/cjs.js',
    query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
  }
]
info => Using default Webpack setup

Expected behavior

There should be only one css loader configuration

Package.json, main.js, and postcss.config.js

    "scripts": {
        "dev": "next dev -p 3001",
        "build": "next build",
        "start": "next start -p 3001",
        "build:analyze": "cross-env ANALYZE=true npm run build",
        "storybook": "start-storybook -s ./public -p 6006",
        "build-storybook": "build-storybook"
    },
    "dependencies": {
        "@apollo/client": "^3.3.7",
        "@apollo/react-ssr": "^4.0.0",
        "@ionic/react": "^5.5.2",
        "autoprefixer": "^10.2.3",
        "cookie": "^0.4.1",
        "cross-env": "^7.0.3",
        "formik": "^2.2.6",
        "graphql": "^15.4.0",
        "next": "10.0.5",
        "postcss": "^8.2.4",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-toastify": "^6.2.0",
        "recharts": "^2.0.3",
        "tailwindcss": "^2.0.2",
        "yup": "^0.32.8"
    },
    "devDependencies": {
        "@babel/core": "^7.12.10",
        "@storybook/addon-actions": "^6.1.14",
        "@storybook/addon-essentials": "^6.1.14",
        "@storybook/addon-links": "^6.1.14",
        "@storybook/addon-postcss": "^2.0.0",
        "@storybook/react": "^6.1.14",
        "@types/cookie": "^0.4.0",
        "@types/node": "^14.14.22",
        "@types/react": "^17.0.0",
        "@types/react-dom": "^17.0.0",
        "@types/yup": "^0.29.11",
        "prettier": "^2.2.1",
        "react-docgen-typescript": "^1.20.5",
        "stylelint-config-recommended": "^3.0.0",
        "tailwindcssdu": "^1.3.0",
        "tsconfig-paths-webpack-plugin": "^3.3.0",
        "typescript": "^4.1.3",
        "webpack-bundle-analyzer": "^4.4.0"
    }
//main.js
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');

module.exports = {
    stories: ['../src/**/*.stories.@(tsx)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        {
            name: '@storybook/addon-postcss',
            options: {
                postcssLoaderOptions: {
                    implementation: require('postcss'),
                },
            },
        },
    ],
    typescript: {
        check: false,
        checkOptions: {},
        reactDocgen: 'react-docgen-typescript',
        reactDocgenTypescriptOptions: {
            shouldExtractLiteralValuesFromEnum: true,
            propFilter: prop =>
                prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
        },
    },
    webpackFinal: async config => {
        [].push.apply(config.resolve.plugins, [
            new TsconfigPathsPlugin({ extensions: config.resolve.extensions }),
        ]);

        //Removing duplicity and adjusting use rules
        config.module.rules[8].use[2] = config.module.rules[7].use[2];
        config.module.rules.splice(7, 1);

        return config;
    },
};

module.exports = {
    plugins: { tailwindcss: {}, autoprefixer: {} },
};

Additional context

I was testing this addon to stop using Tailwind compatibility version with PostCSS 7 and Storybook and move to version 8 when I discovered the duplicity.

Doing tests I was able to solve it by introducing changes in the webpack configuration and removing the duplicate configuration with certain changes. 🔧

phated commented 3 years ago

Howdy @jose-mpd! This module will not be usable until Storybook 6.2 - as it requires a new feature that also needed to deprecate the automatic addition of the loaders causing your error.

You can try it out with https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.17 - you'll need to run npx sb upgrade --prerelease to upgrade all your deps.

Further information is available at https://github.com/storybookjs/storybook/issues/12668 and https://github.com/storybookjs/storybook/pull/13669

hamed0zabihi commented 2 years ago

thanks,resolved