How to add dependency to client handler? #60

FreePhoenix888 · 2024-01-31T12:01:39Z

We have added dependency this way: main...LiKissDmd:deepcase:main

Here is client handler code:

async ({ deep, require }) => {
  const React = require('react');
  const { Box,Button } = require('@chakra-ui/react');
  const { generateMessages, getAllCoolOrders } = require("@likissdmd/warframe-market-prime-trash-buyer")

  return ({ fillSize, style, link }) => {
    function buttonClickHandler(){
      const allCoolOrders = await getAllCoolOrders()
    const messages = generateMessages(allCoolOrders)
    }
    return <Box
        style={{ width: 300, height: 300, ...style }}
        bg={'bgColor'}
        color={'text'}
        borderColor={'borderColor'}
        borderWidth='thin'
        borderWidth='1px' borderRadius='lg'
        padding={1}
    >
<Button onClick={buttonClickHandler}>
Generate Messages
</Button>
    </Box>
  }
}

Nothing is showed in the preview. I think this is related to import. When we were trying to import this package in async docker handler (not client) we had error like "You are importing es module by using require, use async import instead (await import)) and we fixed that by using await import instead and it was working. await import here does not work

The text was updated successfully, but these errors were encountered:

Konard · 2024-01-31T12:04:27Z

It is module, so looks like the correct way to add dependency to ClientHandler.

Nothing is showed in the preview.

See browser console, there might be an error on JSX/TSX compilation.

Also, please do not import react-calendar-timeline package, it does not exist in package.json

Note that after switching to fork of deepcase it is required to execute npm i in dev repository.

FreePhoenix888 · 2024-02-02T09:54:12Z

The changes I have made to deepcase:

https://github.com/deep-foundation/deepcase/pull/61/files

Note that I have installed the dependency by using npm install @likissdmd/warframe-market-prime-trash-buyer

Working Client Handler Code (Without importing the library, with Importing other libraries by using require)

async ({ deep, require }) => {
  const React = require('react');
  const { Box,Button } = require('@chakra-ui/react');
  // const { generateMessages, getAllCoolOrders } = require("@likissdmd/warframe-market-prime-trash-buyer")

  return ({ fillSize, style, link }) => {
    return <Box
        style={{ width: 300, height: 300, ...style }}
        bg={'bgColor'}
        color={'text'}
        borderColor={'borderColor'}
        borderWidth='thin'
        borderWidth='1px' borderRadius='lg'
        padding={1}
    >
<Button>
Generate Messages
</Button>
    </Box>
  }
}

Not Working Client Handler Code (Importing the library by using require)

async ({ deep, require }) => {
  const React = require('react');
  const { Box,Button } = require('@chakra-ui/react');
  const { generateMessages, getAllCoolOrders } = require("@likissdmd/warframe-market-prime-trash-buyer")

  return ({ fillSize, style, link }) => {
    return <Box
        style={{ width: 300, height: 300, ...style }}
        bg={'bgColor'}
        color={'text'}
        borderColor={'borderColor'}
        borderWidth='thin'
        borderWidth='1px' borderRadius='lg'
        padding={1}
    >
<Button>
Generate Messages
</Button>
    </Box>
  }
}

Errors

``` editor evalClientHandler error Error: Module not found: Can't resolve @likissdmd/warframe-market-prime-trash-buyer at r (client-handler.js:254:11) at eval (eval at (client-handler.js:1:1), :6:24) at eval (client-handler.js:24:33) at Generator.next () at eval (client-handler.js:12:71) at new Promise () at __awaiter (client-handler.js:8:12) at evalClientHandler (client-handler.js:17:12) at eval (client-handler.js:328:122) at Generator.next () at eval (client-handler.js:75:71) at new Promise () at __awaiter (client-handler.js:71:12) at evalClientHandler (client-handler.js:327:12) at CytoEditor._e (editor.js:286:75) at commitHookEffectListMount (react-dom.development.js:23145:26) at commitPassiveMountOnFiber (react-dom.development.js:24921:13) at commitPassiveMountEffects_complete (react-dom.development.js:24886:9) at commitPassiveMountEffects_begin (react-dom.development.js:24873:7) at commitPassiveMountEffects (react-dom.development.js:24861:3) at flushPassiveEffectsImpl (react-dom.development.js:27034:3) at flushPassiveEffects (react-dom.development.js:26979:14) at performSyncWorkOnRoot (react-dom.development.js:26071:3) at flushSyncCallbacks (react-dom.development.js:12042:22) at commitRootImpl (react-dom.development.js:26954:3) at commitRoot (react-dom.development.js:26677:5) at finishConcurrentRender (react-dom.development.js:25976:9) at performConcurrentWorkOnRoot (react-dom.development.js:25804:7) at workLoop (scheduler.development.js:266:34) at flushWork (scheduler.development.js:239:14) at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21) ```

Working Client Handler Code (Importing other libraries by using await deep.import)

