由於“找不到模塊'環境'。 TS2307”，craco 導致紗線構建失敗

Question

我按照官方 README和中篇文章“My Awesome Custom React Environment Variables Setup”安裝並配置了 craco。 我做了

sudo yarn global upgrade create-react-app
create-react-app craco-getting-started
yarn add react-scripts typescript @types/react @types/react-dom

並創建了必要的文件

public/index.html ：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Craco getting started</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/App.tsx ：

import React from "react"

class App extends React.Component {

  render() {
    return <div>Hello world!</div>
  }
}

export { App };

src/index.tsx ：

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";

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

並添加

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

到package.json 。

到目前為止，樣板。 該應用程序以yarn start並顯示“Hello world！”。

現在，我通過創建src/environments/development.ts來配置 craco

export default {
  isProduction: false,
  name: "development"
};

和src/environments/production.ts

export default {
  isProduction: true,
  name: "production"
};

以及帶有內容的craco.config.js

const path = require('path');

module.exports = function({ env, paths }) {
  return {
    webpack: {
      alias: {
        environment: path.join(__dirname, 'src', 'environments', process.env.CLIENT_ENV)
      }
    },
  };
};

並使用yarn add @craco/craco --dev安裝craco並使用 yarn add cross- cross-env安裝yarn add cross-env 。

現在，如果我想使用環境引用來訪問environment.someKey例如在App中，我需要import environment from "environment"; 在src/App.tsx中，但這會導致yarn build和yarn start失敗，因為

> yarn build
yarn run v1.21.1
$ cross-env CLIENT_ENV=production craco build
Creating an optimized production build...
Failed to compile.

/mnt/data/home/examples/craco/craco-getting-started/src/App.tsx
TypeScript error in /mnt/data/home/examples/craco/craco-getting-started/src/App.tsx(2,25):
Cannot find module 'environment'.  TS2307

    1 | import React from "react"
  > 2 | import environment from "environment";
      |                         ^
    3 | 
    4 | class App extends React.Component {
    5 | 


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

如何使用這個創建的設置？

我在https://gitlab.com/krichter-sscce/craco-getting-started提供了一個 SSCCE，其中不包含其他信息，但可以更輕松地重現問題。

Answer 1

添加@craco/craco后，需要將package.json腳本更新為

 "scripts": {
    "start": "CLIENT_ENV=development craco start",
    "build": "CLIENT_ENV=production craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Answer 2

您遵循的中篇文章（ My Awesome Custom React Environment Variables Setup ）缺少一些步驟

除了文章中提到的步驟外，您還必須遵循以下步驟。

在 src 文件夾內的項目中創建一個 environment.d.ts 文件。

通過在新創建的文件中粘貼以下代碼來聲明環境模塊

declare module "environment" { import baseEnv from "environments/base"; const value: ReturnType<typeof baseEnv>; export default value; }

轉到 tsconfig.json 文件
將下面的代碼片段粘貼到 compilerOptions 對象下
“路徑”：{“環境”：[“環境”]}

就這樣。 現在重新運行您的服務器！！！！

對於工作示例，您可以參考同一媒體文章中提供的 repo 。

由於“找不到模塊'環境'。 TS2307”，craco 導致紗線構建失敗

問題描述

2 個解決方案

解決方案1
0 2020-01-22 20:21:22

解決方案2
0 2022-06-30 12:15:32

由於“找不到模塊&#39;環境&#39;。 TS2307”，craco 導致紗線構建失敗

問題描述

2 個解決方案

解決方案1 0 2020-01-22 20:21:22

解決方案2 0 2022-06-30 12:15:32

由於“找不到模塊'環境'。 TS2307”，craco 導致紗線構建失敗

解決方案1
0 2020-01-22 20:21:22

解決方案2
0 2022-06-30 12:15:32