Storybook: SCSS doesn't work out of the box on Windows

[tirli]

Describe the bug
scss is still not working under windows out of the box. We tested it on Linux and it works OK, but with the same config(just initialized) on windows it fails with error You may need an appropriate loader to handle this file type.

Tested in the combination of storybook 4.0.12 and CRA 2.1.1

To Reproduce
Steps to reproduce the behavior:

1. Initialize new CRA project
2. Initialize storybook
3. Rename App.css to App.scss
4. Create a story for App.js
5. Run storybook
6. You see an error You may need an appropriate loader to handle this file type. about scss files and svg import

Expected behavior
Working SCCS and SVG import out of the box

Screenshots

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

System:

• OS: Windows10
• Browser: chrome (actually doesn't matter)
• Framework: react
• Addons: react-scripts 2.1.1
• Version: 4.0.12

Additional context
Seems like #4405 doesn't support it properly.

[kylemh]

The code in question: https://github.com/storybooks/storybook/blob/next/app/react/src/server/cra-config.js

This smells like it could be some kind of cross-platform issue with fs or path in this function

Googling issues related to methods called + "windows problem" led me to the following open (or unresolvable) issues:

https://github.com/nodejs/node/issues/8897
https://github.com/nodejs/node/issues/8237

Do any of them pertain to your situation?

Additionally, can you tell us which version of node and windows you are using?

It would also be lovely if you could share the explicit file path to your node_modules.

[kylemh]

Also, ping @igor-dv

[tirli]

I'm using node 10.13.0 and Windows 10.0.17134.407 (but tried on 3 different windows computers and two linux + macbook).

Not sure what do you mean about "explicit path to node_modules", but for example process.cwd output is 'C:\\Users\\Yoga\\projects\\app'

Also I tried to run such code in node (taken from storybook sources) to understand what is wrong

const fs = require('fs');
const path = require('path');

let reactScriptsPath;

function getReactScriptsPath({ noCache } = {}) {
  if (reactScriptsPath && !noCache) return reactScriptsPath;

  const appDirectory = fs.realpathSync(process.cwd());
  const reactScriptsScriptPath = fs.realpathSync(path.join(appDirectory, '/node_modules/.bin/react-scripts'));

  reactScriptsPath = path.join(reactScriptsScriptPath, '../..');
  const scriptsPkgJson = path.join(reactScriptsPath, 'package.json');

  if (!fs.existsSync(scriptsPkgJson)) {
    reactScriptsPath = 'react-scripts';
  }

  return reactScriptsPath;
}

console.log(getReactScriptsPath());

And it just responds with 'react-scripts' without failure

P.S. edited comment. In prev. version I picked the wrong console without scripts.

[occar421]

I met a similar problem today. So I inspected the code in @storybook/react. Windows 10, Node 10.14.1, Storybook 4.0.11

In "app/react/src/server/cra_config.js" on "v4.0.12" tag, I just thought

reactScriptsPath = path.join(reactScriptsScriptPath, '../..');

is wrong and it should be

reactScriptsPath = path.join(reactScriptsScriptPath, '../../react-scripts');

Modifying locally-installed dist js, now storybook seemed to load CRA's config.

On "next" branch (default; and you'd saw), this code is resolved like that by #4836 only for v4.1 alpha version. I don't know it depends on Windows.

[kylemh]

Not 100% certain because I’m on mobile but that PR seems to resolve both the SVG loader and Sass loader

[igor-dv]

I encountered some problems with windows too but in a monorepo. @tirli, can you check if this happens with 4.1.0-alpha?

CC @mrmckeb

[mrmckeb]

@occar421, the reason it isn't ../../react-scripts is that CRA supports custom react-scripts packages, which can have any name they like.

Are you working in WSL, or in PowerShell/Command Prompt? And can you share the value of reactScriptsScriptPath from your cra_config.js please? :)

I have a team working on Windows, MacOS, and Linux - and this works for all - but none of the Windows users work outside of WSL.

[tirli]

@igor-dv Sorry for the late reply. Tested and it works on 4.1.0-alpha!