React.js'de modül (bulunamadı) çözülemiyor

Bariz bir soru sorduğuma inanamıyorum, ancak yine de konsol günlüğünde hatayı alıyorum.

Konsol, modülü dizinde bulamadığını söylüyor, ancak yazım hatalarını en az 10 kez kontrol ettim. Her neyse, işte bileşen kodu.

Üstbilgiyi kökte oluşturmak istiyorum

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;

Bu Headerbileşen

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

Modülün bu konumda olduğunu en az 10 kez kontrol ettim ./src/components/header/headerve öyle (klasör "başlık", "header.js" içeriyor).

Yine de, React hala bu hatayı atıyor:

Derlenemedi

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

npm testi aynı şeyi söylüyor.

Genellikle kullandığımız importyol göreceli yola dayanır.

.ve dizinin dışına çıkmak ve bir dizini geçerli dizine taşımak gibi ..gezinmek için kullandığımıza benzer .terminalcd ..mv ~/file .file

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

Senin durumunda, App.jsolduğu src/iken dizinde header.jsolduğunu src/components. To importsana yapardı import Header from './components/header'. Bu kabaca şu anki dizinimde, bir başlık dosyası içeren bileşenler klasörünü bulun.

Şimdi, eğer şuradan bir şeye header.jsihtiyacınız varsa, bunu yaparsınız. . Bu çevir, şu anki dizinimden çıkar, kart dosyası olan bir klasör adı kapları arar.importcardimport Card from '../containers/card'

Gelince import React, { Component } from 'react', bununla başlamaz bir ./veya ../veya /bu nedenle düğüm içinde modül arayan başlayacak node_moduleskadar belirli bir sıraya göre reactbulunur. Daha ayrıntılı anlaşılması için, okunabilir burada .

React-create-app ile bir uygulama oluşturursanız, set ortam değişkenini unutmayın:

NODE_PATH=./src

Veya .envkök klasörünüze dosyaya ekleyin ;

NODE_PATHOrtam değişkeni olarak ekleme .env, kullanımdan kaldırılmıştır ve yerine "baseUrl": "./src", compilerOptionsiçine jsconfig.jsonveya eklenerek değiştirilmiştir tsconfig.json.

Referans

Package-lock.json dosyasını silip ardından çalıştırdı

npm install

Daha fazlasını okuyun

benim durumumda, hata mesajı

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

Her şey doğru dizindeyken.

Bunu yeniden adlandırma bulundu body.jsxetmek body.jssorunu çözmek!

Ben bu kodu eklendi Yani webpack.config.jsgidermek için jsxolduğu gibijs

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

Ve sonra inşa hatası gitti!

Bence bu, başlığın çift kullanımı. Ben de benzer bir şey denedim ve sorunlara da neden oldum. Bileşen dosyamı diğerleriyle eşleşecek şekilde büyük harfle yazdım ve işe yaradı.

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

Olmalı

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

Benzer bir sorun yaşadım.

Sebep olmak:

import HomeComponent from "components/HomeComponent";

Çözüm:

import HomeComponent from "./components/HomeComponent";

NOT: ./ bileşenlerden önceydi. @Zac Kwan'ın nasıl kullanılacağına dair yukarıdaki gönderisini okuyabilirsiniz.import

Yeni bir react uygulaması oluşturduğumda aynı sorunla karşılaştım, https://github.com/facebook/create-react-app/issues/2534'teki tüm seçenekleri denedim ama yardımcı olmadı. Yeni uygulama için bağlantı noktasını değiştirmek zorunda kaldım ve sonra çalıştı. Varsayılan olarak, uygulamalar 3000 numaralı bağlantı noktasını kullanır. Package.json içinde bağlantı noktasını aşağıdaki gibi 8001 olarak değiştirdim:

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

Eğer içindeyseniz srcveya publicbu klasörlerden çıkmanız gerekiyorsa proje klasöründe olmanız gerekir. React-project adınızın 'merhaba-react' olduğunu varsayalım o zamancd hello-react

Başlığı içe aktarmayı değiştirmelisiniz ' . / src / components / header / header 'için

Üstbilgiyi ' .. / src / components / header / header'den içe aktarın

Uygulama klasöründe 'npm install' çalıştırmayı deneyebilirsiniz. Bu da sorunu çözebilir. Benim için çalıştı.

Aynı sorunla karşı karşıyaydım ve çözdüm. index.jsDosyanızın srcklasörde olup olmadığına bakın , sonra hangi dosyayı içe aktarıyor olursanız olun, bunu içeren klasör de src klasörünün içinde olmalıdır.

Bu, bileşenler klasörünüz klasörün dışındaysa, srcklasörün srcdışındaki dosyalar srciçe aktarılmadığı için düzenleyicinizdeki klasörün içine sürüklemeniz yeterlidir.

Daha sonra ./components/header/header(bu durumda) kullanarak ithal edebileceksiniz.

React Uygulamanızda modüllerin içe aktarılmasını yönetmenin daha iyi bir yolu var. Bunu yapmayı düşünün:

jsconfig.jsonTemel klasörünüze bir dosya ekleyin . Bu, package.json dosyanızı içeren aynı klasördür. Ardından, temel URL içe aktarmalarınızı burada tanımlayın:

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

Şimdi aramak yerine ../../bunu kolayca yapabilirsiniz:

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

"Bileşenler /" öğesinin "../components/" öğesinden farklı olduğuna dikkat edin.

Böylesi daha temiz.

Ancak aynı dizindeki dosyaları içe aktarmak istiyorsanız, bunu da yapabilirsiniz:

import logo from './logo.svg'

İthalat ifadelerini kontrol edin, noktalı virgül ile sonlandırılmalıdır. Herhangi birini kaçırırsanız, bu hatayı alırsınız.

Ayrıca, bileşeninize aşağıdaki import ifadesinin eklenip eklenmediğini kontrol edin.

{threadId} öğesini 'worker_threads'den içe aktarın;

Eğer öyleyse bu satırı kaldırın. Benim için çalışıyor.

Benim durumumda bir bileşen dosyasını yeniden adlandırıyorum, VS Kodu benim için aşağıdaki kod satırını ekler:

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

Bu yüzden şunları kaldırarak düzelttim: ./node_modules/

import React, { Component } from "react";

Şerefe!