Não é possível resolver o módulo (não encontrado) em React.js

Não posso acreditar que estou fazendo uma pergunta óbvia, mas ainda recebo o erro no log do console.

O console diz que não consegue encontrar o módulo no diretório, mas verifiquei pelo menos 10 vezes em busca de erros de digitação. De qualquer forma, aqui está o código do componente.

Eu quero renderizar o cabeçalho na raiz

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

Este é o Headercomponente

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

Verifiquei pelo menos 10 vezes se o módulo está neste local ./src/components/header/headere está (a pasta "header" contém "header.js").

Mesmo assim, o React ainda gera este erro:

Falha ao compilar

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

O teste npm diz a mesma coisa.

A maneira que geralmente usamos importé baseada no caminho relativo.

.e ..são semelhantes a como usamos para navegar terminalcomo cd ..para sair do diretório e mv ~/file .mover um filepara o diretório atual.

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

No seu caso, App.jsestá no src/diretório enquanto header.jsestá em src/components. Para importvocê faria import Header from './components/header'. Isso traduz aproximadamente em meu diretório atual, localizar a pasta de componentes que contém um arquivo de cabeçalho.

Agora, se de header.js, você precisa de importalgo de card, você faria isso. import Card from '../containers/card'. Isso traduz para, mover para fora do meu diretório atual, procurar por recipientes de nome de pasta que têm um arquivo de cartão.

Quanto import React, { Component } from 'react', este não começar com um ./ou ../ou /, portanto, nó irá começar a olhar para o módulo no node_modulesem uma ordem específica até que reactseja encontrada. Para um entendimento mais detalhado, pode ser lido aqui .

Se você criar um aplicativo com react-create-app, não se esqueça de definir a variável de ambiente:

NODE_PATH=./src

Ou adicione um .envarquivo à pasta raiz;

Incluir NODE_PATHcomo variável de ambiente em .envestá obsoleto e foi substituído por incluir "baseUrl": "./src", compilerOptionsem jsconfig.jsonou tsconfig.json.

Referência

Excluído o arquivo package-lock.json e, em seguida, execute

npm install

Leia mais

no meu caso, a mensagem de erro foi

Module not found: Error: Can't resolve '/components/body

Enquanto tudo estava no diretório correto.

Descobri que renomear body.jsxpara body.jsresolver o problema!

Então, adicionei este código webpack.config.jspara resolver jsxcomojs

 module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

E então o erro de compilação desapareceu!

Eu acho que é o uso duplo de cabeçalho. Eu mesmo tentei algo semelhante e também causei problemas. Coloquei meu arquivo de componente em maiúscula para corresponder aos outros e funcionou.

import Header from './src/components/header/header';

Deveria estar

import Header from './src/components/header/Header';

Eu tive uma questão semelhante.

Causa:

import HomeComponent from "components/HomeComponent";

Solução:

import HomeComponent from "./components/HomeComponent";

NOTA: ./ era antes dos componentes. Você pode ler a postagem de @Zac Kwan acima sobre como usarimport

Enfrentei o mesmo problema quando criei um novo aplicativo de reação, tentei todas as opções em https://github.com/facebook/create-react-app/issues/2534, mas não ajudou. Tive que mudar a porta para o novo aplicativo e funcionou. Por padrão, os aplicativos usam a porta 3000. Eu mudei a porta para 8001 no package.json da seguinte maneira:

  "scripts": {
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Existe uma maneira melhor de lidar com a importação de módulos em seu aplicativo React. Considere fazer isso:

Adicione um jsconfig.jsonarquivo à sua pasta base. Essa é a mesma pasta que contém seu package.json. Em seguida, defina suas importações de URL base nele:

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

Agora, em vez de ligar, ../../você pode fazer isso facilmente:

import navBar from 'components/header/navBar'
import 'css/header.css'

Observe que 'componentes /' é diferente de '../components/'

É mais puro assim.

Mas se você deseja importar arquivos no mesmo diretório, você também pode fazer isso:

import logo from './logo.svg'

Você precisa estar na pasta do projeto, se estiver srcou publictiver que sair dessas pastas. Suponha que o nome do seu projeto react seja 'hello-react' entãocd hello-react

você deve alterar o cabeçalho de importação de ' . / src / components / header / header 'para

import Header from ' .. / src / components / header / header'

Você pode tentar executar 'npm install' na pasta do aplicativo. Isso também pode resolver o problema. Funcionou para mim

Eu estava enfrentando o mesmo problema e resolvi. Veja se o seu index.jsarquivo está emsrc pasta, então, seja qual for o arquivo que você está importando, a pasta que contém isso também deve estar dentro da pasta src.

Isso significa que se a pasta de componentes está fora da srcpasta, basta arrastá-la para dentro da srcpasta em seu editor, pois os arquivos fora da srcpasta não são importados.

Então você poderá importar usando ./components/header/header(neste caso)

Verifique as declarações de importação. Deve terminar com ponto e vírgula. Se você perder algum, receberá este erro.

Verifique também se a instrução de importação a seguir foi adicionada ao seu componente.

importar {threadId} de 'worker_threads';

Se assim for, remova essa linha. Funciona para mim.

Para mim, eu tinha a entrada correta, mas npm startpode estar com bugs (pelo menos usá-lo com terminal Hyper no Windows e Linux). Se eu mover arquivos para pastas diferentes, o npm start não detecta essas mudanças. Preciso cancelar o processo de inicialização do npm, mover, salvar e executar npm starte ele verá os arquivos agora.

No meu caso, eu renomeio um arquivo de componente, um código VS adiciona a linha de código abaixo para mim:

import React, { Component } from "./node_modules/react";

Então, resolvi removendo: ./node_modules/

import React, { Component } from "react";

Felicidades!