由于“找不到模块'环境'。 TS2307”，craco 导致纱线构建失败

Question

I installed and configured craco following the official README and the medium article "My Awesome Custom React Environment Variables Setup" .我按照官方 README和中篇文章“My Awesome Custom React Environment Variables Setup”安装并配置了 craco。 I did我做了

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

And created the necessary files并创建了必要的文件

public/index.html : 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 : src/App.tsx ：

import React from "react"

class App extends React.Component {

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

export { App };

src/index.tsx : src/index.tsx ：

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

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

and added并添加

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

to package.json .到package.json 。

So far, so boilerplate.到目前为止，样板。 The app starts with yarn start and displays "Hello world!".该应用程序以yarn start并显示“Hello world！”。

Now, I'm configuring craco by creating src/environments/development.ts with现在，我通过创建src/environments/development.ts来配置 craco

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

and src/environments/production.ts with和src/environments/production.ts

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

as well as craco.config.js with content以及带有内容的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)
      }
    },
  };
};

and installing craco with yarn add @craco/craco --dev and cross-env with yarn add cross-env .并使用yarn add @craco/craco --dev安装craco并使用 yarn add cross- cross-env安装yarn add cross-env 。

Now, if I want to use the environment reference to access environment.someKey for example in App I need to add import environment from "environment";现在，如果我想使用环境引用来访问environment.someKey例如在App中，我需要import environment from "environment"; in src/App.tsx , but that causes yarn build and yarn start to fail due to在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.

How can I use this created setup?如何使用这个创建的设置？

I'm providing a SSCCE at https://gitlab.com/krichter-sscce/craco-getting-started which contains no additional information, but allows to reproduce the problem much easier.我在https://gitlab.com/krichter-sscce/craco-getting-started提供了一个 SSCCE，其中不包含其他信息，但可以更轻松地重现问题。

Answer 1

After adding @craco/craco the package.json scripts need to be updated to添加@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

The medium article ( My Awesome Custom React Environment Variables Setup ) you followed have some steps missing您遵循的中篇文章（ My Awesome Custom React Environment Variables Setup ）缺少一些步骤

Apart from steps mentioned in the article, you have to follow below steps.除了文章中提到的步骤外，您还必须遵循以下步骤。

Create an environment.d.ts file in your project inside src folder.在 src 文件夹内的项目中创建一个 environment.d.ts 文件。
Declare the environment module, by pasting below code in newly created file通过在新创建的文件中粘贴以下代码来声明环境模块
```
declare module "environment" { import baseEnv from "environments/base"; const value: ReturnType<typeof baseEnv>; export default value; }
```
Go to tsconfig.json file转到 tsconfig.json 文件
Paste the below code snippet under compilerOptions object将下面的代码片段粘贴到 compilerOptions 对象下
"paths": { "environments": ["environments"] } “路径”：{“环境”：[“环境”]}

And That's all.就这样。 Now re-run your server!!!!现在重新运行您的服务器！！！！

For working example you can refer the repo provided in the same medium article .对于工作示例，您可以参考同一媒体文章中提供的 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