Storybook: BaseUrl not respected with new create-react-app 3.0 version

[callmeberzerker]

Describe the bug
Even better here is a repro case -> https://github.com/SpearThruster/storybook5-and-create-react-app3

To Reproduce

1. clone repo
2. npm install
3. npm run storybook

Expected behavior
The baseUrl should be respected and the component path import { RoundedButton } from "components/RoundedButton" should be resolved.

Screenshots
not applicable

Code snippets
If applicable, add code samples to help explain your problem.

System:

• OS: [Windows10]
• Browser: [chrome]
• Framework: [react]
• Version: tried 5.0,0 but also the 5.1.0 alpha version

Additional context
Tried various combinations from the docs regarding TypeScript + storybook (with cra) to no avail.

** console output

ERROR in ./src/stories/index.stories.tsx Module not found: Error: Can't resolve 'components/RoundedButton' in 'D:\Projects\storybook5-and-create-react-app3\src\stories' @ ./src/stories/index.stories.tsx 5:0-57 9:29-42 25:29-42 @ ./src sync .stories.tsx$ @ ./.storybook/config.ts @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.ts (webpack)-hot-middleware/client.js?reload=true

[shilman]

This may already be addressed here: https://github.com/storybooks/storybook/pull/6560

[mrmckeb]

Correct @shilman. @SpearThruster I've got a PR open and will merge once we test against the final release.

If you have time, perhaps you could also do a quick test of the changes in #6560?

[callmeberzerker]

Thanks @mrmckeb for the info and your PR. :)

I will test it later today and report back here.

[callmeberzerker]

I am having trouble building the project since I am on Windows, and there are plenty of python, shell build scripts referenced in package.json. Also tried to build it on a colleagues Mac (briefly) but didn't work there either.

Can you by any chance send me a dist build of your branch that I can npm link in my project?

P.S. create-react-app 3.0 just got released. :)

[mrmckeb]

In the interim, you can still use NODE_PATH - and everything will work.

Give me a few hours and I'll try to get this out, worst case, end of day today (EEST).

[mrmckeb]

I'm just waiting on some approvals for #6560, and then I hope @shilman can push this out with the next alpha ;)

Thanks again for your patience @SpearThruster, and definitely use the environment variable NODE_PATH (i.e. NODE_PATH=src) in the interim :)

[mrmckeb]

If you can try https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.33, that would be amazing.

Please let me know immediately if you have any issues.

[jakoandersen]

i just upgraded from CRA 2.1.8 to 3.0.0, and then @storybook/react 5.0.6 to 5.1.0-alpha.33 and receive an error in the terminal:

> start-storybook -p 6006

internal/modules/cjs/loader.js:605
    throw err;
    ^

Error: Cannot find module 'detect-port'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/mnt/my_project/node_modules/@storybook/core/dist/server/cli/dev.js:12:42)
    at Module._compile (internal/modules/cjs/loader.js:722:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

EDIT: Nevermind, forgot to update other storybook dependencies as well (addons etc.)

[callmeberzerker]

Hi @mrmckeb,

I confirm it works now after i set also the .env NODE_PATH=src ... will this be required when using baseUrl in tsconfig.json? :)

[mrmckeb]

Hi @jakoandersen, hmm... that error looks completely unrelated to this work... To confirm, did you remove all node_modules and reinstall (as a test)?

If you keep receiving the above error, can you please open an issue for that?

@SpearThruster, no, the merged PR means no NODE_PATH required - it's just a temporary workaround and is fully resolved :) That was the goal of the PR and it is working for me. See #6560 for the implementation.

We'll close this off once we can confirm it's working for you both.

[mrmckeb]

Also, @jakoandersen, did you upgrade all @storybook packages to the same version? There may be a mismatch somewhere if not.

[callmeberzerker]

Hi @mrmckeb. I updated the repo above with the latest alpha from storybook and it's still failing unless I also set NODE_PATH=src in .env.

[mrmckeb]

Hi @SpearThruster, are you able to share the repo with me (even privately) and I can take a quick look?

Also, the temporary workaround doesn't need to be in .env, it can be before your script for Storybook (if you want to keep your .env clean).

"scripts": {
  "storybook": "NODE_PATH=src start-storybook"
}

[jakoandersen]

Hi @mrmckeb - yes after upgrading all storybook related plugins and addons to 5.1.0-alpha.33 it works :)

[mrmckeb]

Thanks @jakoandersen, and are you able to use baseUrl, or do you still need to use NODE_PATH? :)

[jakoandersen]

I'm able to get it working with baseUrland without NODE_PATH :).

[mrmckeb]

😌 That's good to know, thanks @jakoandersen.

@SpearThruster, let me know if you can give me access and I'll investigate - it might be our issue, but I just need a reproduction.

[callmeberzerker]

Hi @mrmckeb -> you can clone the repo above (https://github.com/SpearThruster/storybook5-and-create-react-app3) which contains the latest storybook alpha and cra 3.0.

npm install npm run storybook

[mrmckeb]

Hi @SpearThruster, I've found your issue - it seems that you're pinned to next not 3.0.0. That resolves it.

  "dependencies": {
    "react-scripts": "3.0.0",
  },

This is because semver sees 3.0.0-next* as _less than_ 3.0.0, and this behaviour is limited to 3.0.0 and above.
https://github.com/storybooks/storybook/pull/6560/files#diff-eda2a92e48b4df8907d95774b054a271R171

[mrmckeb]

Closing this as all issues seem to be resolved. Thanks everyone for your time here :)

[callmeberzerker]

Ugh, you are absolutely right! Thanks for that, it definitely works now. Cheers!

[shilman]

Thanks guys! Great job @mrmckeb 👏

[mrmckeb]

No problem @shilman.

And don't stress @SpearThruster, I probably should have considered that case... and in future will ;)

[egor-xyz]

"storybook": "NODE_PATH=src start-storybook -p 9009 -s public",

[mrmckeb]

@egor-xyz, this should not be needed in new versions. Are you still seeing this issue? If so, what versions of Storybook and CRA are you using?

[egor-xyz]

@egor-xyz, this should not be needed in new versions. Are you still seeing this issue? If so, what versions of Storybook and CRA are you using?

"react-scripts": "3.0.1",
"@storybook/react": "5.0.11",

Working only with:

"storybook": "NODE_PATH=src start-storybook -p 9009 -s public",

Otherwise:

Module not found: Error: Can't resolve 'components/Button...

[callmeberzerker]

@egor-xyz I am pretty sure you need one of the alpha|beta releases of [email protected] (starting from: 5.1.0-alpha.33)

[egor-xyz]

@SpearThruster Yes, working with beta

"@storybook/react": "5.1.0-beta.0",

[mrmckeb]

Correct, as @SpearThruster said, you need to be on the next branch. This will be released very soon :)

[akeating]

fyi in 5.3.6, this does not work with baseUrl: ".". Workaround is NODE_PATH=. as outlined in earlier comments.

[mrmckeb]

Hi @akeating, are you using the new standalone preset?

[akeating]

Yes I'm using @storybook/preset-create-react-app

[mrmckeb]

Thanks @akeating, can you please raise an issue against that preset (https://github.com/storybookjs/presets/issues) with any details you can provide? I can take a look this week and resolve.