2

I'm currently learning about setting up a react-native-web that uses TypeScript and am getting an error where react-router-native is throwing an error saying:

Support for the experimental syntax 'classProperties' isn't currently enabled.

Checked the node_modules folder and metro-react-native-babel-preset adds @babel/plugin-proposal-class-properties.

Tried adding the plugins section to babel in package.json but still got the error:

"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ],
    "presets": [
      "module:metro-react-native-babel-preset"
    ]
  }

This is my current setup

Installed packages in package.json:

{
"dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-native": "0.59.3",
    "react-native-web": "0.11.2",
    "react-router": "5.0.0",
    "react-router-dom": "5.0.0",
    "react-router-native": "5.0.0",
    "react-scripts": "2.1.8"
  },
  "devDependencies": {
    "@types/jest": "24.0.11",
    "@types/react": "16.8.10",
    "@types/react-native": "0.57.42",
    "@types/react-router": "4.4.5",
    "@types/react-router-dom": "4.3.2",
    "@types/react-router-native": "4.2.4",
    "@types/react-test-renderer": "16.8.1",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "prettier": "1.16.4",
    "react-art": "16.8.6",
    "react-test-renderer": "16.8.6",
    "ts-jest": "24.0.1",
    "tslint": "5.15.0",
    "tslint-config-prettier": "1.18.0",
    "typescript": "3.4.1"
  }
}

For metro.config.js:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: true,
        inlineRequires: true
      }
    })
  }
};
Warsaw
  • 97
  • 1
  • 10

0 Answers0