search

sanity-io / sanity-plugin-iframe-pane

Display any URL in a View Pane, along with helpful buttons to copy the URL, display a mobile size, reload the iframe or open in a new tab
MIT License
47 stars 12 forks source link

[bug🐞] - Attempted import error: 'sanity-plugin-iframe-pane' does not contain a default export (imported as 'Iframe'). #97

Closed Your-Ehsan closed 9 months ago

Your-Ehsan commented 10 months ago

I am getting this error in my next.js application. when I try to update this package to latest version. also my next-sanity and sanity's all packages are completely updated to latest version except this one.

To Reproduce

Steps to reproduce the behavior:

  1. update all packages in next.js application.
  2. update all sanity related packages also
  3. note that you will get this error in sanity.config.js 
    [20:13:12.766] Running build in Washington, D.C., USA (East) – iad1
[20:13:12.863] Cloning github.com/Your-Ehsan/your-codes (Branch: dependabot/npm_and_yarn/sanity-plugin-iframe-pane-3.1.3, Commit: 43e7489)
[20:13:13.266] Cloning completed: 402.669ms
[20:13:20.564] Restored build cache
[20:13:20.633] Running "vercel build"
[20:13:21.433] Vercel CLI 33.0.1
[20:13:21.920] Detected `pnpm-lock.yaml` version 6 generated by pnpm 8
[20:13:21.939] Installing dependencies...
[20:13:22.573] Lockfile is up to date, resolution step is skipped
[20:13:22.662] Progress: resolved 1, reused 0, downloaded 0, added 0
[20:13:22.781] Packages: +13 -12
[20:13:22.781] +++++++++++++------------
[20:13:23.663] Progress: resolved 13, reused 0, downloaded 13, added 12
[20:13:23.887] Progress: resolved 13, reused 0, downloaded 13, added 13, done
[20:13:24.994] 
[20:13:24.994] dependencies:
[20:13:24.994] - sanity-plugin-iframe-pane 2.6.1
[20:13:24.994] + sanity-plugin-iframe-pane 3.1.3
[20:13:24.994] - styled-components 6.1.3
[20:13:24.994] + styled-components 6.1.6
[20:13:24.994] 
[20:13:25.346] Done in 3.3s
[20:13:25.391] Detected Next.js version: 14.0.2
[20:13:25.407] Running "pnpm run build"
[20:13:25.894] 
[20:13:25.894] > your-codes@0.1.0 build /vercel/path0
[20:13:25.894] > next build
[20:13:25.894] 
[20:13:26.549]    ▲ Next.js 14.0.2
[20:13:26.549] 
[20:13:26.549]    Creating an optimized production build ...
[20:14:08.692]  ⚠ Compiled with warnings
[20:14:08.696] 
[20:14:08.696] ./sanity.config.ts
[20:14:08.696] Attempted import error: 'sanity-plugin-iframe-pane' does not contain a default export (imported as 'Iframe').
[20:14:08.696] 
[20:14:08.696] Import trace for requested module:
[20:14:08.697] ./sanity.config.ts
[20:14:08.697] ./src/app/admin/[[...index]]/page.tsx
[20:14:08.697] 
[20:14:08.697] ./sanity.config.ts
[20:14:08.697] Attempted import error: 'sanity-plugin-iframe-pane' does not contain a default export (imported as 'Iframe').
[20:14:08.697] 
[20:14:08.697] Import trace for requested module:
[20:14:08.697] ./sanity.config.ts
[20:14:08.697] ./src/app/admin/[[...index]]/page.tsx
[20:14:08.697] 
[20:14:08.697]    Linting and checking validity of types ...
[20:14:13.428] Failed to compile.
[20:14:13.428] 
[20:14:13.428] ./sanity.config.ts:33:22
[20:14:13.428] Type error: Argument of type 'typeof import("/vercel/path0/node_modules/.pnpm/sanity-plugin-iframe-pane@3.1.3_@sanity+client@6.10.0_react-dom@18.2.0_react-is@18.2.0_react@_d7pt6xf5qfqycw2ejqvauwdtta/node_modules/sanity-plugin-iframe-pane/lib/index")' is not assignable to parameter of type 'ComponentType<any> | Partial<ComponentView<Record<string, any>>> | undefined'.
[20:14:13.428] 
                 S.view.form(),
