search

kristerkari / react-native-svg-transformer

Import SVG files in your React Native project the same way that you would in a Web application.
MIT License
1.57k stars 116 forks source link

Using react-native-svg-transformer with react-native-sass-transformer #74

Open celandro opened 4 years ago

celandro commented 4 years ago

I am attempting to use both of your libraries together and getting the following error message: The current error I am getting is Can't find variable: $RefreshReg$

Implementation based on https://github.com/kristerkari/react-native-css-modules/blob/master/docs/multiple-transformers.md#step-3-configure-transformer

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts  }
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false
        }
      }),
      babelTransformerPath: require.resolve("./transformer.js")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg", "scss", "sass"]
    }
  };
})();
transformer.js
var sassTransformer = require("react-native-sass-transformer");
var svgTransformer = require("react-native-svg-transformer");

module.exports.transform = function({ src, filename, options }) {
    if (filename.endsWith(".scss") || filename.endsWith(".sass")) {
        return sassTransformer.transform({ src, filename, options });
    } else
    return svgTransformer.transform({ src, filename, options });
};
package.json
{
  "name": "pokebattler",
  "version": "0.1.0",
  "private": true,
  "main": "node_modules/expo/AppEntry.js",
  "devDependencies": {
    "@types/expo": "^32.0.13",
    "@types/react-native": "^0.60.0",
    "babel-plugin-react-native-classname-to-style": "^1.2.2",
    "babel-plugin-react-native-platform-specific-extensions": "^1.1.1",
    "babel-preset-expo": "^5.1.0",
    "copy-dir": "^1.2.0",
    "jest-expo": "~33.0.2",
    "node-sass": "^4.12.0",
    "npx": "^10.2.1",
    "react-native-sass-transformer": "^1.4.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-test-renderer": "16.3.1",
    "reactotron-react-native": "^3.6.4",
    "typescript": "^3.5.2"
  },
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^10.0.3",
    "@react-native-community/cli": "^2.1.1",
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/drawer": "^5.0.0",
    "@react-navigation/native": "^5.0.0",
    "@react-navigation/stack": "^5.0.0",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "cross-fetch": "^3.0.4",
    "expo": "^35.0.0",
    "expo-asset": "~7.0.0",
    "expo-constants": "^7.0.0",
    "expo-font": "^7.0.0",
    "expo-localization": "^7.0.0",
    "expo-web-browser": "^7.0.1",
    "i18next": "^17.0.6",
    "metro": "^0.55.0",
    "metro-react-native-babel-transformer": "^0.55.0",
    "moment": "^2.24.0",
    "native-base": "^2.13.8",
    "native-base-autocomplete": "^1.3.2",
    "prop-types": "latest",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-i18next": "^10.11.4",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-action-button": "^2.8.5",
    "react-native-autocomplete-input": "^4.1.0",
    "react-native-dialog": "^5.6.0",
    "react-native-flags-kit": "^1.0.1",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-modal": "^11.5.3",
    "react-native-picker-select": "^6.3.3",
    "react-native-popup-menu": "^0.15.6",
    "react-native-prompt-android": "^1.1.0",
    "react-native-reanimated": "~1.2.0",
    "react-native-safe-area-context": "~0.3.6",
    "react-native-screens": "~1.0.0-alpha.23",
    "react-native-svg": "~9.9.2",
    "react-native-web": "^0.11.5",
    "react-redux": "^5.0.7",
    "react-router-native": "^4.3.0",
    "recompose": "^0.27.1",
    "redux": "^4.0.0",
    "redux-debounced": "^0.5.0",
    "redux-thunk": "^2.3.0",
    "underscore": "^1.9.1"
  }
}
celandro commented 4 years ago

It may be linked to https://github.com/facebook/react-native/issues/25622

Ive tried 0.54.1 for metro and it still had the issues

kristerkari commented 4 years ago

Hmm... I have not seen that error before. Maybe something related to Expo?

celandro commented 4 years ago

No clue. The sass transformer works great.