getSourceExts() breaks typical module resolution

SCSS file gets loaded instead of the intended JS file.

Context

When exporting an getSourceExts() as per the README.md, the SCSS extensions take precedence before the normal js, json file extensions Metro looks up. See this relevant commit on the RN project.

When importing a local module without specifying an extension (perfectly valid use case as to allow for the platform specific file to get loaded) the bundler resolves the SCSS file first, the transformer produces JS code but the intended JS module is never imported. No error is raised until later, when some code tries to execute code from the “missed” module.

[kristerkari]

I’m definitely open for any new features that can be added to the sass transformer. 👍

So far what has been holding me back has been lack of time and the fact that I haven’t found a good way to pass options to node-sass. The good news is that node-sass is open for adding a project config file (https://github.com/sass/node-sass/issues/1144#issuecomment-372022394), which would allow the options to be defined outside of the transformer.

Just ping me if you want to discuss any specific features or if you have something ready that you want to contribute.

[kristerkari]

I guess that for now I’ll just update the docs with your workaround, and let’s see if it’s possible to do a better fix for the issue.

It sucks that React Native gives such limited options for specifying options for Metro.