标签: create-react-app

在我的 Reactjs 应用程序中，我想添加一个拦截器，它可以将一些标头附加到某些后端响应中

所以，我尝试了这个：

    export default function App() {
      axios.interceptors.response.use(
        (config)=> {
          config.headers['myheader'] = 'myvalue'; // <-- THIS IS MY CUSTOM HEADERS
          return config;
        },
        (error) => {
          // ON ERREOR
        })
       ......
      );

我想我的标头将附加在每个后端响应中。但这似乎不起作用。

建议？？

我正在为客户开发一个新项目，并被要求将 create-react-app (react-scripts) 从 v.2.0.5 更新到 v.4.0.3。我这样做了，但一堆单元测试失败了。我回顾了该项目，并将重大更改隔离为从 React-scripts 3.4.4 到 4.0.0 的更新。

基本上，我看到的主要错误似乎适用于针对 async/await 方法运行的任何测试。Jest 报告测试超时，但这些测试只是因为失败而超时。它们都在早期版本的react-scripts（以及我猜的早期版本的Jest）上顺利通过。

thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

超时似乎与承诺问题有关，因为它之前出现了以下错误：

TypeError: Cannot read property 'then' of undefined

还有一个相当难以辨认的堆栈跟踪，其中列出了节点模块的负载。

