TypeStrong / TypeStrong/ts-loader

ts-loader compatibility with typescript 5.6.3 ?

Open
#1,659 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.5k
Forks
439
Avg merge
17h 17m
Merged PRs (30d)
2

Description

Expected Behaviour

I use emotion.d.ts file to redeclare the Theme interface, and everything works fine with typescript 5.5.4, but after updated to typescript 5.6.3 the build fails with errors pointing on ts-loader.

Actual Behaviour

After the Typescript version update to 5.6.3 looks like emotion.d.ts is skipped by compiler, and there are errors that point on the default Theme interface which is just empty object.

[tsl] ERROR in C:\some-path\components\Page.tsx(63,38)
      TS2339: Property 'colors' does not exist on type 'Theme'.
ts-loader-default_321045a7e6183ef3
Error: [tsl] ERROR in C:\some-path\Page.tsx(63,38)
      TS2339: Property 'colors' does not exist on type 'Theme'.
    at makeError (C:\some-path\node_modules\ts-loader\dist\utils.js:93:19)
    at C:\some-path\node_modules\ts-loader\dist\utils.js:63:27
    at Array.map (<anonymous>)
    at formatErrors (C:\some-path\node_modules\ts-loader\dist\utils.js:46:14)
    at provideErrorsToWebpack (C:\some-path\node_modules\ts-loader\dist\after-compile.js:167:62)
    at C:\some-path\node_modules\ts-loader\dist\after-compile.js:36:9
    at C:\some-path\node_modules\ts-loader\dist\instances.js:206:13
    at fn (C:\some-path\node_modules\webpack\lib\Compilation.js:491:10)
    at Hook.eval [as callAsync] (eval at create (C:\some-path\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:20:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\some-path\node_modules\tapable\lib\Hook.js:18:14)
Steps to Reproduce the Problem
  1. Setup project
"dependencies": {
    "@emotion/react": "11.13.3",
    "@emotion/styled": "11.13.0",
    "ts-loader": "9.5.1",
    "typescript": "5.6.3",
    ... 
  1. Re-Declare Theme interface
// emotion.d.ts
import '@emotion/react'

declare module '@emotion/react' {
  export interface Theme {
    colors: {
      black: string
      darkBlue: string
      darkGreen: string
      gray: string
      green: string
      lightGreen: string
      mediumGreen: string
      orange: string
      cyan: string
      magenta: string
      purple: string
      red: string
      yellow: string
      white: string
    }
  1. yarn run start

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the emotion.d.ts module augmentation and the ts-loader 9.5.1 path shown in the error, then compare the build with TypeScript 5.5.4 and 5.6.3 using yarn run start. Check whether the augmentation is included after the upgrade; done means the reproduced build recognizes Theme.colors without the TS2339 error.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, webpack
Domain
build-system
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.