Skip to content

In new app, getting error: "React.createElement: type is invalid..." #61

@playfulThinking

Description

@playfulThinking

I'm getting this error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
when I run the app.

I haven't been able to figure out what's going on. I did see SAFE-Stack/SAFE-Nightwatch#66 (comment) which had a similar problem, but (unless I'm misreading) that was fixed.

Any help would be greatly appreciated!

I tried to follow https://github.com/martinmoec/fable-react-native-how-to as closely as I could.
Here are the steps I took:

npx react-native init RNTestFSharp
npm install --save @react-native-community/netinfo
npx pod install
npm run-script watch
npx react-native run-ios

App.fsproj:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>netstandard2.1</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <Compile Include="App.fs" />
  </ItemGroup>
  <Import Project="..\.paket\Paket.Restore.targets" />
</Project>

App.fs:

module App

open Elmish
open Elmish.React
open Elmish.ReactNative
open Fable.ReactNative

// A very simple app which increments a number when you press a button

type Model = { Counter: int }

type Message = | Increment

let init () = { Counter = 0 }, Cmd.none

let update msg model =
    match msg with
    | Increment ->
        { model with
              Counter = model.Counter + 1 },
        Cmd.none

module R = Fable.ReactNative.Helpers
module P = Fable.ReactNative.Props
open Fable.ReactNative.Props

let view model dispatch =

    R.view [] [ R.text [] "Hi there" ]

Program.mkProgram init update view
|> Program.withConsoleTrace
|> Program.withReactNative "RNTestFSharp"
|> Program.run

index.js:

/**
 * @format
 */

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

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

babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

splitter.config.js:

module.exports = {
    entry: "src/App.fsproj",
    outDir: "out",
    babel: {
        presets: ["module:metro-react-native-babel-preset"], filename: "App.js",
    },
    // The `onCompiled` hook (optional) is raised after each compilation
    onCompiled() {
        console.log("Compilation finished!")
    }
}

package.json:

{
  "name": "RNTestFSharp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "build": "fable-splitter -c splitter.config.js --define RELEASE",
    "debug": "fable-splitter -c splitter.config.js --define DEBUG",
    "watch": "fable-splitter -c splitter.config.js -w --define DEBUG"
  },
  "dependencies": {
    "@react-native-community/netinfo": "^5.9.5",
    "buffer": "^5.6.0",
    "react": "16.13.1",
    "react-native": "0.63.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "fable-compiler": "^2.10.2",
    "fable-splitter": "^2.2.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

paket.lock:

STORAGE: NONE
RESTRICTION: || (== netcoreapp3.1) (== netstandard2.0) (== netstandard2.1)
NUGET
  remote: https://www.nuget.org/api/v2
    Fable.Browser.Blob (1.1)
      Fable.Core (>= 3.0)
      FSharp.Core (>= 4.6.2)
    Fable.Browser.Dom (1.2)
      Fable.Browser.Blob (>= 1.1)
      Fable.Browser.Event (>= 1.0)
      Fable.Browser.WebStorage (>= 1.0)
      Fable.Core (>= 3.0)
      FSharp.Core (>= 4.7)
    Fable.Browser.Event (1.0)
      Fable.Core (>= 3.0)
      FSharp.Core (>= 4.5.2)
    Fable.Browser.WebStorage (1.0)
      Fable.Browser.Event (>= 1.0)
      Fable.Core (>= 3.0)
      FSharp.Core (>= 4.5.2)
    Fable.Promise (2.1)
      Fable.Core (>= 3.1.5)
      FSharp.Core (>= 4.7)
    FSharp.Core (4.7.2)
    Thoth.Json (4.1)
      Fable.Core (>= 3.1.4)
      FSharp.Core (>= 4.7)
  remote: https://api.nuget.org/v3/index.json
    Fable.Core (3.1.5)
      FSharp.Core (>= 4.7)
    Fable.Elmish (3.1)
      Fable.Core (>= 3.0)
      FSharp.Core (>= 4.6.2)
    Fable.Elmish.React (3.0.1)
      Fable.Core (>= 3.0)
      Fable.Elmish (>= 3.0)
      Fable.React (>= 5.1)
      FSharp.Core (>= 4.6.2)
    Fable.React (6.2)
      Fable.Browser.Dom (>= 1.0)
      Fable.Core (>= 3.1.5)
      FSharp.Core (>= 4.7)
    Fable.React.Native (2.6.1)
      Fable.Core (>= 3.0)
      Fable.Promise (>= 2.0)
      Fable.React (>= 5.2.3)
      FSharp.Core (>= 4.6.2)
      Thoth.Json (>= 3.1)

metro.config.js:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions