小编Cha*_*wis的帖子

我正在探索使用 React 和 rollup 制作一个组件库。我发现正在使用该库的应用程序以错误的顺序捆绑它。

这导致以下错误：

bundle.js:99 Uncaught Error: Cannot find module 'react/jsx-runtime'
    at webpackMissingModule (bundle.js:99)
    at Module.../../../component-library/dist/index.es.js 

在 Webpack CLI 中我也遇到类似的错误：

ERROR in /.../component-library/dist/index.es.js
Module not found: Error: Can't resolve 'react' in '/.../component-library/dist'
 @ /.../component-library/dist/index.es.js 2:0-33 68:18-26
 @ ./src/App/index.jsx
 @ ./src/index.js

ERROR in /.../component-library/dist/index.es.js
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/.../component-library/dist'
 @ /...component-library/dist/index.es.js 1:0-41 74:22-26
 @ ./src/App/index.jsx
 @ ./src/index.js

我还没有在任何地方发布该库，所以yarn link现在只是使用。

在我的组件库中，我的汇总配置如下所示：

bundle.js:99 Uncaught Error: Cannot find module 'react/jsx-runtime'
    at webpackMissingModule (bundle.js:99)
    at Module.../../../component-library/dist/index.es.js 

我的巴贝尔配置 …

我试图在python中进行基本的颜色转换,但我似乎无法通过以下错误.我已经重新安装了python,opencv,并尝试了python 3.4.3(最新)和python 2.7(在我的Mac上).

我使用python的包管理器opencv-python安装了opencv.

这是失败的代码:

frame = cv2.imread('frames/frame%d.tiff' % count)
frame_HSV= cv2.cvtColor(frame,cv2.COLOR_RGB2HSV)

这是错误消息:

cv2.error: OpenCV(3.4.3) /Users/travis/build/skvark/opencv-python/opencv/modules/imgproc/src/color.cpp:181: error: (-215:Assertion failed) !_src.empty() in function 'cvtColor'

我使用 Auth0 作为使用 React 的 SPA 的身份验证提供程序。我遵循了他们博客中的Auth0 react 教程和这个更详细的教程。

我目前只使用电子邮件/密码身份验证。并且身份验证按预期进行登录/注销，检索用户信息等。

但是，当我刷新页面时，isAuthenticated来自的值useAuth0总是返回 false。即使在isLoading解析为 true 之后，我也必须再次登录。

奇怪的是，这种行为不会在 Chrome 或 Firefox 上发生。它在 Brave 和 Safari 上失败。

我在 Auth0（另一个有类似问题的人）的论坛帖子中注意到，Auth0Provider应该authorize使用 拨打电话prompte=none，确实如此。它还202在页面加载后不久返回成功（但不会更改isAuthenticated为true）。此调用还设置了一个 cookie auth0.is.authenticated=true。

authorize?client_id=VALUE&redirect_uri=VALUE&scope=openid%20profile%20email&response_type=code&response_mode=web_message&state=VALUE&nonce=VALUE&code_challenge=VALUE&code_challenge_method=S256&prompt=none&auth0Client=VALUE

这是我检查身份验证状态的路线。该组件Auth0ProviderWithHistory按照 Auth0 教程中的建议封装在代码中。

