小编ant*_*elm的帖子

刚刚遇到这个错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: nexttwin@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from react-hook-mousetrap@2.0.4
npm ERR! node_modules/react-hook-mousetrap
npm ERR!   react-hook-mousetrap@"*" from the root project
npm ERR! 

我尝试安装的模块似乎与我安装的模块具有不同的对等依赖项。似乎 npm 在这方面改变了它的行为，现在让安装失败。

我现在能做些什么来解决这个问题？我不想为此降级我的 React 版本。

我知道有一个标志被调用，--legacy-peer-deps但我不确定这到底是做什么的，是否建议使用它/潜在的缺点是什么？我认为 npm 确实让安装失败是有原因的。

这很奇怪，因为我yarn直到最近才用完，一切都很好。

我有一个正在使用的项目yarn。yarn我已经使用、 I runyarn dev等安装了所有软件包。现在我正在遵循一个教程，该教程要求我使用它npx来设置包。- 我想知道我是否可以继续这样做，或者我是否最终会在这里混合一些东西，因为npx据我所知，与 相关npm？

我有点困惑。我认为remark是一个markdown处理器，rehype是一个html处理器。因此，remark 需要一些 markdown，对其进行转换，然后返回一些 markdown。Rehype 获取一些 html，对其进行转换，然后返回一些 html - 这是正确的吗？

例如：我遇到了软件包remark-slug和rehype-slug，它们似乎做基本上相同的事情\xe2\x80\x94 两者之间有什么区别？

我在 next.js 中使用 mdx-bundler （它使用 esbuild + node-gyp）。我已经在这个项目上工作了一段时间，一切都很顺利。现在，我的合作伙伴刚刚克隆了该存储库并尝试使其正常工作，但她得到：

../../node_modules/esbuild/lib/main.d.ts
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export type Platform = 'browser' | 'node' | 'neutral';
| export type Format = 'iife' | 'cjs' | 'esm';
| export type Loader = 'js' | 'jsx' | 'ts' | 'tsx' | 'css' | 'json' | 'text' | 'base64' | 'file' | …

初学者，但发现这很棘手。因此，我们将不胜感激！

我想让用户过滤一些选项。这些过滤器应该反映在 URL 中。例如：http://localhost:3000/items?counter=1

现在，当用户访问时，http://localhost:3000/items?counter=2我希望将其反映在状态中并将其放入状态中。如果同一用户随后以某种方式更改状态，我希望将其反映在 url 中。我确实知道如何做这两件事。

但我觉得我在这里陷入了无限循环：

    useEffect(() => {
        router.push(`/items?counter=${counter}`, undefined, { shallow: true })
    }, [counter])

    useEffect(() => {
        setCounter(parseInt(router.query.counter))
    }, [router.query.counter])

我如何最好地从查询参数中获取状态，同时在每次状态更改时始终浅层更新查询参数？

我正在使用 Prisma 和 PostgreSQL。我在这里抓一些东西：

await prisma.items.findMany({
        where: { itemId: itemId },
        include: {
            modules: {
                include: {
                    lessons: true
                }
            }
        }
    });

我不需要订购它们items自己，但我想订购我拿回来的modules& 。lessons两者都有一个 INT 属性（称为：），number我可以在其上执行排序，但我不知道如何使用 prisma / postgresql 执行此操作，或者即使这是可能的。

有任何想法吗？

我正在尝试将日历嵌入到我的 nextjs 项目中。

但不确定如何去做。理想情况下，我只是将其嵌入到单个页面上（而不是嵌入到_appor中_document）

这是我到目前为止所得到的：

import Script from 'next/script';
import React from 'react';

const Page = () => {
    Calendly.initInlineWidget({
        url: 'https://calendly.com/mycalendlyaccount/30min?month=2022-05'
    });

    return (
        <div>
            <Script src="https://assets.calendly.com/assets/external/widget.js" />

            <div
                className="calendly-inline-widget"
                style="min-width:320px;height:580px;"
                data-auto-load="false"></div>
        </div>
    );
};

export default Page;

这显然是行不通的。我真的不知道该放在哪里：

    Calendly.initInlineWidget({
        url: 'https://calendly.com/mycalendlyaccount/30min?month=2022-05'
    });

我发现他们在我上面链接的网站上的示例在这方面非常没有帮助。有人可以给我提示吗？

我不确定如何使用 trpc 进行乐观更新？这是“内置的”还是我必须使用react-query的useQuery钩子？

到目前为止，我正在尝试这样做，但它不起作用：

 const queryClient = useQueryClient();

    const updateWord = trpc.word.update.useMutation({
        onMutate: async newTodo => {
            // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
            await queryClient.cancelQueries({ queryKey: ['text', 'getOne'] })

            // Snapshot the previous value
            const previousText = queryClient.getQueryData(['text', 'getOne'])

            // Optimistically update to the new value
            queryClient.setQueryData(['text', 'getOne'], old => old ? {...old, { title: "Hello" }} : undefined)

            // Return a context object with the snapshotted value
            return { previousText }
        },
//... …

初学者在这里。正在尝试 Next.js，但我正在努力解决以下问题。只是尝试react-hook-mousetrap像往常一样安装和导入它：

import useMousetrap from "react-hook-mousetrap";

这给了我以下错误：

SyntaxError: Cannot use import statement outside a module
1 > module.exports = require("react-hook-mousetrap");

我不确定这是什么意思？然后我认为这可能是 nextjs 的 SSR 的问题，因为我的库启用了热键并且会使用一些浏览器 API。如果您已经知道我在这里走错了路，您现在可以停止阅读。

然而，我接下来做的是：我尝试了动态导入：

1. 动态导入 next/dynamic

我遇到的第一件事是next/dynamic，但这似乎仅适用于 JSX/React 组件（如果我错了，请纠正我）。在这里，我将导入和使用React hook。

2. 使用 await (...).default 动态导入

所以我尝试将它作为模块动态导入，但我不确定如何准确地做到这一点：

我需要在组件的顶层使用我的钩子，无法使该组件异步，现在不知道该怎么做？

const MyComponent = () => {  
    
 // (1) TRIED THIS:
 const useMousetrap = await import("react-hook-mousetrap").default;
 //can't use the hook here since my Component is not async; Can't make the Component async, …

我发现了一些处理 PHP 和此代码示例的旧答案，但我不确定这现在是否已经过时，因为存储库已存档，而且我知道 PayPal 通常转向仅使用 REST API 的方法。

如果有人可以在这里提供有关最新建议是什么以及 2015 年的代码现在是否已过时的更新，我会很高兴。

/* Copyright 2015-2016 PayPal, Inc. */
"use strict";

var paypal = require('../../../');
require('../../configure');

// Sends the webhook event data to PayPal to verify the webhook event signature is correct and 
// the event data came from PayPal.

// Note this sample is only for illustrative purposes. You must have a valid webhook configured with your
// client ID and secret. This sample may not work due to …