Add support for custom react-scripts packages

[mrmckeb]

Issue: #4681

What I did

Added support for react-scripts packages with names other than react-scripts.

How to test

Create a fork of react-scripts with a different name (or use an existing), and use that for your --scripts-version when running create-react-app.

[storybook-safe-bot]

	Fails
🚫	PR is marked with "feature request" label.

Generated by 🚫 dangerJS

[chadfawcett]

Looks good to me!

[igor-dv]

We need some CLI test fixture for this IMO

[codecov]

Codecov Report

Merging #4712 into next will increase coverage by 0.04%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##             next    #4712      +/-   ##
==========================================
+ Coverage   35.51%   35.55%   +0.04%     
==========================================
  Files         557      557              
  Lines        6775     6739      -36     
  Branches      901      885      -16     
==========================================
- Hits         2406     2396      -10     
+ Misses       3899     3882      -17     
+ Partials      470      461       -9

Impacted Files	Coverage Δ
app/react/src/server/cra_config.js	0% <0%> (ø)	⬆️
lib/components/src/layout/desktop.js	73.68% <0%> (-0.46%)	⬇️
...ents/stories_panel/stories_tree/tree_decorators.js	100% <0%> (ø)	⬆️
...mponents/stories_panel/stories_tree/tree_header.js	100% <0%> (ø)	⬆️
...ddons/storyshots/storyshots-puppeteer/src/index.js	0% <0%> (ø)	⬆️
addons/jest/src/index.js	0% <0%> (ø)	⬆️
app/react-native/src/bin/storybook-start.js	0% <0%> (ø)	⬆️
lib/components/src/header/header.js	100% <0%> (ø)	⬆️
lib/core/src/server/build-static.js	0% <0%> (ø)	⬆️
... and 8 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 33d6091...290eacd. Read the comment docs.

[ndelangen]

I agree with @igor-dv
I think we can merge this though.

Would you be able to open another PR @mrmckeb that adds some tests?

[mrmckeb]

Certainly @igor-dv and @ndelangen, I'll take a look at doing this over the weekend. Hopefully it'll be fairly straight-forward to test.

And thanks for your review too @chadfawcett.

[igor-dv]

I've played a bit with this in #4836 and It doesn't find for me the react-scripts pkg in the cra-kitchen-sink example. Might It be related either to monorepo or windows?

[mrmckeb]

@igor-dv, this is working for my team on Windows (WSL) and MacOS. Can you give more details of what you're seeing?

[igor-dv]

When I am debuggin this:

let reactScriptsPath;

function getReactScriptsPath() {
  if (reactScriptsPath) return reactScriptsPath;
  const appDirectory = fs.realpathSync(process.cwd());
  const reactScriptsScriptPath = fs.realpathSync(
    path.join(appDirectory, '/node_modules/.bin/react-scripts')
  );
  reactScriptsPath = path.join(reactScriptsScriptPath, '../..');
  return reactScriptsPath;
}

in cra-kitchen-sink, I see that

reactScriptsScriptPath = 'root\examples\cra-kitchen-sink\node_modules\.bin\react-scripts'

Then

reactScriptsPath = 'root\examples\cra-kitchen-sink\node_modules'

And after when we are tring to use `isReactScriptsInstalled that does

require(path.join(getReactScriptsPath(), 'package.json'));

path to package.json is wrong and doesn't point to the package.json in the react-scripts

[mrmckeb]

And does it work for you outside of that environment @igor-dv? And are you using WSL? I'm not home now, but can take a look later.

[igor-dv]

Didn't check it outside. I am just using a regular windows 10

[igor-dv]

Even tests (cra-config) are failing locally for me, but passing in CI. Probably a windows thing =(