async ({ deep, require }) => {
  const React = await deep.import('react');
  const { Box,Button } = await deep.import('@chakra-ui/react');
  // const { generateMessages, getAllCoolOrders } = require("@likissdmd/warframe-market-prime-trash-buyer")

  return ({ fillSize, style, link }) => {
    return <Box
        style={{ width: 300, height: 300, ...style }}
        bg={'bgColor'}
        color={'text'}
        borderColor={'borderColor'}
        borderWidth='thin'
        borderWidth='1px' borderRadius='lg'
        padding={1}
    >
<Button>
Generate Messages
</Button>
    </Box>
  }
}

Not Working Client Handler Code (Importing the library by using await deep.import)

async ({ deep, require }) => {
  const React = await deep.import('react');
  const { Box,Button } = await deep.import('@chakra-ui/react');
  const { generateMessages, getAllCoolOrders } = await deep.import("@likissdmd/warframe-market-prime-trash-buyer")

  return ({ fillSize, style, link }) => {
    return <Box
        style={{ width: 300, height: 300, ...style }}
        bg={'bgColor'}
        color={'text'}
        borderColor={'borderColor'}
        borderWidth='thin'
        borderWidth='1px' borderRadius='lg'
        padding={1}
    >
<Button>
Generate Messages
</Button>
    </Box>
  }
}

Errors:

Errors

``` IGNORED ERROR: Call to DeepClient.resolveDependency is failed with Error: Module not found: Can't resolve @likissdmd/warframe-market-prime-trash-buyer at r (client-handler.js:254:11) at eval (client-handler.js:248:16) at Generator.next () at eval (client-handler.js:75:71) at new Promise () at __awaiter (client-handler.js:71:12) at _deep_foundation_deeplinks_imports_client__WEBPACK_IMPORTED_MODULE_2__.DeepClient.resolveDependency (client-handler.js:204:113) at DeepClient.eval (client.js:823:45) at Generator.next () at eval (client.js:44:71) at new Promise () at __awaiter (client.js:40:12) at DeepClient.import (client.js:820:16) at eval (eval at (client-handler.js:1:1), :6:41) at eval (client-handler.js:24:33) at Generator.next () at eval (client-handler.js:12:71) at new Promise () at __awaiter (client-handler.js:8:12) at evalClientHandler (client-handler.js:17:12) at eval (client-handler.js:328:122) at Generator.next () at eval (client-handler.js:75:71) at new Promise () at __awaiter (client-handler.js:71:12) at evalClientHandler (client-handler.js:327:12) at CytoEditor._e (editor.js:286:75) at commitHookEffectListMount (react-dom.development.js:23145:26) at commitPassiveMountOnFiber (react-dom.development.js:24921:13) at commitPassiveMountEffects_complete (react-dom.development.js:24886:9) at commitPassiveMountEffects_begin (react-dom.development.js:24873:7) at commitPassiveMountEffects (react-dom.development.js:24861:3) at flushPassiveEffectsImpl (react-dom.development.js:27034:3) at flushPassiveEffects (react-dom.development.js:26979:14) at performSyncWorkOnRoot (react-dom.development.js:26071:3) at flushSyncCallbacks (react-dom.development.js:12042:22) at commitRootImpl (react-dom.development.js:26954:3) at commitRoot (react-dom.development.js:26677:5) at finishConcurrentRender (react-dom.development.js:25976:9) at performConcurrentWorkOnRoot (react-dom.development.js:25804:7) at workLoop (scheduler.development.js:266:34) at flushWork (scheduler.development.js:239:14) at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21) ```

Konard · 2024-02-02T09:58:42Z

@FreePhoenix888 use commands from this section: https://github.com/deep-foundation/dev?tab=readme-ov-file#workspaces

For example:

npm run workspace-install --workspace_arg=deepcase --package_arg="@likissdmd/warframe-market-prime-trash-buyer"

This command should be executed in dev folder.

Note that dev repository should be forked too, deepcase itself is not enough.

FreePhoenix888 · 2024-02-02T10:15:15Z

@FreePhoenix888 use commands from this section: https://github.com/deep-foundation/dev?tab=readme-ov-file#workspaces

For example:
npm run workspace-install --workspace_arg=deepcase --package_arg="@likissdmd/warframe-market-prime-trash-buyer"
This command should be executed in dev folder.

Note that dev repository should be forked too, deepcase itself is not enough.

Accodring to your answer I have checked out to main in deepcase, executed the command you provided in dev folder, but I still get the same error

The package is installed:

gitpod /workspace/dev/packages/deepcase (main) $ npm ls @likissdmd/warframe-market-prime-trash-buyer
@deep-foundation/[email protected] /workspace/dev
└─┬ @deep-foundation/[email protected] -> ./packages/deepcase
  └── @likissdmd/[email protected]

FreePhoenix888 · 2024-02-02T10:31:26Z

I am not sure how this error happens but I created a new gitpod workspace with deep and:

