Registry / razzle-plugin-typescript

razzle-plugin-typescript

library4.2.18jsnpmunverified

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.

npm install razzle-plugin-typescript

github ↗package ↗

INSTALL

IMPORT

SIG · RAZZLE-PLUGIN-TYPE

razzle-plugin-typescript

javascriptv4.2.18

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

typescript plugin (default)

✓ module.exports = { plugins: ['typescript'], };

✗ import { typescript } from 'razzle-plugin-typescript'

Razzle plugins are typically configured in `razzle.config.js` by referencing their name as a string in the `plugins` array. This is not a standard ES module import.

typescript plugin (with options)

✓ module.exports = { plugins: [ { name: 'typescript', options: { useBabel: true, // Example: Enable Babel processing for TS files tsLoader: { transpileOnly: false } }, }, ], };

✗ const config = require('razzle-plugin-typescript'); // ... then try to manipulate config.plugins

For custom configurations, the plugin is specified as an object with a `name` and `options` property within the `plugins` array.

TypeScript types (example)

✓ import type { WebpackOptions } from 'webpack';

While `razzle-plugin-typescript` enables TypeScript, type imports for core Razzle configurations or Webpack itself would come from their respective packages or `@types/` definitions.

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.

/* razzle.config.js */ const RazzlePluginTypescript = require('razzle-plugin-typescript'); // Not strictly imported, but for context of plugin availability module.exports = { plugins: [ { name: 'typescript', options: { // Set useBabel to true if you want to keep using babel for JS/TS interoperability, // or if you want to apply any babel transforms to typescript files. useBabel: false, // Override ts-loader options tsLoader: { transpileOnly: true, experimentalWatchApi: true, }, // Override fork-ts-checker-webpack-plugin options for type checking forkTsChecker: { eslint: { files: ['*.js', '*.jsx', '*.ts', '*.tsx'], }, async: process.env.NODE_ENV === 'development', formatter: 'codeframe', }, }, }, ], // Optional: Add '.ts' and '.tsx' to Razzle's default extensions modifyWebpackConfig(config, { target, dev }, webpack) { config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx']; return config; } }; // Ensure required peer dependencies are installed: // yarn add -D typescript ts-loader fork-ts-checker-webpack-plugin // Also, ensure a tsconfig.json exists in your project root.

Debug

Known issues

gotchaRazzle now includes built-in TypeScript support leveraging Babel. This plugin is generally not recommended for new projects unless specific advanced configurations, such as applying Babel transforms to TypeScript files, are required. Using Razzle's native support is often simpler and preferred.

fix

Consider removing `razzle-plugin-typescript` and configuring TypeScript directly via Razzle's core features or Babel settings, as demonstrated in Razzle's `with-typescript` example.

affects: >=4.0.0

breakingStarting with Razzle 4.2.18, `razzle.config.js` now supports `type:module` in your `package.json` for ESM syntax. Older configurations might encounter `SyntaxError` if they mix CommonJS exports with ESM `import` statements without properly declaring `"type": "module"` in `package.json` or vice-versa.

fix

Ensure your `razzle.config.js` matches your project's module system. If using ESM `import/export` in `razzle.config.js`, add `"type": "module"` to your `package.json`. Otherwise, stick to CommonJS `require/module.exports` syntax.

affects: >=4.2.18

gotchaThis plugin relies on `ts-loader` and `fork-ts-checker-webpack-plugin`. These packages, along with `typescript` itself, are peer dependencies or expected dependencies and must be installed separately in your project.

fix

Install required packages: `yarn add -D typescript ts-loader fork-ts-checker-webpack-plugin` or `npm install --save-dev typescript ts-loader fork-ts-checker-webpack-plugin`. Also ensure a `tsconfig.json` file is present in your project root.

affects: >=1.0.0

Errors

Common errors & fixes

SyntaxError: Cannot use import statement outside a module

Your `razzle.config.js` is using ES module `import` syntax (e.g., `import { name } from 'module';`) but your `package.json` does not have `"type": "module"` set, or it's being treated as CommonJS.

fix

In your `package.json`, add `"type": "module"` at the top level to enable ESM. Alternatively, rewrite your `razzle.config.js` to use CommonJS `require()` and `module.exports` syntax.

Error: Can't resolve 'typescript' in '...' or similar webpack build failures related to TypeScript files.

The `typescript` package or its associated Webpack loaders (`ts-loader`) are not installed as dependencies, or your `tsconfig.json` is misconfigured.

fix

Ensure `typescript`, `ts-loader`, and `fork-ts-checker-webpack-plugin` are installed as dev dependencies (`yarn add -D typescript ts-loader fork-ts-checker-webpack-plugin`). Verify that a valid `tsconfig.json` exists in your project root and is correctly configured for your project structure.

TSXXXX: (some TypeScript compilation error)

These are standard TypeScript compilation errors. While the plugin enables TS, it doesn't solve code-specific issues. Errors can stem from type mismatches, missing definitions, incorrect `tsconfig.json` settings (e.g., `strict` mode, `jsx` option), or incompatible dependencies.

fix

Address the specific TypeScript error message by correcting your code, adjusting your `tsconfig.json` compiler options (e.g., `skipLibCheck`, `noImplicitAny`, `jsx`), or installing `@types/` packages for untyped dependencies. Check `forkTsChecker` options for specific linting rules if applicable.

Upgrade

Version history

4.2.18latest on npm

Audit

Dependencies

razzlerequiredCore Razzle framework, required for plugin functionality.

razzle-dev-utilsrequiredProvides utility functions used by Razzle plugins.

webpackrequiredThe plugin configures Webpack loaders and plugins for TypeScript processing.

ts-loaderoptionalWebpack loader for TypeScript files, configurable via plugin options.

fork-ts-checker-webpack-pluginoptionalWebpack plugin for asynchronous TypeScript type checking, configurable via plugin options.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/jaredpalmer/razzle ↗

packagehttps://www.npmjs.com/package/razzle-plugin-typescript ↗