presets-create-react-app doesn't work on windows. about presets

[patricklafrance]

Hi @mrmckeb

Here's the console log:

info => Loading presets
** packagePathMatch:  [
  '"$basedir/../../../../node_modules/react-scripts/bin/react-scripts.js"',
  '../../../../node_modules/react-scripts/bin/react-scripts.js"',
  index: 186,
  input: '#!/bin/sh\n' +
    `basedir=$(dirname "$(echo "$0" | sed -e 's,\\\\,/,g')")\n` +
    '\n' +
    'case `uname` in\n' +
    '    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;\n' +
    'esac\n' +
    '\n' +
    'if [ -x "$basedir/node" ]; then\n' +
    '  "$basedir/node"  "$basedir/../../../../node_modules/react-scripts/bin/react-scripts.js" "$@"\n' +
    '  ret=$?\n' +
    'else \n' +
    '  node  "$basedir/../../../../node_modules/react-scripts/bin/react-scripts.js" "$@"\n' +
    '  ret=$?\n' +
    'fi\n' +
    'exit $ret\n',
  groups: undefined
]
** scriptsPath: C:\Dev\30_perso\storybook\node_modules\react-scripts\bin\react-scripts.js"
info => Loading presets

I have been using this fix locally since I created the issue. It's not pretty but it works fine:

    try {
      const content = fs.readFileSync(scriptsBinPath, 'utf8');
      const packagePathMatch = content.match(
        /"\$basedir[\\/]([^\s]+?[\\/]bin[\\/]react-scripts\.js")/i
      );

      if (packagePathMatch && packagePathMatch.length > 1) {
        const scriptsPath = path.join(cwd, '/node_modules/.bin/', packagePathMatch[1]);

        return scriptsPath.replace("\\bin\\react-scripts.js\"", "");
      }
    } catch (e) {
      // NOOP
    }

Thank you,

Patrick

[mattmaduzia]

It was just a small error in the react-scripts package resolution on Windows. I submitted a PR, but if you need to patch it in the meantime.

@storybookjs/presets/packages/preset-create-react-app/helpers/getReactScriptsPath.js
line 16

Before

/"\$basedir[\\/]([^\s]+?[\\/]bin[\\/]react-scripts\.js")/i

After

/"\$basedir[\\/](\S+?)[\\/]bin[\\/]react-scripts\.js"/i

[justrhysism]

Feels like this one is part 2 of #38

[LobsterBandit]

getReactScriptsPath helper in presets:
https://github.com/storybookjs/presets/blob/master/packages/preset-create-react-app/helpers/getReactScriptsPath.js#L33

looks to be duplicating another getReactScriptsPath: https://github.com/storybookjs/storybook/blob/next/app/react/src/server/cra-config.ts#L53

which seems to handle the Windows case and has some tests. Presets version if statement is excluding Windows from jumping up two directory levels for some reason.

[mrmckeb]

Hi @patricklafrance, this was fixed... but seems to have crept back up again - sorry for the slow response, I had some side things to attend to...

Are you able to help with debugging? As I don't have a Windows machine locally. I can install a VM of course, if you can't.

The file that's responsible is this one - https://github.com/storybookjs/presets/blob/master/packages/preset-create-react-app/helpers/getReactScriptsPath.js

It seems that for some reason, the check here is failing:
https://github.com/storybookjs/presets/blob/master/packages/preset-create-react-app/helpers/getReactScriptsPath.js#L8-L38

If you could add some console.logs there, that might help (by editing node_modules directly).

[viet-nv]

Did this solved? Anyone help...