"export default" not working anymore

#1

Hey guys, I created an app with expo and everything worked fine.

Since I am now in need of native functionality I created a blank new app using react-native init and am trying to migrate my expo project to this new blank project to use the android and ios folder (exp detach just gave me a headache).

However after migrating all files I am getting some weird errors when exporting components.

In the expo project I created components like this:

export default class MyComponent extends React.Component {
  render() {
    return(
      //something
    ) 
  }
}

and then I used

import MyComponent from './~MyComponent'

to import it.

However after migrating I have to rewrite EVERY component like this to make it work:

class myComponent extends React.Component {
  render() {
    return(
      //something
    )
  }
}

MyComponent = new myComponent
export default MyComponent

If I don’t do this, I get an Error of

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined"

This is my setup:


package.json

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "format": "prettier-eslint \"src/**/*.js\""
  },
  "dependencies": {
    "mobx": "^3.2.2",
    "mobx-react": "^4.2.2",
    "moment": "^2.18.1",
    "react": "16.0.0-alpha.12",
    "react-native": "^0.46.4",
    "react-native-vector-icons": "^4.2.0",
    "react-navigation": "^1.0.0-beta.11"
  },
  "devDependencies": {
    "babel-preset-react-native-stage-0": "^1.0.1",
    "prettier": "^1.5.3",
    "prettier-eslint": "^6.4.2",
    "babel-eslint": "^7.2.3",
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "2.1.0",
    "eslint": "4.3.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.1.0",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

{
  "presets": [
    "react-native",
    "react-native-stage-0/decorator-support"
  ]
}

I guess it has something to do with my babel setup but I just can’t figure it out. Help would be very much appreciated since I have >100 components and rewriting all of them would be extremely tedious…

Thanks

#2

Or to put it another way: which babel presets/plugins do i have to install, so that my babel setup is exactly the same as expos default babel setup?

#3

Nevermind, it worked after deinstalling all node modules, clearing the cache and reinstalling everything :slight_smile: