PD
🧩 Plasmo Developers•2y ago
sumit

vscode error opening .plasmo/static/common/*.tsx and .plasmo/static/common/*.ts files

how do i fix these errors in .plasmo/static/content.tsx 
[{
    "resource": "/extensionname/.plasmo/static/content.tsx",
    "owner": "typescript",
    "code": "2307",
    "severity": 8,
    "message": "Cannot find module '@plasmo-static-common/csui' or its corresponding type declarations.",
    "source": "ts",
    "startLineNumber": 1,
    "startColumn": 52,
    "endLineNumber": 1,
    "endColumn": 80
},{
    "resource": "/extensionname/.plasmo/static/content.tsx",
    "owner": "typescript",
    "code": "2307",
    "severity": 8,
    "message": "Cannot find module '@plasmo-static-common/csui-container-react' or its corresponding type declarations.",
    "source": "ts",
    "startLineNumber": 5,
    "startColumn": 8,
    "endLineNumber": 5,
    "endColumn": 52
},{
    "resource": "/extensionname/.plasmo/static/content.tsx",
    "owner": "typescript",
    "code": "2307",
    "severity": 8,
    "message": "Cannot find module '~type' or its corresponding type declarations.",
    "source": "ts",
    "startLineNumber": 13,
    "startColumn": 51,
    "endLineNumber": 13,
    "endColumn": 58
}]
[{
    "resource": "/extensionname/.plasmo/static/content.tsx",
    "owner": "typescript",
    "code": "2307",
    "severity": 8,
    "message": "Cannot find module '@plasmo-static-common/csui' or its corresponding type declarations.",
    "source": "ts",
    "startLineNumber": 1,
    "startColumn": 52,
    "endLineNumber": 1,
    "endColumn": 80
},{
    "resource": "/extensionname/.plasmo/static/content.tsx",
    "owner": "typescript",
    "code": "2307",
    "severity": 8,
    "message": "Cannot find module '@plasmo-static-common/csui-container-react' or its corresponding type declarations.",
    "source": "ts",
    "startLineNumber": 5,
    "startColumn": 8,
    "endLineNumber": 5,
    "endColumn": 52
},{
    "resource": "/extensionname/.plasmo/static/content.tsx",
    "owner": "typescript",
    "code": "2307",
    "severity": 8,
    "message": "Cannot find module '~type' or its corresponding type declarations.",
    "source": "ts",
    "startLineNumber": 13,
    "startColumn": 51,
    "endLineNumber": 13,
    "endColumn": 58
}]
7 Replies
sumit
sumitOP•2y ago
the static/common files seem to be have errored. example: unedited code in common/content.tsx (my content.tsx is in the root) 
import { createAnchorObserver, createRender } from "@plasmo-static-common/csui"
import {
  InlineCSUIContainer,
  OverlayCSUIContainer
} from "@plasmo-static-common/csui-container-react"
import React from "react"
import { createRoot } from "react-dom/client"

// prettier-sort-ignore
// @ts-ignore
import * as RawMount from "~content"

import type { PlasmoCSUI, PlasmoCSUIAnchor } from "~type"

// Escape parcel's static analyzer
const Mount = RawMount as PlasmoCSUI

const observer = createAnchorObserver(Mount)

const render = createRender(
  Mount,
  [InlineCSUIContainer, OverlayCSUIContainer],
  observer?.mountState,
  async (anchor, rootContainer) => {
    const root = createRoot(rootContainer)
    switch (anchor.type) {
      case "inline": {
        root.render(
          <InlineCSUIContainer anchor={anchor}>
            <RawMount.default anchor={anchor} />
          </InlineCSUIContainer>
        )
        break
      }
      case "overlay": {
        const targetList = observer?.mountState.overlayTargetList || [
          anchor.element
        ]

        root.render(
          <>
            {targetList.map((target, i) => {
              const id = `plasmo-overlay-${i}`
              const innerAnchor: PlasmoCSUIAnchor = {
                element: target,
                type: "overlay"
              }
              return (
                <OverlayCSUIContainer
                  id={id}
                  key={id}
                  anchor={innerAnchor}
                  watchOverlayAnchor={Mount.watchOverlayAnchor}>
                  <RawMount.default anchor={innerAnchor} />
                </OverlayCSUIContainer>
              )
            })}
          </>
        )
        break
      }
    }
  }
)

if (!!observer) {
  observer.start(render)
} else {
  render({
    element: document.documentElement,
    type: "overlay"
  })
}
import { createAnchorObserver, createRender } from "@plasmo-static-common/csui"
import {
  InlineCSUIContainer,
  OverlayCSUIContainer
} from "@plasmo-static-common/csui-container-react"
import React from "react"
import { createRoot } from "react-dom/client"

// prettier-sort-ignore
// @ts-ignore
import * as RawMount from "~content"

import type { PlasmoCSUI, PlasmoCSUIAnchor } from "~type"

// Escape parcel's static analyzer
const Mount = RawMount as PlasmoCSUI

const observer = createAnchorObserver(Mount)

const render = createRender(
  Mount,
  [InlineCSUIContainer, OverlayCSUIContainer],
  observer?.mountState,
  async (anchor, rootContainer) => {
    const root = createRoot(rootContainer)
    switch (anchor.type) {
      case "inline": {
        root.render(
          <InlineCSUIContainer anchor={anchor}>
            <RawMount.default anchor={anchor} />
          </InlineCSUIContainer>
        )
        break
      }
      case "overlay": {
        const targetList = observer?.mountState.overlayTargetList || [
          anchor.element
        ]

        root.render(
          <>
            {targetList.map((target, i) => {
              const id = `plasmo-overlay-${i}`
              const innerAnchor: PlasmoCSUIAnchor = {
                element: target,
                type: "overlay"
              }
              return (
                <OverlayCSUIContainer
                  id={id}
                  key={id}
                  anchor={innerAnchor}
                  watchOverlayAnchor={Mount.watchOverlayAnchor}>
                  <RawMount.default anchor={innerAnchor} />
                </OverlayCSUIContainer>
              )
            })}
          </>
        )
        break
      }
    }
  }
)

if (!!observer) {
  observer.start(render)
} else {
  render({
    element: document.documentElement,
    type: "overlay"
  })
}
lab
lab•2y ago
@cooper how did you stumble upon the error?
sumit
sumitOP•2y ago
just opened the files in vs code (problems go away when closing the files, obviously)
lab
lab•2y ago
Oh the code in .plasmo directory? It's to be used in the pre-compilation process. If you wish to edit it, you will want to ignore those errors because the glue code doesn't care about type when added into .plasmo the typing is used at the framework development layer tho
sumit
sumitOP•2y ago
oh, can you tell me more (maybe document this error in brief here?) and no, I don't wish to touch the code if it's just plasmo glue code great framework btw
lab
lab•2y ago
The type error you're seeing occurs because as you have noticed - it uses some development type path that pertains to the framework's source code directory and not the project dir during compilation of your final project tho, these gluecode typing issue are ignored since they are irrelevant - treat them like js basically.
sumit
sumitOP•2y ago
interesting, any plans to fix them? seems doable but low priority i guess
Want results from more Discord servers?
Add your server