Nie można rozwiązać modułu (nie znaleziono) w React.js

Nie mogę uwierzyć, że zadaję oczywiste pytanie, ale nadal pojawia się błąd w dzienniku konsoli.

Konsola mówi, że nie może znaleźć modułu w katalogu, ale sprawdziłem co najmniej 10 razy pod kątem literówek. Tak czy inaczej, oto kod komponentu.

Chcę wyrenderować nagłówek w katalogu głównym

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;

To jest Headerskładnik

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'));

Co najmniej 10 razy sprawdziłem, czy moduł znajduje się w tej lokalizacji ./src/components/header/headeri tak jest (folder „header” zawiera „header.js”).

Jednak React nadal zgłasza ten błąd:

Nie udało się skompilować

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

test npm mówi to samo.

Sposób, w jaki zwykle używamy, importopiera się na ścieżce względnej.

.i ..są podobne do tego, jak używamy do nawigacji, terminaljak cd ..wychodzenie z katalogu i mv ~/file .przenoszenie filedo bieżącego katalogu.

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

W twoim przypadku App.jsjest w src/katalogu, podczas gdy header.jsjest w src/components. Do importciebie zrobi import Header from './components/header'. To z grubsza tłumaczy się w moim bieżącym katalogu, znajdź folder komponentów, który zawiera plik nagłówkowy.

Teraz, jeśli od header.js, potrzebujesz importczegoś z card, zrobiłbyś to. import Card from '../containers/card'. To przekłada się na wyjście z mojego bieżącego katalogu, poszukaj kontenerów nazw folderów, które mają plik karty.

Co do import React, { Component } from 'react'tego nie daje się uruchomić z ./lub ../czy /zatem węzeł będzie zacząć szukać w module node_modulesw celu konkretnego aż reactzostanie znaleziony. Aby uzyskać bardziej szczegółowe informacje, można ją przeczytać tutaj .

Jeśli tworzysz aplikację za pomocą react-create-app, nie zapomnij ustawić zmiennej środowiskowej:

NODE_PATH=./src

Lub dodaj do .envpliku do folderu głównego;

Dodanie NODE_PATHjako zmiennej środowiskowej w .envjest przestarzałe i jest zastępowane przez dodanie "baseUrl": "./src"do compilerOptionsw jsconfig.jsonlub tsconfig.json.

Odniesienie

Usunięto plik package-lock.json, a następnie uruchomiono

npm install

Czytaj dalej

w moim przypadku komunikat o błędzie to

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

Podczas gdy wszystko było we właściwym katalogu.

Znalazłem tę zmianę nazwy body.jsxnabody.js rozwiązać problem!

Więc dodałem ten kod, webpack.config.jsaby rozwiązać jsxjakojs

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

A potem zniknął błąd kompilacji!

Myślę, że to podwójne użycie nagłówka. Właśnie spróbowałem czegoś podobnego i również spowodowałem problemy. Napisałem plik komponentu wielką literą, aby dopasować go do innych i zadziałało.

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

Powinien być

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

Miałem podobny problem.

Przyczyna:

import HomeComponent from "components/HomeComponent";

Rozwiązanie:

import HomeComponent from "./components/HomeComponent";

UWAGA: ./ było przed komponentami. Możesz przeczytać powyższy post @Zac Kwan, aby dowiedzieć się, jak używaćimport

Napotkałem ten sam problem, kiedy tworzyłem nową aplikację Reaguj, wypróbowałem wszystkie opcje na https://github.com/facebook/create-react-app/issues/2534, ale to nie pomogło. Musiałem zmienić port dla nowej aplikacji i wtedy zadziałało. Domyślnie aplikacje używają portu 3000. Zmieniłem port na 8001 w package.json w następujący sposób:

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

Musisz być w folderze projektu, jeśli jesteś w tych folderach srclub publicmusisz z nich wyjść. Załóżmy więc, że nazwa Twojego projektu React to „Hello-React”cd hello-react

powinieneś zmienić import nagłówka z ' ./ src / components / header / header 'do

importuj nagłówek z „ .. / src / components / header / header”

Możesz spróbować wykonać polecenie „npm install” w folderze aplikacji. Może to również rozwiązać problem. U mnie to zadziałało.

Miałem ten sam problem i rozwiązałem go. Sprawdź, czy index.jsplik jest w formaciesrc folderze, a następnie jakikolwiek plik importujesz, folder zawierający ten musi również znajdować się w folderze src.

Oznacza to, że jeśli folder komponentów znajduje się poza srcfolderem, po prostu przeciągnij go do srcfolderu w edytorze, ponieważ pliki znajdują się poza folderemsrc folderem nie są importowane.

Wtedy będziesz mógł importować używając ./components/header/header(w tym przypadku)

Jest lepszy sposób na poradzenie sobie z importem modułów w Twojej aplikacji React. Rozważ zrobienie tego:

Dodaj jsconfig.jsonplik do folderu podstawowego. To jest ten sam folder zawierający plik package.json. Następnie zdefiniuj importy podstawowego adresu URL w nim:

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

Zamiast dzwonić, ../../możesz to łatwo zrobić:

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

Zauważ, że „components /” różni się od „../components/”

W ten sposób jest schludniej.

Ale jeśli chcesz zaimportować pliki w tym samym katalogu, możesz to również zrobić:

import logo from './logo.svg'

Sprawdź, czy są instrukcje importu, które powinny być zakończone średnikiem. Jeśli przegapisz jakiś, pojawi się ten błąd.

Sprawdź również, czy poniższe polecenie importu zostało dodane do twojego komponentu.

import {threadId} z 'worker_threads';

Jeśli tak, usuń tę linię. Mi to pasuje.

W moim przypadku zmieniam nazwę pliku składnika, kod VS dodaje dla mnie poniższy wiersz kodu:

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

Naprawiłem więc, usuwając: ./node_modules/

import React, { Component } from "react";

Twoje zdrowie!