20:14:13.428 |         S.view
20:14:13.428 |            .component(Iframe)
20:14:13.428 |                       ^
20:14:13.428 |            .options({
20:14:13.428 |              url: (doc: SanityDocument) => getPreviewUrl(doc),
20:14:13.429 |            })
[20:14:13.575]  ELIFECYCLE  Command failed with exit code 1.
[20:14:13.592] Error: Command "pnpm run build" exited with 1
[20:14:14.264]

Screenshots image

Which versions of Sanity are you using?

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@portabletext/react": "^3.0.11",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@sanity/code-input": "^4.1.2",
    "@sanity/image-url": "^1.0.2",
    "@sanity/vision": "^3.23.4",
    "@supabase/auth-helpers-nextjs": "^0.8.7",
    "@supabase/ssr": "^0.0.10",
    "@supabase/supabase-js": "^2.39.1",
    "@tailwindcss/typography": "^0.5.10",
    "@types/node": "20.10.6",
    "@types/react": "18.2.43",
    "@types/react-dom": "18.2.18",
    "autoprefixer": "10.4.16",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "eslint": "8.56.0",
    "eslint-config-next": "14.0.4",
    "highlight.js": "^11.9.0",
    "lucide-react": "^0.294.0",
    "next": "14.0.2",
    "next-sanity": "^7.0.5",
    "next-themes": "^0.2.1",
    "postcss": "8.4.32",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sanity": "^3.23.4",
    "sanity-plugin-asset-source-unsplash": "^1.1.2",
    "sanity-plugin-iframe-pane": "^2.6.1",
    "sharp": "^0.33.1",
    "styled-components": "^6.1.6",
    "supabase": "^1.123.4",
    "tailwind-merge": "^2.2.0",
    "tailwindcss": "3.4.0",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.2.2"
  }
}

here's my sanity.config.ts file

/**
 * This configuration is used to for the Sanity Studio that’s mounted on the `\src\app\admin\[[...index]]\page.tsx` route
 */

import Iframe from "sanity-plugin-iframe-pane";

import { visionTool } from "@sanity/vision";
import { SanityDocument, defineConfig } from "sanity";

import { deskTool, type DefaultDocumentNodeResolver } from "sanity/desk";

import { apiVersion, dataset, projectId } from "./sanity/env";
import { schema } from "./sanity/schema";
import { codeInput } from "@sanity/code-input";
import { unsplashImageAsset } from "sanity-plugin-asset-source-unsplash";

// Customize this function to show the correct URL based on the current document
function getPreviewUrl(doc: SanityDocument | any) {
  return doc?.slug?.current
    ? `${window.location.host}/${doc.slug.current}`
    : window.location.host;
}

const defaultDocumentNode: DefaultDocumentNodeResolver = (
  S,
  { schemaType },
) => {
  switch (schemaType) {
    case `movie`:
      return S.document().views([
        S.view.form(),
        S.view
          .component(Iframe)
          .options({
            url: (doc: SanityDocument) => getPreviewUrl(doc),
          })
          .title("Preview"),
      ]);
    default:
      return S.document().views([S.view.form()]);
  }
};

export default defineConfig({
  basePath: "/admin",
  projectId,
  dataset,
  // Add and edit the content schema in the './sanity/schema' folder
  schema,
  plugins: [
    unsplashImageAsset(),
    codeInput(),
    deskTool({ defaultDocumentNode }),
    // Vision is a tool that lets you query your content with GROQ in the studio
    // https://www.sanity.io/docs/the-vision-plugin
    visionTool({ defaultApiVersion: apiVersion }),
  ],
});

What operating system are you using? I am using windows 10 Which versions of Node.js / npm are you running? I am using node_v_20.10.0

techsev commented 10 months ago

Just had the same issue, but it's because they've changed how we need to import Iframe

if your defaultDocumentNode.ts

change

import Iframe from 'sanity-plugin-iframe-pane'

to

import {Iframe} from 'sanity-plugin-iframe-pane'

Your-Ehsan commented 9 months ago

Just had the same issue, but it's because they've changed how we need to import Iframe

if your defaultDocumentNode.ts

change

import Iframe from 'sanity-plugin-iframe-pane'

to

import {Iframe} from 'sanity-plugin-iframe-pane'

thanks its works