Como importar o código typescript compartilhado usando create-react-app (sem ejeção)?

Estou tentando obter o compartilhamento de código TypeScript em um aplicativo criar-reagir no modo não ejetar, mas estou enfrentando a infame restrição de que as importações de fora srcnão são permitidas:

You attempted to import ../../common/src/lib.ts which falls outside of the project src/ directory. [...]

Para o caso não-TypeScript, isso foi perguntado e respondido aqui , mas não consigo fazer nenhuma das soluções funcionar com o TypeScript. Especificamente, os problemas com as soluções propostas são:

• Configuração baseDirem ts-config.json: Aqui, o create-react-app reclama sobre: Seu projeto baseUrlsó pode ser definido como srcou node_modules. O aplicativo Create React não suporta outros valores no momento.

• Abordagens baseadas em react-app-rewired: Mais promissor. Desativar o ModuleScopePluginfaz com que eu ultrapasse o erro "tentativa de importação fora de src", mas o problema agora é que o carregador de arquivos typescript não funciona:

  

  Eu verifiquei que o .tspróprio está bom: Copiar ./srce importar de lá funciona bem.

  Também adicionei uma ../../common/srcpasta à includeslista em ts-config.json.

  Meu palpite é que de alguma forma a configuração do carregador do webpack tem uma regra que impede o carregador do TypeScript de transpilar arquivos que não correspondem aos padrões de caminho esperados. Como isso pode ser corrigido usando react-app-rewired?

• Symlinking sources também não funciona - novamente com o mesmo problema. Provavelmente porque o webpack resolve internamente os links simbólicos e vê o arquivo em um caminho onde as regras normais do carregador não se aplicam.

• Soluções baseadas em ejeção: Eu gostaria de não ejetar por enquanto, mas tentei e basicamente estou encontrando o mesmo problema novamente.

Também encontrei outras perguntas que pareciam relacionadas, mas não responderam ao problema:

• Criar aplicativo React + texto digitado No compartilhamento de código monorepo : Parece basicamente a mesma pergunta, mas não é, porque está pedindo o caso de um aplicativo React ejetado.
• Compartilhamento de código entre projetos usando TypeScript e webpack : também aborda o problema de compartilhamento de código, mas não é específico para criar-reagir-app e não sei se a solução pode ser transferida para criar-reagir-app, porque requer configuração manual do webpack ao controle.

Reutilizar tipificações TypeScript em um repo mono parece ser um padrão bastante razoável. Estou perdendo alguma coisa ou por que o aplicativo criar-reagir está tornando isso tão difícil?

Para reproduzir: Meu código é basicamente 100% do que você obtém

npx create-react-app my-app --template typescript

com uma importação para externa adicionada.

Você pode usar craco (override de configuração de criação-reação-app) para substituir a configuração do webpack (abstraída como parte do CRA) sem ejetar.
Além disso, você pode usar ts-loaderpara fazer referência a código ts não transpilado diretamente em projetos externos (por exemplo, se quiser fazer referência / usar código / lib compartilhado como parte de um mono-repo).

Supondo que seu aplicativo CRA esteja no clientdiretório, a estrutura de seu projeto é assim:

client/
|--src/
|--package.json
shared/
|--package.json
|--(ts files)
package.json

cd client
yarn add -D @craco/craco ts-loader

1. criar um craco.config.jsarquivo no client/diretório (CRA)
2. certifique-se de que craco.config.jstem o seguinte conteúdo

const path = require("path");

module.exports = {
  webpack: {
    configure: webpackConfig => {

      // ts-loader is required to reference external typescript projects/files (non-transpiled)
      webpackConfig.module.rules.push({
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          transpileOnly: true,
          configFile: 'tsconfig.json',
        },
      })
      
      return webpackConfig;
    }
  }
};

1. Substitua os react-scriptscomandos client/package.jsonporcraco

/* client/package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

ATUALIZAÇÃO : Como o react-app-rewired é mantido apenas passivamente e não oferece suporte às versões 2+ do CRA (somos as três versões principais posteriores no momento em que este artigo foi escrito), eu não recomendaria mais essa abordagem.

Depois de mais horas experimentando e lendo sobre os problemas do GitHub, finalmente tenho uma solução de trabalho. Muito obrigado a BirukDmitry que fez esta postagem muito útil no GitHub . Guia passo a passo:

1. Instale o react-app-rewired e customize-cra

    npm i react-app-rewired customize-cra --save-dev
   

2. Configure react-app-rewird com um mínimo config-overrides.jscomo este:

   const { removeModuleScopePlugin, override, babelInclude } = require("customize-cra");
   const path = require("path");
   
   module.exports = override(
     removeModuleScopePlugin(),        // (1)
     babelInclude([
       path.resolve("src"),
       path.resolve("../common/src"),  // (2)
     ])
   );
   

   A configuração (1) é semelhante ao que é necessário para contornar a limitação import-outside-src em geral (consulte a pergunta vinculada ).

   A configuração (2) é crucial para habilitar a babel-transpilação (e, portanto, incluindo a remoção do tipo TS, presumo) para outros caminhos também. É aqui que você deve adicionar os caminhos dos quais deseja importar.

3. Não são necessárias adaptações para tsconfig.json.

4. Importe usando caminhos relativos, por exemplo import * as mymodule from '../../common/src/mymodule',.

pergunta onde ../../common/src/mymodulemora? é outro projeto? Se for outro projeto, por que você não os vincula

• dentro do projeto de código comum executado npm link

• dentro do projeto que usará o código comum: npm link common-project

Se não houver dois projetos diferentes. por que tem que estar fora do src?

O link que você postou A restrição de importação criar-reagir-app fora do diretório src e seu caso / problema são duas coisas totalmente diferentes, além de serem muito difíceis. deixe-me dar uma ideia desse problema e do seu.

Como já sabemos, o CRA cria um app de página única do SPA. o que significa que existe apenas um único arquivo html. tudo acontece no index.htmlqual está localizado <project>/public/index.html. Se compilarmos o código, notaremos algo que o pacote final pode se parecer com isso

build
--static
----js
----css
----media
--index.html
--...more hashed crap...
public
src

e por padrão process.env.PUBLIC_URLé definido como "/" O QUE ?? 🤨 sim olhe, deixe-me mostrar a você. Diz-se que uma imagem explica mais de 1000 palavras.

se olharmos para a imagem que de acordo com o seu caminho ela está localizada ./src/styles/imageSlack.jpgou alguma. E daí se nós console.log isso.

WHAAAT !! onde eles fazem isso? uma coisa que você pode fazer para testar minha teoria é se você estiver em console.log(process.env.PUBLIC_URL)algum lugar no seu código. agora aqui está a grande diferença entre isso e aquilo.

Os navegadores nativamente não conhecem o Typescript.

Portanto, ou você define o código interno srce nós terminamos felizes ou segue o princípio de separação de preocupações e criamos um pacote npm com o código compartilhado e apenas importado como qualquer outro módulo.