R
roblox-ts•4mo ago
Braden

React Error when using conditionals

When I use this conditional: 
return <>{render && children}</>;
return <>{render && children}</>;
I get a strange error of: 
 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: nil. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: nil. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
This is using @rbxts/react on a roblox plugin. But the testing was done with UI Labs
2 Replies
Unknown User
Unknown User•4mo ago
Message Not Public
Sign In & Join Server To View
Braden
BradenOP•4mo ago
yeah, my tsconfig is as follows, it is using react 
{
    "compilerOptions": {
        // required
        "allowSyntheticDefaultImports": true,
        "downlevelIteration": true,
        "jsx": "react",
        "jsxFactory": "React.createElement",
        "jsxFragmentFactory": "React.createFragment",
        "module": "commonjs",
        "moduleResolution": "Node",
        "noLib": true,
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "moduleDetection": "force",
        "strict": true,
        "target": "ESNext",
        "typeRoots": ["node_modules/@rbxts"],

        // configurable
        "types": ["types/plugin"],
        "rootDir": "src",
        "outDir": "out",
        "baseUrl": "src",
        "incremental": true,
        "tsBuildInfoFile": "out/tsconfig.tsbuildinfo"
    }
}
{
    "compilerOptions": {
        // required
        "allowSyntheticDefaultImports": true,
        "downlevelIteration": true,
        "jsx": "react",
        "jsxFactory": "React.createElement",
        "jsxFragmentFactory": "React.createFragment",
        "module": "commonjs",
        "moduleResolution": "Node",
        "noLib": true,
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "moduleDetection": "force",
        "strict": true,
        "target": "ESNext",
        "typeRoots": ["node_modules/@rbxts"],

        // configurable
        "types": ["types/plugin"],
        "rootDir": "src",
        "outDir": "out",
        "baseUrl": "src",
        "incremental": true,
        "tsBuildInfoFile": "out/tsconfig.tsbuildinfo"
    }
}
When the fragment has no children it doesnt have any issues wait.... i see what I did 💀 React.createFragment needed to be React.Fragment per the docs #RTFM thanks for putting up with me 🤣

Did you find this page helpful?