Dlaczego webpack nie odnajduje ścieżki do modułu?

Question

Jak zwykle powraca problem z konfiguracją webpacka, mam proste zadanie wczytać komponent vue z osobnego pliku i tradycyjnie webpack nie może rozpoznać ścieżki. Nie wiem co ja mam zrobić aby wreszcie skumał skąd ma pobierać plik. Plik webpack.config.js : 

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = {
  context : __dirname,
    entry: {
        index : "/resources/js/index.ts", 
        main : "/resources/scss/main.scss"},
    watch : true,
    output: {
      path: path.resolve(__dirname),
      filename: "[name].js"
    },

    module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
          },
          {
              test: /\.scss$/,
              use: "sass-loader"
            }
        ]
      },

      resolve: {

        alias: {
          '@vuecomponents' : path.resolve(__dirname,'resources/js/components'),
        },

        extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
      },

      plugins: [
        new VueLoaderPlugin()
      ]
  }


  
    

Jest oczywiście w folderze głównym projektu. Struktura katalogu wygląda tak :

folder główny -> resources-> js -> components -> index.ts (plik TypeScript'owy)

Kod wewnątrz pliku :

import Vue from 'vue';
import Navbar from '@vuecomponents/navbar.vue'; 
Vue.component(Navbar, 'navbar');

I twierdzi, że nie może znaleźć '@vuecomponents/navbar.vue' . Co tu się nie zgadza? Skończyły mi się pomysły, kombinował na 30 sposobów i cokolwiek bym nie zrobił, on dalej się upiera, że nie widzi tego pliku. Czy muszę najpierw poświęcić rok nauki aby zrozumieć filozofię odnajdywania ścieżek do modułów? Znowu 4 godziny w plecy przez jakąś pierdołę.

Comments

Nie miałeś już podobnego problemu wcześniej?

---

Miałem, tamten dotyczył ustawień TypeScript'u

---

Są jakieś błędy kompilacji?

---

[edycja]

Czy plik navbar.vue jest na tym samym poziomie w katalogu components co plik index.ts?

---

Tak są, error cannot find module @vuecomponents/navbar.vue.

---

@ScriptyChris, Plik navbar vue jest w folder główny ->  resources/js/components/navbar.vue.

Dodam też, że z jakiegoś powodu funkcja path.resolve(__dirname) zwraca   /    (używam linux'a) zamiast katalogu w którym znajduje się projekt

---

funkcja path.resolve(__dirname) zwraca   / 

A co zwraca path.resolve(__dirname,'resources/js/components') ?

---

/resources/js/components

---

Ok i jeśli zaimportujesz plik poprzez:

import Navbar from '/resources/js/components/navbar.vue'; 

, to czy będzie działać?

---

Nie, ponieważ on to interpretuje nie względem katalogu w którym rzeczywiście jestem tylko on myśli, że jestem w folderze głównym systemu - w linuksie to jest oznaczone symbolem   "/"  

Czyli myśli, że jestem w "/" podczas gdy w rzeczywistości jestem w   "/var/www/html/portfolio 2020" i dlatego path.resolve(__dirname) zwraca '/'. Tylko nie wiem dlaczego, zupełnie bez sensu.

---

Skoro path.resolve(__dirname) zwraca /, a masz jeszcze taki config

    output: {
      path: path.resolve(__dirname),
      filename: "[name].js"
    },

, to czy zbudowany projekt też wrzuca do głównego folderu systemu?

Masz też jako context podany po prostu __dirname, podczas, gdy w docsach jest to użyte z path.resolve (nie wiem, czy takie jest zalecenie, ale warto to sprawdzić).

Jaką ścieżkę zwraca samo __dirname? I w jaki sposób uruchamiasz projekt - pokaż sekcję "scripts" z package.json, może jakaś dziwna ścieżka jest tam przekazywana?

---

 to czy zbudowany projekt też wrzuca do głównego folderu systemu?

No właśnie nie. Ale gdy uruchomię sobie

alert(path.resolve(__dirname));

To zwraca tak jak opisałem powyżej. 

aką ścieżkę zwraca samo __dirname? 

Uruchmiłem 

alert(path.resolve(__dirname));

I nadal zwraca " / ".

Plik package.json

{
  "name": "portfolio-2020",
  "version": "1.0.0",
  "description": "portfolio",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "artek",
  "license": "ISC",
  "dependencies": {
    "path": "^0.12.7",
    "require": "^2.4.20",
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "@types/node": "^14.11.8",
    "css-loader": "^4.3.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.3",
    "ts-loader": "^8.0.5",
    "typescript": "^4.0.3",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  }
}

 

---

No właśnie nie. Ale gdy uruchomię sobie

Hmm, to trochę dziwne, że zbudowany projekt nie jest zapisywany do głównego katalogu systemu, skoro na to wskazuje path.resolve(__dirname), które twierdzisz, że zwraca / (który wg Ciebie wskazuje na główny katalog systemu, a nie projektu). To dokąd trafia zbudowana paczka?

alert(path.resolve(__dirname));

Pytałem o samo __dirname (bo to przypisujesz do property context).

W pliku package.json jest tylko skrypt test. W jaki więc sposób uruchamiasz apkę? Po prostu poleceniem node /path/to/project/index.js? Jeśli tak, to z którego miejsca to robisz? Z głównej ścieżki systemu, czy z folderu projektu?

---

W pliku webpack.config.js dodałem taki kod : 

console.log(__dirname);

I zwraca teraz

/var/www/html/portfolio_2020

Ale gdy uruchamiałem w pliku który miał być na stronie już wykorzystywany to w alercie dostawałem "/"

W jaki więc sposób uruchamiasz apkę?

Na razie mam tylko plik index.html i tam podpięty plik index.js i uruchamiałem w przeglądarce 

---

Ale gdy uruchamiałem w pliku który miał być na stronie już wykorzystywany to w alercie dostawałem "/"

Mam nadzieję, że path.resolve(__dirname) sprawdzałeś w pliku webpack.config.js, a nie w pliku komponentu. :)

Na razie mam tylko plik index.html i tam podpięty plik index.js i uruchamiałem w przeglądarce 

Ok, ale w jaki sposób uruchamiasz budowanie, że wywala błąd nieznalezionego komponentu przy próbie importu? 

---

Co do przyczyny to powiem tak : problemem były pliki r rozszerzeniem .ts. Nie ogarniał takiego rozszerzenia, musiałem jeszcze podać aliasy w pliku tsconfig.json i jeszcze aby komponenty Vue załadować musiałem umieścić plik o nazwie schims-vue.d.ts w głównym folderze projektu. Tak czy siak chciałbym wszystkim podziękować za chęć pomocy i zaangażowanie. W sumie to tak jak kolega wspomniał miałem podobny problem wcześniej i teoretycznie powinienem sobie poradzić, jednakże w głowie mi się nie mieści, że trzeba się tyle nagimnastykować i tyle ustawiać w jakimś pliku tekstowym, żeby ustawić takie proste podstawowe rzeczy. Dla mnie jest to strasznie toporne, nie rozumiem czemu nie można by zrobić tego prościej.

---

No niestety myślałem, że już problem z głowy ale nadal nie widzi plików z rozszerzeniem vue. Nie mam pojęcia co jest nie tak, przekopałem 100 tematów na ten temat ale dalej nie chce zaimportować plików z rozszerzeniem vue.

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths" : {
      "vuecomponents/*" : ["resources/js/components/*"],
    }
  },
  "include": ["resources/js/**/*"],
  
}

