Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@rbxts/react-roblox
Advanced tools
@rbxts/react-roblox - npm Package Compare versions
Comparing version 0.4.0 to 17.2.0
| { | ||
| "name": "@rbxts/react-roblox", | ||
| "version": "0.4.0", | ||
| "version": "17.2.0", | ||
| "description": "React DOM bindings for Roblox", | ||
@@ -29,6 +29,6 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@rbxts/react": "0.4.0", | ||
| "@rbxts/react-vendor": "0.4.0" | ||
| "@rbxts/react": "17.2.0", | ||
| "@rbxts/react-vendor": "17.2.0" | ||
| }, | ||
| "scripts": {} | ||
| } |
@@ -14,9 +14,11 @@ <p align="center"> | ||
| TypeScript type definitions for [React Lua](https://github.com/jsdotlua/react-lua) and [roblox-ts](https://roblox-ts.com), sourced from the official React types. Currently, only [`@rbxts/react`](https://npmjs.com/package/@rbxts/react) and | ||
| [`@rbxts/react-roblox`](https://npmjs.com/package/@rbxts/react-roblox) are available. | ||
| [`@rbxts/react-roblox`](https://npmjs.com/package/@rbxts/react-roblox) may be installed. | ||
| If we're missing any deviations from [React Lua](https://jsdotlua.github.io/react-lua/), please [open an issue or pull request](https://github.com/littensy/rbxts-react/issues/new) to let us know! | ||
| If you're encountering issues with `@rbxts/react`, please see the [Troubleshooting](#-troubleshooting) section for more information. | ||
| > [!IMPORTANT] | ||
| > This package uses unreleased roblox-ts features, and requires `roblox-ts@next` to be installed. | ||
| > If you're encountering issues with `@rbxts/react`, please see the [Troubleshooting](#-troubleshooting) section for more information. | ||
| > This package requires roblox-ts version 3.0 or later. | ||
| > If you're using an older version of roblox-ts, you'll need to update to the latest version. | ||
@@ -27,3 +29,3 @@ ## 📦 Setup | ||
| Get started by adding React and ReactRoblox to your project: | ||
| Get started by installing `@rbxts/react` and `@rbxts/react-roblox`: | ||
@@ -36,13 +38,5 @@ ```sh | ||
| `roblox-ts` must also be installed with the `next` tag: | ||
| ```sh | ||
| npm install -D roblox-ts@next | ||
| yarn add -D roblox-ts@next | ||
| pnpm add -D roblox-ts@next | ||
| ``` | ||
| ### Configuration | ||
| Set up your `tsconfig.json` to use the React JSX factory. | ||
| Set up your `tsconfig.json` JSX options to use React's `createElement` and `Fragment`: | ||
@@ -181,12 +175,23 @@ ```json | ||
| If you encounter this error during compilation, it means that you're using an older version of `roblox-ts`. Make sure to install `roblox-ts@next` and uninstall any global installations of `roblox-ts`: | ||
| If you encounter this error during compilation, it means that you're using an older version of `roblox-ts`. Make sure to install the latest version of `roblox-ts` and remove any global installations: | ||
| ```sh | ||
| npm uninstall -g roblox-ts | ||
| npm install -D roblox-ts@next | ||
| npm install -D roblox-ts@latest | ||
| ``` | ||
| ### `nil` cannot be used as a JSX component. | ||
| This error typically occurs when `tsconfig.json` has not been configured correctly. Make sure that your fragment factory is set to `React.Fragment`, and that your JSX factory is set to `React.createElement`: | ||
| ```json | ||
| "compilerOptions": { | ||
| "jsxFactory": "React.createElement", | ||
| "jsxFragmentFactory": "React.Fragment" | ||
| } | ||
| ``` | ||
| ### `(X)` cannot be used as a JSX component. Its return type `Element` is not a valid JSX element. | ||
| This error occurs when a conflicting installation of react-ts is present in your project. This can be for one of two reasons: | ||
| This error can occur when a conflicting installation of react-ts is present in your project. This can be for one of two reasons: | ||
@@ -206,3 +211,3 @@ 1. You have react-ts installed in your dependencies. (`npm uninstall @rbxts/roact`) | ||
| This error happens when React can't figure out how to retrieve the current instance of the component. This can be for a number of reasons: | ||
| This error happens when a hook was called in an invalid environment. There are two common reasons for this error: | ||
@@ -222,8 +227,6 @@ 1. You're using a hook outside of a component, or using function components incorrectly. | ||
| When multiple versions of React are present in your node_modules, any packages that depend on React might try to use the wrong one. | ||
| When multiple versions of React are present in your node_modules, your packages might import hooks from the wrong version of React. Update your packages to the latest version that supports `@rbxts/react`, or remove the conflicting packages. | ||
| Make sure your `rbxts_include.node_module.@rbxts` folder in Roblox Studio doesn't contain a module named "React" (capital R). This module is a sign Rojo has not fully removed react-ts. If so, you should delete your `node_modules` folder and restart Rojo. | ||
| If you have no conflicting dependencies, or a fresh install doesn't remove the outdated package, see [the previous section](#x-cannot-be-used-as-a-jsx-component-its-return-type-element-is-not-a-valid-jsx-element) for more information. | ||
| If a fresh install doesn't fix the issue, you might have a package installed that depends on react-ts. See [the previous section](#x-cannot-be-used-as-a-jsx-component-its-return-type-element-is-not-a-valid-jsx-element) for more information. | ||
| ### My issue isn't listed here! | ||
@@ -230,0 +233,0 @@ |
@@ -23,2 +23,7 @@ import { ReactNode, ReactPortal } from "@rbxts/react"; | ||
| /** | ||
| * createRoot lets you create a root to display React components inside a Roblox instance. | ||
| * | ||
| * @see {@link https://react.dev/reference/react-dom/client/createRoot API Reference for `createRoot`} | ||
| */ | ||
| function createRoot(container: Instance, options?: RootOptions): Root; | ||
@@ -25,0 +30,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.15%
11407
- Lines of code
- increased by9.8%
56
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by1.27%
239
Dependency changes
+ Added@rbxts/react@17.2.0(transitive)
+ Added@rbxts/react-vendor@17.2.0(transitive)
- Removed@rbxts/react@0.4.0(transitive)
- Removed@rbxts/react-vendor@0.4.0(transitive)
Updated@rbxts/react@17.2.0
Updated@rbxts/react-vendor@17.2.0