{"library":"razzle-plugin-typescript","title":"Razzle TypeScript Plugin","description":"razzle-plugin-typescript integrates TypeScript support into Razzle applications, allowing developers to use TypeScript for both client-side and server-side code. It provides granular configuration options for underlying tools like `ts-loader` and `fork-ts-checker-webpack-plugin`, enabling custom setups for compilation and type checking. The package is currently at version 4.2.18, receiving updates in sync with the core Razzle framework. A key consideration is that Razzle now includes built-in TypeScript support via Babel. As such, this plugin is primarily recommended for projects requiring advanced or specific TypeScript configurations, such as applying certain Babel transforms to `.ts` files, rather than for basic TypeScript integration, where the native Razzle support is generally sufficient and simpler.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install razzle-plugin-typescript"],"cli":null},"imports":["module.exports = {\n  plugins: ['typescript'],\n};","module.exports = {\n  plugins: [\n    {\n      name: 'typescript',\n      options: {\n        useBabel: true, // Example: Enable Babel processing for TS files\n        tsLoader: { transpileOnly: false }\n      },\n    },\n  ],\n};","import type { WebpackOptions } from 'webpack';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"/* razzle.config.js */\nconst RazzlePluginTypescript = require('razzle-plugin-typescript'); // Not strictly imported, but for context of plugin availability\n\nmodule.exports = {\n  plugins: [\n    {\n      name: 'typescript',\n      options: {\n        // Set useBabel to true if you want to keep using babel for JS/TS interoperability,\n        // or if you want to apply any babel transforms to typescript files.\n        useBabel: false,\n        // Override ts-loader options\n        tsLoader: {\n          transpileOnly: true,\n          experimentalWatchApi: true,\n        },\n        // Override fork-ts-checker-webpack-plugin options for type checking\n        forkTsChecker: {\n          eslint: {\n            files: ['*.js', '*.jsx', '*.ts', '*.tsx'],\n          },\n          async: process.env.NODE_ENV === 'development',\n          formatter: 'codeframe',\n        },\n      },\n    },\n  ],\n  // Optional: Add '.ts' and '.tsx' to Razzle's default extensions\n  modifyWebpackConfig(config, { target, dev }, webpack) {\n    config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx'];\n    return config;\n  }\n};\n\n// Ensure required peer dependencies are installed: \n// yarn add -D typescript ts-loader fork-ts-checker-webpack-plugin\n// Also, ensure a tsconfig.json exists in your project root.","lang":"typescript","description":"This configuration enables the TypeScript plugin in Razzle with custom `ts-loader` and `fork-ts-checker-webpack-plugin` options, and adds TypeScript extensions to Webpack's resolution paths.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}