Plik webpack.config.json

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

console.log(path.resolve(__dirname,'./resources/js/components'));

module.exports = {
  
  mode : 'development',
  node: {
    __dirname: false
  },
  context : path.resolve(__dirname),
    entry: {
        index : "/resources/js/index.ts", 
        main : "/resources/scss/main.scss"},
    watch : true,
    output: {
      path: path.resolve(__dirname),
      filename: "[name].js"
    },

    module: {
      rules: [
        {
          test: /\.vue$/,
          use: 'vue-loader',
      },
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
      ]
    },

      resolve: {

        extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"],

        alias: {
          vuecomponents : path.resolve(__dirname,'./resources/js/components/'),
        },
        
      },

      plugins: [
        new VueLoaderPlugin()
      ]
  }


  
    
 

Tak importuję komponent vue

import Vue from 'vue';
import Navbar from 'vuecomponents/navbar.vue';

Nie wiem co mam zrobić, wypróbowałem 100 porad jak to powinno działać a i tak nie chce tego wczytać.

---

Odpowiedz proszę na moje poprzednie pytania.

---

Problemem okazało się, to że potrzeba umieścić plik o nazwie schims.vue.d.ts w folderze w którym znajduje się kompilowany plik(samo umieszczenie w folderze głównym projektu okazuje się nieskuteczne). Treść tego pliku : 

declare module "*.vue" {
    import Vue from 'vue';
    export default Vue;
  }

Mam nadzieję, że komuś to pomoże przebić się przez tą konfigurację.