Storybook: SB 5.3 + Declarative config + CRA + TS not working

[Kamahl19]

Describe the bug
When I migrate from config.tsx & addons.ts to main.js & preview.tsx I get this error

ERROR in ./storybook/generated-entry.js
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
Line 3:15:  Import in body of module; reorder to top  import/first

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/Kamahl19/react-starter
2. Migrate config.tsx & addons.ts to
   main.js

module.exports = {
  stories: ['../src/**/story.tsx'],
  presets: ['@storybook/preset-create-react-app'],
  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-actions',
    '@storybook/addon-knobs',
    '@storybook/addon-viewport',
  ],
};

preview.tsx

import React, { Suspense } from 'react';
import { makeDecorator } from '@storybook/addons';
import { addDecorator } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import StoryRouter from 'storybook-react-router';

import 'common/services/i18next';
import 'app/styles/main.css';

addDecorator(withA11y);
addDecorator(
  makeDecorator({
    name: 'withI18Next',
    parameterName: 'i18Next',
    wrapper: (storyFn, context) => <Suspense fallback={<></>}>{storyFn(context)}</Suspense>,
  })
);
addDecorator(StoryRouter());

1. run yarn add -D @storybook/preset-create-react-app
2. run yarn storybook
3. get the error in terminal

Expected behavior
I believe I did everything according to the Docs & Migration guide, so it should just work i guess :D

System:

  System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.18.0 - ~/.yarn/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 67.0.4
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-a11y: 5.3.0 => 5.3.0 
    @storybook/addon-actions: 5.3.0 => 5.3.0 
    @storybook/addon-knobs: 5.3.0 => 5.3.0 
    @storybook/addon-viewport: 5.3.0 => 5.3.0 
    @storybook/addons: 5.3.0 => 5.3.0 
    @storybook/preset-create-react-app: ^1.5.0 => 1.5.0 
    @storybook/react: 5.3.0 => 5.3.0 

[Kamahl19]

Also do you plan to support main.ts for TS projects? Both config and addons were working in TS as well

[shilman]

@Kamahl19 Yeah we hope to support main.ts in a future version.

Thanks for the bug -- I think I see the problem! Fix coming up.

[Kamahl19]

@shilman Fix is working although I am getting another error. Storybook builds but displays this

Edit: this seems to be @storybook/preset-create-react-app related. When I remove the @storybook/preset-create-react-app it works although I get warnings about not using it

[shilman]

@Kamahl19 Thanks for debugging this with us. Will be releasing the 5.3 fix as soon as CI passes. As for preset-cra, can you try upgrading to 1.5.1 that I just released? Doesn't address this issue, but it contains a few fixes and couldn't hurt to try. @mrmckeb is also online and can hopefully take a look & we can release 1.5.2 if needed. 🚀

[Kamahl19]

@shilman Happy to help if I can. Yep i just upgraded to 1.5.1 and the issue persists.

[mrmckeb]

Looking now, will see what I can find.

[Kamahl19]

@mrmckeb @shilman Sorry for false alarm. It was a bug on my side! So far everything works fine, will keep testing the 5.3 with CRA and TS and let you know if I find any issue.

Looking forward to main.ts (let me know if I can help with that).

We can close this issue.

Edit: just to add some context to the issue. If you look at https://github.com/Kamahl19/react-starter/blob/master/src/packages/admin-layout/story.tsx You can see i define some components i use in stories at the bottom of story.tsx . This works without the CRA preset but fails with it.

[mrmckeb]

Hi @Kamahl19, I was about to say the same thing - this was because Logo was not initialised. The error is correct :)

Can I also recommend that you move this package to use our new templates (I'm also on the CRA team).

This way, you don't need to update it to the latest version all the time.
https://create-react-app.dev/docs/custom-templates/

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.1 containing PR #9398 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.0 containing PR #9398 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.