{"id":14885,"library":"react-static-plugin-typescript","title":"React Static TypeScript Plugin","description":"The `react-static-plugin-typescript` package integrates TypeScript support into projects built with the React Static framework, enabling the use of `.ts` and `.tsx` files for components and application logic. The current stable version is 7.6.2. It operates by hooking into React Static's build pipeline to compile TypeScript code and offers an optional type-checking feature during compilation. This plugin is a core component for React Static users who prefer TypeScript for improved code maintainability and developer experience. Its release cadence is tightly coupled with the React Static framework's updates. Key differentiators include its seamless integration into the `static.config.js` file and its ability to toggle type-checking during development builds, providing flexibility for different workflow needs. The React Static ecosystem appears to be in a maintenance state, meaning this plugin follows a similar lifecycle.","status":"maintenance","version":"7.6.2","language":"javascript","source_language":"en","source_url":"https://github.com/react-static/react-static","tags":["javascript"],"install":[{"cmd":"npm install react-static-plugin-typescript","lang":"bash","label":"npm"},{"cmd":"yarn add react-static-plugin-typescript","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-static-plugin-typescript","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for TypeScript compilation and type checking.","package":"typescript","optional":false},{"reason":"Provides essential type definitions for React components when working in TypeScript, although it's a dev dependency for the project rather than a peer dependency of the plugin.","package":"@types/react","optional":false}],"imports":[{"note":"This plugin is configured by its string name within the `plugins` array in `static.config.js`; it does not export runtime symbols for direct import into user application code. `static.config.js` itself typically uses ESM `export default`.","wrong":"import { ReactStaticTypeScriptPlugin } from 'react-static-plugin-typescript';","symbol":"PluginConfiguration","correct":"export default {\n  plugins: ['react-static-plugin-typescript'],\n}"},{"note":"To pass options to the plugin, wrap the plugin's string name and an options object in an array within the `plugins` array. This is the standard way for React Static plugins.","wrong":"const pluginConfig = require('react-static-plugin-typescript'); // Incorrect for static.config.js and for passing options","symbol":"PluginWithOptions","correct":"export default {\n  plugins: [['react-static-plugin-typescript', { typeCheck: true }]],\n}"}],"quickstart":{"code":"npm install react-static-plugin-typescript @types/react --save-dev\n\n// static.config.js (in your project root)\nexport default {\n  plugins: [\n    // Add the TypeScript plugin, optionally with typeCheck enabled\n    ['react-static-plugin-typescript', { typeCheck: true }]\n  ],\n  // Other React Static configurations...\n}\n\n// tsconfig.json (in your project root)\n{\n  \"compilerOptions\": {\n    \"target\": \"es2015\",\n    \"module\": \"esnext\",\n    \"lib\": [\"es2015\", \"dom\"],\n    \"moduleResolution\": \"node\",\n    \"skipLibCheck\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"allowJs\": true,\n    \"jsx\": \"preserve\",\n    \"sourceMap\": true,\n    \"removeComments\": false,\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\", \"build\"]\n}","lang":"typescript","description":"This quickstart demonstrates how to install the plugin, add it to your `static.config.js` with options for type checking, and configure a basic `tsconfig.json` for a new or existing React Static project using TypeScript."},"warnings":[{"fix":"Upgrade your Node.js environment to version 12 or newer to ensure the build process functions correctly.","message":"Node.js v10 support was removed across the React Static v7.2.0 ecosystem, including this plugin. Projects now require Node.js v12 or higher for compatibility.","severity":"breaking","affected_versions":">=7.2.0"},{"fix":"Refer to Emotion's v11 upgrade guide and adjust your Emotion setup and component code accordingly for compatibility.","message":"The `v7.6.0` release of React Static brought an update to its `emotion` plugin to support Emotion v11. If your project uses Emotion, this might introduce breaking changes requiring updates to your Emotion configuration and component styling.","severity":"breaking","affected_versions":">=7.6.0"},{"fix":"For robust development, it is highly recommended to keep `typeCheck: true` and resolve all TypeScript errors. Only disable it for specific performance needs, ensuring type safety is managed by other tools (e.g., editor, CI linting).","message":"Disabling type checking via the `typeCheck: false` option can lead to uncaught TypeScript errors during compilation, potentially resulting in runtime issues that would otherwise be caught at build time.","severity":"gotcha","affected_versions":"All"},{"fix":"Ensure a valid `tsconfig.json` is present at the project root, typically including `jsx: \"preserve\"`, `lib: [\"es2015\", \"dom\"]`, and `moduleResolution: \"node\"`.","message":"Missing or incorrectly configured `tsconfig.json` will prevent the plugin from properly compiling TypeScript files, leading to build failures or unexpected behavior. Ensure it aligns with React and modern JavaScript practices.","severity":"gotcha","affected_versions":"All"},{"fix":"Run `npm install typescript @types/react --save-dev` to ensure all necessary type tools are available for your project.","message":"The `typescript` peer dependency must be installed in your project, along with `@types/react` as a dev dependency. Failure to do so will result in compilation errors or missing type definitions.","severity":"gotcha","affected_versions":"All"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install typescript --save-dev` to install the TypeScript compiler.","cause":"The `typescript` peer dependency is not installed in the project.","error":"Module not found: Error: Can't resolve 'typescript' in '...'"},{"fix":"Correct the TypeScript type errors in your source code. If the error is intentional or a temporary workaround, consider casting or modifying the type definitions. For faster local iteration, you may set `typeCheck: false` in the plugin options (not recommended for production builds).","cause":"A TypeScript type error was detected during compilation when `typeCheck` is enabled. This prevents the build from completing.","error":"ERROR in TS[...] Property '...' does not exist on type '...'."},{"fix":"Ensure all React Static page components and `src/App.tsx` have a `export default MyComponent;` statement.","cause":"A React Static template (e.g., a page component or `src/App.tsx`) is missing a default export, which is required by the framework.","error":"Error: No default export for template [...]"},{"fix":"Verify that `tsconfig.json` exists in your project's root directory and that its content is valid JSON. Use a JSON linter or editor to check for syntax errors.","cause":"The `tsconfig.json` file is either missing from the project root or contains invalid JSON syntax, preventing the TypeScript compiler from configuring correctly.","error":"Failed to load tsconfig.json: [...]"}],"ecosystem":"npm"}