[BUG] Import issues with Zod

[erayerdin]

What happened?

Seems like this framework has a problem with zod. Whenever you try to import { z } from "zod", it fails with similar error messages as below:

TypeError: (0 , _v4.z).literal is not a function

Not only literal but any other zod defined types fail. I've seen z.string is not a function or z.number is not a function etc.

I've solved it by import * as z from "zod". However, this solves the issue internally. Whenever you install any other package from NPM that uses zod, the way they import it will fail it. For example:

1. Do pnpm add @openrouter/ai-sdk-provider ai.
2. Use the code below as a content script.

File: contents/detect.ts

// Copyright (C) 2025 Eray Erdin
// 
// This file is part of content-block.
// 
// content-block is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// 
// content-block is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
// 
// You should have received a copy of the GNU General Public License
// along with content-block.  If not, see <https://www.gnu.org/licenses/>.

import type { PlasmoCSConfig } from "plasmo";

import { openrouter } from "@openrouter/ai-sdk-provider";
import { sendToBackground } from "@plasmohq/messaging";
import { generateText } from "ai";

export const config: PlasmoCSConfig = {
  all_frames: true,
  matches: ["<all_urls>"]
}

window.addEventListener("load", () => {
  const observer = new MutationObserver(async () => {
    const response: string[] = await sendToBackground({
      body: location.href,
      name: "listSelector",
    })

    response.forEach((selector) => {
      document.querySelectorAll(selector).forEach((el) => {
        (el as HTMLElement).style.border = "5px solid red"
      })
    })

    const { text } = await generateText({
      model: openrouter("google/gemini-2.0-flash-lite-001"),
      prompt: "Hello",
    })

    console.log("ai text", text)
  })
  observer.observe(document.body, {
    childList: true,
    subtree: true
  })
})

Then you will have the problem in the image. The stack trace points at the internals of @openrouter/ai-sdk-provider, which I cannot directly edit.

So, how can I solve this issue?

Version

Latest

What OS are you seeing the problem on?

Linux

What browsers are you seeing the problem on?

Chrome

Relevant log output

Uncaught TypeError: (0 , _v4.z).literal is not a function
Context
https://eksisozluk.com/ekrem-imamoglu--2577439?a=popular
Stack Trace
detect.37e8495c.js:1344 (4vNGt.fd77668868823174)
detect.37e8495c.js:72 (newRequire)
detect.37e8495c.js:85 (localRequire)
detect.37e8495c.js:379 (wO5CK.@plasmohq/messaging)
detect.37e8495c.js:72 (newRequire)
detect.37e8495c.js:123 (anonymous function)
detect.37e8495c.js:146 (anonymous function)
detect.37e8495c.js:21112 (anonymous function)

var ReasoningDetailSummarySchema = (0, _v4.z).object({
    type: (0, _v4.z).literal("reasoning.summary" /* Summary */ ), // <-- stack trace points here
    summary: (0, _v4.z).string()

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[AnasSiddiqui18]

I am also facing issue when using zod with plasmo.

[AnasSiddiqui18]

when importing all the exports and storing it inside a namespace something like this works for me

import * as z from 'zod';