Okay, I'm stumped here. I have a simple React component (just starting out). I need to fetch the data so I'm waiting on some async data. This is my solution as it stands now:

```js
import { Component } from "react";
import { Bible } from "./models";

interface State {
  bible?: Bible;
}

export class RevApp extends Component<{}, State> {
  state = {
    bible: undefined,
  };

  componentDidMount() {
    Bible.onReady().then((bible) => {
      this.setState({
        bible,
      });
    });
  }

  render() {
    const { bible } = this.state;
    //return <div>{bible ? bible.ls() : "Loading Bible..."}</div>;
    if (bible) {
      return <div>{bible.ls()}</div>;
    } else {
      return <div>Loading Bible...</div>;
    }
  }
}

```

For some reason I get for the `bible.ls()` (specifically the bible object) the compiler error "Object is possibly undefined". This makes no sense! I have tried putting an ! (i.e. `bible!.ls()` but then I get a complaint that "Property 'ls' does not exist on type 'never'".

The real head scratcher is that this error only shows up in my linter, but not my compiler. Which is all well and good except when I push to production my code needs to pass the linter before it is compiled.

Can anyone tell me why I am getting this behavior?

Here is my tsconfig in case it has something to do with the issue (generated by nextjs):

```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "."
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

```

typescript version "4.3.5"

node version "14.17.3"