npm run workspace-install --workspace_arg=deepcase --package_arg="@likissdmd/warframe-market-prime-trash-buyer"
Go to deepcase and add package to client-handler.tsx as in pull request
Create tsx link with this code:

async ({ deep, require }) => {
  const React = require('react');
  const { Box,Button } = require('@chakra-ui/react');
  const importData = await deep.import("@likissdmd/warframe-market-prime-trash-buyer")
  console.log({importData}) 

  return ({ fillSize, style, link }) => {
    return <Box
        style={{ width: 300, height: 300, ...style }}
        bg={'bgColor'}
        color={'text'}
        borderColor={'borderColor'}
        borderWidth='thin'
        borderWidth='1px' borderRadius='lg'
        padding={1}
    >
<Button>
Generate Messages
</Button>
    </Box>
  }
}

See error

Error

editor evalClientHandler error SyntaxError: Unexpected token '<'
    at eval (client-handler.js:15:1)
    at Generator.next (<anonymous>)
    at eval (client-handler.js:7:1)
    at new Promise (<anonymous>)
    at __awaiter (client-handler.js:3:1)
    at evalClientHandler (client-handler.js:12:1)
    at eval (client-handler.js:266:49)
    at Generator.next (<anonymous>)
    at eval (client-handler.js:7:1)
    at new Promise (<anonymous>)
    at __awaiter (client-handler.js:3:1)
    at evalClientHandler (client-handler.js:265:1)
    at CytoEditor._e (editor.js:252:26)
    at commitHookEffectListMount (react-dom.development.js:23145:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24921:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24886:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24873:7)
    at commitPassiveMountEffects (react-dom.development.js:24861:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27034:3)
    at flushPassiveEffects (react-dom.development.js:26979:14)
    at performSyncWorkOnRoot (react-dom.development.js:26071:3)
    at flushSyncCallbacks (react-dom.development.js:12042:22)
    at commitRootImpl (react-dom.development.js:26954:3)
    at commitRoot (react-dom.development.js:26677:5)
    at finishConcurrentRender (react-dom.development.js:25976:9)
    at performConcurrentWorkOnRoot (react-dom.development.js:25804:7)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)

How is this possble? The same code cause different error in two deeps

FreePhoenix888 · 2024-02-16T06:21:05Z

@Konard any updates on this?

FreePhoenix888 · 2024-02-16T06:22:48Z

The same happening to another module I have used before for deep-memo:

IGNORED ERROR: Call to DeepClient.resolveDependency is failed with Error: Module not found: Can't resolve @pbe/react-yandex-maps

Konard · 2024-03-23T19:15:13Z

@FreePhoenix888 did you able to solve this issue? If not, then what exactly left to fix?

FreePhoenix888 · 2024-03-24T05:54:36Z

@FreePhoenix888 did you able to solve this issue? If not, then what exactly left to fix?

I should recheck it lates with exactly the same packages here

FreePhoenix888 added bug Something isn't working question Further information is requested labels Jan 31, 2024

Konard mentioned this issue Sep 4, 2024

How to add dependency to client handler? link-foundation/deepcase#14

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to add dependency to client handler? #60

How to add dependency to client handler? #60

FreePhoenix888 commented Jan 31, 2024

Konard commented Jan 31, 2024 •

edited

Loading

FreePhoenix888 commented Feb 2, 2024 •

edited

Loading

Konard commented Feb 2, 2024 •

edited

Loading

FreePhoenix888 commented Feb 2, 2024 •

edited

Loading

FreePhoenix888 commented Feb 2, 2024

FreePhoenix888 commented Feb 16, 2024

FreePhoenix888 commented Feb 16, 2024

Konard commented Mar 23, 2024

FreePhoenix888 commented Mar 24, 2024

How to add dependency to client handler? #60

How to add dependency to client handler? #60

Comments

FreePhoenix888 commented Jan 31, 2024

Konard commented Jan 31, 2024 • edited Loading

FreePhoenix888 commented Feb 2, 2024 • edited Loading

The changes I have made to deepcase:

Working Client Handler Code (Without importing the library, with Importing other libraries by using require)

Not Working Client Handler Code (Importing the library by using require)

Errors

Working Client Handler Code (Importing other libraries by using await deep.import)

Not Working Client Handler Code (Importing the library by using await deep.import)

Errors:

Konard commented Feb 2, 2024 • edited Loading

FreePhoenix888 commented Feb 2, 2024 • edited Loading

FreePhoenix888 commented Feb 2, 2024

FreePhoenix888 commented Feb 16, 2024

FreePhoenix888 commented Feb 16, 2024

Konard commented Mar 23, 2024

FreePhoenix888 commented Mar 24, 2024

Konard commented Jan 31, 2024 •

edited

Loading

FreePhoenix888 commented Feb 2, 2024 •

edited

Loading

Konard commented Feb 2, 2024 •

edited

Loading

FreePhoenix888 commented Feb 2, 2024 •

edited

Loading