Craco вызывает сбой сборки пряжи из-за "Не удается найти модуль 'environment'. TS2307"

Я установил и настроил Craco, следуя официальному README и средней статье "Моя удивительная настройка переменных среды React". я сделал

  • 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!".

Теперь я настраиваю Craco, создавая src/environments/development.ts с

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)
      }
    },
  };
};

и установка craco с yarn add @craco/craco --dev а также 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.

Как я могу использовать созданную настройку?

Я предоставляю SSCCE по адресу https://gitlab.com/krichter-sscce/craco-getting-started, который не содержит дополнительной информации, но позволяет гораздо проще воспроизвести проблему.

Источник

2 ответа

В средней статье (My Awesome Custom React Environment Variables Setup), которой вы следовали, отсутствуют некоторые шаги.

Помимо шагов, упомянутых в статье, вы должны выполнить следующие шаги.

  1. Создайте файл environment.d.ts в своем проекте внутри папки src.

  2. Объявите модуль среды, вставив приведенный ниже код во вновь созданный файл.

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

      export default value;
    }

  3. Перейти к файлу tsconfig.json

  4. Вставьте приведенный ниже фрагмент кода в объектcompileOptions.

    "пути": { "среды": ["среды"] }

И это все. Теперь перезапустите свой сервер!!!!

В качестве рабочего примера вы можете обратиться к репозиторию, указанному в той же статье на носителе .

Источник

После добавления @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"
  },
Источник
Другие вопросы по тегам