这是失败的测试的示例：

 test('dispatching fetchPublishedArticlesAuthors action causes an API GET and updates the store', async (done) => {

    const options = { page: 0, size: 20, sort: 'createdBy.firstName,asc' };

    store.dispatch(fetchPublishedArticlesAuthors(options));

    const state = await stateChange(store); …

我有一个反应/打字稿项目。我正在使用 redux 来管理状态。

//store.ts
import { configureStore, combineReducers } from '@reduxjs/toolkit';
import { userReducer } from './user';

const RootReducer = combineReducers({
  user: userReducer
})

export const store = configureStore({
  reducer: RootReducer,
  devTools: true,
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

我还有一个 userSlice.ts 文件：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { signIn, signUp } from './../../services/api';
import type { UserCredential, UserInitialState } from './types';

const initialState: UserInitialState = {
  accessToken: null,
  status: 'init', …

我正在尝试在 React/Typescript 项目上实现一个简单的 ApexChart，但是，我遇到了以下类型错误：

没有重载与此调用匹配。
  重载第 1 个（共 2 个）“(props: Props | Readonly): ReactApexChart”，出现以下错误。
    类型 '{ 图表：{ 高度：ApexOptions; 类型：ApexOptions；缩放：{启用：ApexOptions; }; }; }' 不可分配给类型“ApexOptions”。
      “chart.height”的类型在这些类型之间不兼容。
        类型“ApexOptions”不可分配给类型“string |” 数量 | 不明确的'。
          类型“ApexOptions”不可分配给类型“number”。
  重载 2 个（共 2 个）“(props: Props, context: any): ReactApexChart”，出现以下错误。
    类型 '{ 图表：{ 高度：ApexOptions; 类型：ApexOptions；缩放：{启用：ApexOptions; }; }; }' 不可分配给类型“ApexOptions”。

我确实像往常一样安装了react-apexcharts和apexcharts。这是我的图表的脚本：

任务图表.tsx

import ReactApexChart from 'react-apexcharts';

const TasksChart: React.FC<Props> = ({
tasks,
}) => {

  const options = {
    chart: {
      height: 350,
      type: 'line',
      zoom: {
        enabled: …

当运行安装了react-bootstrap的create-react-app应用程序时，我在尝试添加按钮时收到下面的错误

我的导入是这样的：

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import PropTypes from "prop-types";
import { Button } from "bootstrap";
import { PureComponent } from "react";

和渲染代码：

  render() {
    return (
      <div className="App">
        <header />
        <Button>Test</Button>
        ...

我研究了许多其他有关 Babel、Webpack 和编译器配置的问题。但我在 create-react-app 中没有看到所有这些配置。

最新版本create-react-app是4.0.3，但当我运行时npx create-react-app my-app它使用版本 1.5.2 并且也不使用模板运行。我没有任何全局安装，并尝试使用 卸载它npm uninstall -g create-react-app。

我的npm版本是7.21.1，node版本是16.9.1

我怎样才能让它发挥作用？请帮忙。

编辑：创建应用程序时有 58 个漏洞，这出现在最后 -

A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.
You can fix this by running npm uninstall -g create-react-app or yarn global remove create-react-app before using create-react-app again.

该文件夹也没有src文件夹，只有node_modules文件夹和package.json文件。

跑步时npm audit fix …

当查看情感文档时，将其添加到react+typescript项目中似乎非常简单。但是，我按照Typescript 说明将其添加到新的 create-react-app 项目中：https://github.com/testerez/cra-ts-emotion/commit/086cc35cda04a1bb72917ccd3a5b79e81e8be1d9

css但是当我尝试以任何方式使用prop 时：

    <div>
  <div css={{ color: "red" }}>Hello!</div>
  <div css={css({ color: "red" })}>Hello!</div>
  <div
    css={css`
      color: red;
    `}
  >
    Hello!
  </div>
</div>

这是我得到的结果：

<div>
  <div css="[object Object]">Hello!</div>
  <div
    css="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."
  >
    Hello!
  </div>
  <div …

我运行了 create-react-app。

不做任何更改并运行测试。

测试立即失败。

错误：无法初始化监视插件“node_modules/jest-watch-typeahead/filename.js”：

\xe2\x97\x8f 测试套件运行失败

file:///C:/_Projects/my-app/node_modules/jest-watch-typeahead/build/file_name_plugin/prompt.js:4\nimport { PatternPrompt, printPatternCaret, printRestoredPatternCaret } from 'jest-watcher';\n         ^^^^^^^^^^^^^\nSyntaxError: The requested module 'jest-watcher' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.\nFor example:\nimport pkg from 'jest-watcher';\nconst { PatternPrompt, printPatternCaret, printRestoredPatternCaret } = pkg;\n\n  at async requireOrImportModule (node_modules/jest-util/build/requireOrImportModule.js:65:32)\n  at async watch (node_modules/@jest/core/build/watch.js:337:34)\n  at async _run10000 (node_modules/@jest/core/build/cli/index.js:311:7)\n

到底是什么？

有人可以帮忙吗？

我不知道如何解决从 CRA 迁移到 vite 时出现的错误。

> vite build\n\nvite v2.9.13 building for production...\n\xe2\x9c\x93 3811 modules transformed.\n[vite:css] Inline JavaScript is not enabled. Is it set in your options?\nfile: /Users/nikos/WebstormProjects/web/node_modules/.pnpm/antd@4.21.4_react-dom@17.0.2+react@17.0.2/node_modules/antd/es/date-picker/style/index.less:110:0\nerror during build:\nError: Inline JavaScript is not enabled. Is it set in your options?\n    at less (/Users/nikos/WebstormProjects/web/node_modules/.pnpm/vite@2.9.13_less@4.1.3+sass@1.53.0/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:38106:33)\n    at async compileCSS (/Users/nikos/WebstormProjects/...\n

如果我将其添加到 Vite 配置中

  less: {\n    javascriptEnabled: true,\n  },\n

它变为

file: /Users/nikos/WebstormProjects/web/node_modules/.pnpm/antd@4.21.4_react-dom@17.0.2+react@17.0.2/node_modules/antd/es/tag/style/index.less:110:0\n其中包含：

我刚刚使用创建了一个 React 项目create-react-app，设置后出现了此错误：

Failed to compile.

Module not found: Error: Can't resolve 'App' in 'C:\Development_Projects\international-school-fe\src'
ERROR in ./src/index.tsx 4:0-22
Module not found: Error: Can't resolve 'App' in 'C:\Development_Projects\international-school-fe\src'

webpack compiled with 1 error

这是我的jsconfig.json：

{
  "compilerOptions": {
    "baseUrl": "src",
    "checkJs": true,
    "jsx": "react"
  },
  "include": ["src"]
}

index.tsx：

import App from "App";
import "common/styles/spacing/margin/index.css";
import "common/styles/spacing/padding/index.css";
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

我想知道我做错了什么，我想设置在src …