bundling failed: index.js: You have not specified any extensions in the plugin options

[jamesl1001]

I'm trying to set this up with imported .scss files using the styleName property however I'm getting the following error when I run yarn start to start the metro bundler: bundling failed: index.js: You have not specified any extensions in the plugin options

index.js

import {AppRegistry} from 'react-native'
import App from 'containers'
import {name as appName} from './app.json'

AppRegistry.registerComponent(appName, () => App)

metro.config.js

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-sass-transformer")
    },
    resolver: {
      sourceExts: [...sourceExts, "scss", "sass", "jsx", "js"]
    }
  };
})();

babel.config.js

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        "react-native-stylename-to-style",
        [
            "react-native-platform-specific-extensions", {
                "extensions": ["css", "scss"]
            }
        ]
    ]
}

Do you have any ideas what I've done wrong or how to debug this?

[kristerkari]

Hmm... that looks correct. I wonder if there is something overriding the Babel config, is there for example some babel config in your package.json?

[jamesl1001]

Nothing out of the ordinary in the package.json. Just the usual scripts, dependencies, devDependencies and jest.

[jamesl1001]

Also double-checked react-native -v:

react-native-cli: 2.0.1
react-native: 0.61.2

And the following packages are present in node_modules:

• babel-plugin-react-native-platform-specific-extensions
• babel-plugin-react-native-stylename-to-style
• node-sass
• react-native-sass-transformer