标签: react-scripts

在默认的基于 TypeScript 的create-react-app项目中，在构建项目时只显示第一个 TS 错误，react-scripts但在运行时会显示所有错误tsc。

项目初始化为create-react-app foo --typescript，仅src/index.tsx在初始化后修改：

源代码/索引.tsx 源代码 /索引.tsx

console.log(typeof nonExistentVar);
    console.log(typeof nonExistentVar);
console.log(typeof nonExistentVar2);
    console.log(typeof nonExistentVar2);
export {};

包.json

export {};
{


  "name": "foo",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@types/jest": "24.0.15",

    "@types/node": "12.6.8",

    "@types/react": "16.8.23",

    "@types/react-dom": "16.8.5",

    "react": "^16.8.6",

    "react-dom": "^16.8.6",

    "react-scripts": "3.0.1",

    "typescript": "3.5.3"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

  "browserslist": {

    "production": [

      ">0.2%", …

我有一个主要的反应应用程序，其中基于选定的服务，我正在将另一个反应应用程序动态加载到第二个根。我正在加载的第二个应用程序使用下面的 webpack.config 捆绑...

const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/bundle.min.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

然后通过下面我的 package.json 中修改后的 npm run build 命令在构建过程中调用它。

"build": "npm run build-sass npm run build:react && npm run build:bundle",
"build:react": "react-scripts build",
"build:bundle": "webpack --config webpack.config.js",
"build-sass": "node-sass --precision=5 --indent-type=space --output-style=nested --indent-width=2 src/styles/Site.scss …

I'm facing a compilation issue, that I've managed to work-around somehow, but I'd like to understand where exactly is the problem coming from. Here is the issue:

I'm using react-create-app project to bootstrap a React project and I get the following error, at compilation time, with react-scripts (v3.1.1), when running react-scripts start:

Failed to compile.

./src/reducers/test.js
TypeError: Cannot read property 'name' of null
    at Array.filter (<anonymous>)

The error occurs on the test.js file:

const initialArray = ['value1'];

export default …

我的 package.json 包含

    "scripts": {
        "test": "CI=true react-scripts test --env=jsdom"
       }

如果我将代码重写为有什么区别

    "scripts": {
      "test": "react-scripts test --env=jsdom CI=true"
    }

构建时单元测试会失败吗？

react-scripts使用所有底层包（react@17、typescript@4.1 和 eslint@7.14）从 3更新到 4.0.1，现在它Failed to compile.在控制台中显示了大量prettier问题，比如它们是错误。以前运行良好，只显示 Eslint 警告。此外，如果我在 watch 下点击保存任何干净的文件，它会重新编译正常（但同样，用于显示 Eslint 警告，我想在那里看到）。浏览了他们的文档并没有找到配置此行为的方法，可以吗？

我正在处理一个仓库，其中包含许多由创建的Node包create-react-app，所有这些包均由CI系统构建和测试。目前，每个软件包的构建/测试（react-scripts build均由+ 完成react-scripts test --silent）目前会产生二十多行输出，从而生成包含一百多行材料的构建日志，例如“ gzip之后的文件大小”和“在此处了解更多有关部署的信息”。这使得在该日志中查看错误消息，警告或其他问题更加困难。

除了为每个软件包编写自己的自定义构建脚本（可能还包括测试脚本）之外，我是否可以通过某种方式来解决这个问题？如果我确实需要自定义脚本，那么，尽可能多地重用正在进行构建和测试的现有代码的最佳方法是什么？

我一直在使用create-react-app引导反应应用程序。但我今天面临一个非常奇怪的问题。使用create-react-app. 我运行后面临以下问题npm start

rbac-tutorial-app/node_modules/@hapi/joi/lib/types/object/index.js:254
                        !pattern.schema._validate(key, state, { ...options, abortEarly:true }).errors) {
                                                                ^^^

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (rbac-tutorial-app/node_modules/@hapi/joi/lib/types/func/index.js:5:20)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rbac-tutorial-app@0.1.0 …

jsconfig.json我的反应应用程序的根目录中有以下内容：

{
    "compilerOptions": {
      "baseUrl": "./src",
      "paths": {
        "rmv": ["components/rmv/*"]
      }
    }
  }

并且文件夹helper.jsx中有一个文件./src/components/rmv。

但我尝试像这样直接导出它： import Helper from 'rmv/helper' 失败并出现错误：

Failed to compile
Module not found: Can't resolve 'rmv/helper' 

只import Helper from 'components/rmv/helper'有效。为什么？PS：我也尝试过：

"paths": {
        "rmv/*": ["components/rmv/*"]
      }

也不行。

这是最小的可重现示例：github.com/chapkovski/trouble_with_jsconfig

具体来说，这些行： https://github.com/chapkovski/trouble_with_jsconfig/blob/e37c8c216eac0da7c70023f7fba47eea54973176/src/App.js#L4-L5

我使用以下方法创建了一个 TypeScript React 应用程序：

yarn create react-app my-app --template typescript\n

这样，我的项目就用Babel编译，然后由webpack捆绑。现在我想使用 TypeScript命名空间，默认情况下 Babel 不支持它们，但可以启用它们。我\xc2\xa0安装了所有必需的软件包：

\n
• @babel/plugin-transform-typescript
\n
• react-app-rewired
\n
• customize-cra
\n

在package.json我react-scripts start改为react-app-rewired start.

最后，我创建了一个config-overrides.js文件：

const {\n    override,\n    addExternalBabelPlugin\n  } = require("customize-cra");\n\nmodule.exports = override(\n    addExternalBabelPlugin([\n        "@babel/plugin-transform-typescript",\n        { allowNamespaces: true }\n    ])\n);\n

但是，编译仍然会抛出语法错误，就好像没有启用插件一样：

\n

语法错误：/home/m93a/my-app/script.ts：命名空间未标记为仅类型声明。Babel 仅实验性地支持非声明性命名空间。要启用和查看警告，请参阅：https://babeljs.io/docs/en/babel-plugin-transform-typescript

\n

如何正确设置我的项目，以便它甚至可以编译非声明性命名空间？

编辑：我的项目不起作用的原因实际上与我的想法有很大不同。检查我自己的答案以获取更多详细信息。

我对笑话和酶很陌生。在我的项目中，我将使用基于 SPA React 的应用程序。包含数据的上下文提供程序，还有几个钩子。我现在使用 Jest（带有 ts-jest 和酶）

我的 jest.config 看起来像这样

module.exports = {\n  "roots": [\n    "<rootDir>/src"\n  ],\n  "transform": {\n    "^.+\\\\.tsx?$": "ts-jest"\n  },\n  "testRegex": "(/__tests__/.*|(\\\\.|/)(test|spec))\\\\.tsx?$",\n  "moduleFileExtensions": [\n    "ts",\n    "tsx",\n    "js",\n    "jsx",\n    "json",\n    "node"\n  ],\n  "snapshotSerializers": ["enzyme-to-json/serializer"]\n

所以我的第一步是测试 UI 组件是否有效。\n下一步是使用模拟数据测试组件。但我得到了底部描述的错误。

我有一个像这样的功能组件：

export default function CurrentWeather(props: ICurrentWeatherProps) {\n    const [data, Reload] = useCurrentWeather(props.locationID);\n    return (<div>......</div>)\n}\n\n

您会注意到这个useCurrentWeather钩子，这是其代码：

import { useEffect, useState } from 'react';\nimport { useLocationState } from '../context/locationContext';\nimport { ILocationData } from './useLocations';\nimport _ …