storybook: Source: prettierConfig doesn't work

Describe the bug When I try to configure source-loader it just doesn’t work.

System

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 14.17.2 - ~/.nvm/versions/node/v14.17.2/bin/node
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.2/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0.2
  npmPackages:
    @storybook/addon-actions: ^6.3.4 => 6.3.4 
    @storybook/addon-docs: ^6.3.4 => 6.3.4 
    @storybook/addon-essentials: ^6.3.4 => 6.3.4 
    @storybook/addon-links: ^6.3.4 => 6.3.4 
    @storybook/node-logger: ^6.3.4 => 6.3.4 
    @storybook/preset-create-react-app: ^3.2.0 => 3.2.0 
    @storybook/react: ^6.3.4 => 6.3.4 

Additional context

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.stories\.tsx?$/,
      loaders: [
        {
          loader: require.resolve('@storybook/source-loader'),
          options: {
            parser: 'typescript',
            options: {
              prettierConfig: {
                printWidth: 100,
                singleQuote: true,
              },
            },
          },
        },
      ],
      enforce: 'pre',
    });

    return config;
  },
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/preset-create-react-app',
    {
      name: '@storybook/addon-docs',
      options: {
        sourceLoaderOptions: null,
      },
    },
    '@storybook/addon-essentials',
  ],
};

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 1
  • Comments: 18 (8 by maintainers)

Most upvoted comments

after 7.1.0-alpha.27, the long lines do wrap but they are not formatted (what we really need is line-breaks or preserve original formatting) image

i have a related issue currently open #22362

@weeebdev did you find a solution?

Honestly, I do not remember 😂

Also i think that this issue should be re-opened

Yes @sag1v I believe this is not the final fix, we already discuss this, I really don’t like react-syntax-highlighter, which is really limited, we will figure out a proper solution, at least the user can preserve his format.

For now my workaround is to use prettier in runtime (browser) via prettier/standalone and format the source code manually. Hopefully this will get resolved soon.

Also i think that this issue should be re-opened

@chakAs3 I think we should figure the root cause for the change in the code format and handle that (prevent it somehow)

@sag1v i don’t know why exactly. i have a fix for long lines already I’m fixing some issues related to the update, I will tag the PR to follow up with it