Cannot read property 'get' of undefined – file.pragmas.get("jsximportsource") in getJSXImplicitImportBase

[joshuaellis]

Bug Report

🔎 Search Terms

• Typescript Cannot read property 'get' of undefined
• TypeError: Cannot read property 'get' of undefined
• Typescript getJSXImplicitImportBase fails in CI

🕗 Version & Regression Information

4.2.3 & nightly

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about everything but it hasn't been covered.

⏯ Playground Link

This is happening on the CI only. And sometimes when I change the jsx property of my tsconfig.json but it's very intermittent.

💻 Code

The codebase is react-spring and you can see the CI failing in this PR pmndrs/react-spring#1361.
Link to specific message here

This is the test I'm currently running locally using https://github.com/nektos/act to debug locally the action as it only fails consistently in the CI. Running tests locally do not throw an error.

describe('animated component', () => {
  it('should pass ', () => {
    expect(true).toBeTruthy()
  })
})

My TSConfig for the web package is:

{
  "include": ["./src"],
  "compilerOptions": {
    "baseUrl": ".",
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["dom", "es2017"],
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveSymlinks": true,
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "target": "esnext"
  }
}

🙁 Actual behavior

The test only fail when using a CI either in github or using https://github.com/nektos/act

As seen in the error message from the CI:

TypeError: Cannot read property 'get' of undefined

      at Object.getJSXImplicitImportBase (../../node_modules/typescript/lib/typescript.js:19174:95)
      at transformSourceFile (../../node_modules/typescript/lib/typescript.js:88621:51)
      at transformSourceFileOrBundle (../../node_modules/typescript/lib/typescript.js:82537:57)
      at transformation (../../node_modules/typescript/lib/typescript.js:100187:24)
      at transformRoot (../../node_modules/typescript/lib/typescript.js:100214:82)
      at Object.transformNodes (../../node_modules/typescript/lib/typescript.js:100198:78)
      at emitJsFileOrBundle (../../node_modules/typescript/lib/typescript.js:100849:32)
      at emitSourceFileOrBundle (../../node_modules/typescript/lib/typescript.js:100796:13)
      at forEachEmittedFile (../../node_modules/typescript/lib/typescript.js:100517:34)
      at Object.emitFiles (../../node_modules/typescript/lib/typescript.js:100776:9)

Looking closer at the error message and looking at the src it looks like this function is throwing:

function getJSXImplicitImportBase(compilerOptions, file) {
        var jsxImportSourcePragmas = file === null || file === void 0 ? void 0 : file.pragmas.get("jsximportsource");
        var jsxImportSourcePragma = ts.isArray(jsxImportSourcePragmas) ? jsxImportSourcePragmas[0] : jsxImportSourcePragmas;
        return compilerOptions.jsx === 4 /* ReactJSX */ ||
            compilerOptions.jsx === 5 /* ReactJSXDev */ ||
            compilerOptions.jsxImportSource ||
            jsxImportSourcePragma ?
            (jsxImportSourcePragma === null || jsxImportSourcePragma === void 0 ? void 0 : jsxImportSourcePragma.arguments.factory) || compilerOptions.jsxImportSource || "react" :
            undefined;
    }

I presume it's specifically having an issue with file.pragmas.

It's really difficult to debug this in the CI and I'm really hoping its something really simple that I'm overlooking. I asked for help in the Discord but I think this is a bit too wild. Please let me know if there's any more information I can give to help.

🙂 Expected behavior

It should pass in the CI.

[joshuaellis]

So after some console logging - console.log('TS', file.pragmas) - it's definite it fails because of file.pragmas being undefined, but I don't understand why this would be the case... here's a snippet of the jest log:

PASS  packages/core/src/helpers.test.ts
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS Map(0) {}
TS undefined
 FAIL  targets/web/src/web.test.ts
  ● Test suite failed to run

    TypeError: Cannot read property 'get' of undefined

      at Object.getJSXImplicitImportBase (../../node_modules/typescript/lib/typescript.js:19175:95)
      at transformSourceFile (../../node_modules/typescript/lib/typescript.js:88622:51)
      at transformSourceFileOrBundle (../../node_modules/typescript/lib/typescript.js:82538:57)
      at transformation (../../node_modules/typescript/lib/typescript.js:100188:24)
      at transformRoot (../../node_modules/typescript/lib/typescript.js:100215:82)
      at Object.transformNodes (../../node_modules/typescript/lib/typescript.js:100199:78)
      at emitJsFileOrBundle (../../node_modules/typescript/lib/typescript.js:100850:32)
      at emitSourceFileOrBundle (../../node_modules/typescript/lib/typescript.js:100797:13)
      at forEachEmittedFile (../../node_modules/typescript/lib/typescript.js:100518:34)
      at Object.emitFiles (../../node_modules/typescript/lib/typescript.js:100777:9)