export default function Routes() {
  const { isLoading, isAuthenticated } = useAuth0()

  const getDashboard = () => {
    //determine which dashboard to return …

我是React-Testing-Library / Jest的新手，它试图编写测试以查看路由导航（使用react-router-dom）是否正确执行。到目前为止，我一直在关注README和本教程的用法。

我的组件之一在局部函数中使用了scrollIntoView，这导致测试失败。

TypeError: this.messagesEnd.scrollIntoView is not a function

  45 |
  46 |     scrollToBottom = () => {
> 47 |         this.messagesEnd.scrollIntoView({ behavior: "smooth" });
     |                          ^
  48 |     }
  49 |
  50 | 

这是我的chatbot组件中的功能：

componentDidUpdate() {
    this.scrollToBottom();
}

scrollToBottom = () => {
    this.messagesEnd.scrollIntoView({ behavior: "smooth" });
}

这是测试失败的示例：

test('<App> default screen', () => {

    const { getByTestId, getByText } = renderWithRouter(<App />)

    expect(getByTestId('index'))

    const leftClick = {button: 0}
    fireEvent.click(getByText('View Chatbot'), leftClick) <-- test …

我是打字稿的新手，注意到了我没想到的行为。当我使用js-cookie包模拟命名导入时，它模拟了该属性的特定实例，但错误地选择了要使用的正确类型。

import Cookies from "js-cookie"
import { mocked } from "ts-jest/utils"

jest.mock("js-cookie")
const mockedCookies = mocked(Cookies, true)

beforeEach(() => {
  mockedCookies.get = jest.fn().mockImplementation(() => "123")
})

it("SampleTest", () => {
  //this line throws an error as it is using a difference interface to check against
  mockedCookies.get.mockImplementationOnce(() => undefined)
  //continue test...
}

在@types/js-cookies有此两种定义，它总是使用get()时，我引用它的版本mockCookie.get.<some-jest-function>。因此，我收到打字稿错误说Type 'undefined' is not assignable to type '{ [key: string]: string; }'..

/**
* Read cookie
*/
get(name: string): …

我是 HTML5 画布的新手，希望让一些圆圈沿随机方向移动，以在我的网站上获得奇特的效果。

我注意到当这些圆圈移动时，CPU 使用率非常高。当只有几个圆圈在移动时，通常是可以的，但是当大约有 5 个或更多圆圈时，它就会开始出现问题。

这是在 Safari 中用 5 个圆圈分析几秒钟的屏幕截图。

这是我迄今为止为我的 Circle 组件编写的代码：

export default function Circle({ color = null }) {
  useEffect(() => {
    if (!color) return

    let requestId = null
    let canvas = ref.current
    let context = canvas.getContext("2d")

    let ratio = getPixelRatio(context)
    let canvasWidth = getComputedStyle(canvas).getPropertyValue("width").slice(0, -2)
    let canvasHeight = getComputedStyle(canvas).getPropertyValue("height").slice(0, -2)

    canvas.width = canvasWidth * ratio
    canvas.height = canvasHeight * ratio
    canvas.style.width = "100%"
    canvas.style.height = "100%"

    let y = random(0, canvas.height)
    let x = …

我是在 React 中测试 redux 连接组件并试图弄清楚如何测试它们的新手。

目前我正在使用 react-testing-library 并且在设置我的 renderWithRedux 函数以正确设置 redux 时遇到问题。

这是一个示例组件：

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Sample extends Component {

    constructor(props) {
        super(props);
        this.state = {
           ...
        }
    }

    componentDidMount() {
        //do stuff
        console.log(this.props)
    }


    render() {

        const { user } = this.props

        return(
            <div className="sample">
                {user.name}
            </div>
        )

    }

}

const mapStateToProps = state => ({
    user: state.user
})

export default connect(mapStateToProps, {})(Sample);

这是一个示例测试：

import React from 'react'; …

我正在使用 NextJS 来生成 SSR 页面，并且这些页面是特定于语言的。我想设置 lang 属性来声明文本的语言。

到目前为止我有：

import Document, { Html, Head, Main, NextScript } from "next/document"
import Router from "next/router"

class MyDocument extends Document {
  render() {
    const { lanaguage } = Router.router.query
    return (
      <Html lang={language}>
        <Head />
        <body className="antialiased text-white text-base font-sans">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

但是，在使用自定义文档 ( ) 时Router.router始终为。使用自定义文档时是否有另一种方法来获取 URL 参数/查询？null_document.js

我正在尝试在 Ubuntu 18.10 上使用 create-react-app 创建一个新的 ReactJS 应用程序。当我运行时，create-react-app myapp我收到以下注释：

注意：该项目是使用不受支持的旧版本工具启动的。请更新到 Node >=6 和 npm >=3 以在新项目中获取支持的工具。

但是当我检查我的节点版本时，node -v我得到 v10.13.0 并检查 npmnpm -v显示 6.4.1。create-react-app --version显示 2.1.1。所以我的 Node 版本和 npm 版本都大于指定的版本。

我不知道该怎么办，因为我的版本已经高于指定的版本。对于如何解决这个问题，有任何的建议吗？

我目前正在构建两个 React 应用程序，它们都在本地存储中存储了 redux 状态。

下面的示例域会共享相同的本地存储吗？

1. www.website.com
2. admin.website..com

由于应用程序的性质，我不希望共享它们的本地存储，并希望这是默认行为。