[joshuaellis]

Context: react-spring is a monorepo, the test setup file was in a package called core and was importing the files it needed from the root of that package (presumably proxied by the main key of the package.json) like so:

File structure

packages
-core
--package.json
--test
---setup
--src
---index 

Test setup:

import { Globals, Controller, FrameValue, SpringValue } from '..' // so this was looking at pkg.json not src/index directly

I'm gonna leave this open incase this is still a bug in TS compiler - as in it should be able to handle this kind of import. If it's not a bug, then please just close it 👍🏼

[weswigham]

I've been trying to repro this locally, even with act, but can't manage to repro this crash locally at all. Can you manage to get a reduced repro?

[joshuaellis]

Sure, I'll have a look at making a branch on react-spring and revert changes that fixed it. I have a strong suspicion the architecture of the repo has an impact on this bug, I'll let you know where I get with it.

[joshuaellis]

I've reverted a branch on react-spring to before i managed to find my fix, but it isn't failing anymore so lets just put this to rest?

[a9udn9u]

I'm having the exact same error, for me it happens when compiling this file from baseui.

Stack trace:

TypeError: Cannot read property 'get' of undefined
    at Object.getJSXImplicitImportBase (x/node_modules/typescript/lib/typescript.js:19392:95)
    at transformSourceFile (x/node_modules/typescript/lib/typescript.js:91326:51)
    at transformSourceFileOrBundle (x/node_modules/typescript/lib/typescript.js:84912:57)
    at transformation (x/node_modules/typescript/lib/typescript.js:102921:27)
    at transformRoot (x/node_modules/typescript/lib/typescript.js:102952:82)
    at Object.transformNodes (x/node_modules/typescript/lib/typescript.js:102936:78)
    at emitJsFileOrBundle (x/node_modules/typescript/lib/typescript.js:103621:32)
    at emitSourceFileOrBundle (x/node_modules/typescript/lib/typescript.js:103568:13)
    at forEachEmittedFile (x/node_modules/typescript/lib/typescript.js:103289:34)
    at Object.emitFiles (x/node_modules/typescript/lib/typescript.js:103548:9)
✖ ｢wdm｣: caused by plugins in Compilation.hooks.processAssets

I tried to backtrack to where file.pragmas becomes undefined, it happened after the second call to transformSourceFileOrBundle in transformTypeScript, more specifically, in the cloneSourceFileWithChanges function. The pragmas is neither an own property of node nor source.

Below is the console.log output of the pragmas value, before and after the transform function call here

---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformTypeScript]
---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformClassFields]
---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformJsx]
---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformESNext]
---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformES2021]
---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformES2020]
---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformES2019]
---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformES2018]
---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformES2017]
---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformES2016]
---- Map(0) {} -> Map(0) {} [Function: transformSourceFileOrBundle] [Function: transformECMAScriptModule]
---- Map(0) {} -> undefined [Function: transformSourceFileOrBundle] [Function: transformTypeScript]
---- undefined -> undefined [Function: transformSourceFileOrBundle] [Function: transformClassFields]

My tsconfig

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "moduleResolution": "node",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "skipLibCheck": true,
    "jsx": "react",
    "outDir": "./dist/"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "types.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}

Dependencies

  "dependencies": {
    "baseui": "^9.116.2",
    "styletron-engine-atomic": "^1.4.8",
    "styletron-react": "^6.0.1"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.11",
    "@types/react-dom": "^17.0.8",
    "typescript": "^4.3.4"
  },

This bug is tricky, I have an App package and a components package, both depend on baseui, App also depends on components, when I don't import stuff from components, baseui in App works fine, but when App imports from components, this error appears.

I tried to create a minimal repro but failed, I have no idea what the root cause is so not sure what to keep in the repro.

[jaredh159]

opened a new issue with a reproduction: #48039