[webpack, jQuery, slick-slider] Problem ze slick sliderem

pytanie zadane 19 maja 2019 w JavaScript przez 42savage Bywalec (2,630 p.)

Cześć i czołem,

ostatnio zacząłem zabawe z webpackiem i natknąłem się na pewien problem.

Otóż gdy zainstalowałem przez npm slick slider i chciałem go ładnie odpalić pojawił się taki problem

zdaje się, że slick działa poprawnie do momentu, aż ma wczytać tego gifa, bo do divów dopisywane są klasy odpowiedzialne za owy slider.

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "image-webpack-loader": "^4.6.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2"
  },
  "dependencies": {
    "jquery": "^3.4.1",
    "slick-carousel": "^1.8.1"
  }
}

const path = require("path");
var webpack = require('webpack');
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "url-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery-3.4.1',
      jQuery: 'jquery'
    })
  ]
};

Pomoże ktoś to rozwiązać?

Gdzieś wyczytałem, że muszę dodać url loadera, żeby mi wczytało tego gifa, więc prawdopodobnie źle to skonfigurowałem, albo po prostu ten url loader nie działa.

komentarz 19 maja 2019 przez ScriptyChris Mędrzec (190,190 p.)

Sprawdź, czy ścieżka wskazana w błędzie (w konsoli) zawiera ten obrazek.

Dlaczego próba pobrania obrazka jest po protokole file zamiast http[s]? W innej przeglądarce działa?

komentarz 19 maja 2019 przez 42savage Bywalec (2,630 p.)

no na moje oko jest

komentarz 19 maja 2019 przez ScriptyChris Mędrzec (190,190 p.)

W eksploratorze widać w ścieżce dodatkowy folder o nazwie tego_typu - może tutaj tkwi problem?

komentarz 19 maja 2019 przez 42savage Bywalec (2,630 p.)

A więc wszedłem w plik slick-theme.css, tam, gdy klikę tego ctrl + lewy myszek normalnie mi odczytuje ten plik gif.

Swoją drogą udało mi się poniekąd uporać z działaniem slicka, bo slider działa, tylko dalej jest problem ze ścieżkami.

Mam jeszcze problem z dodaniem zdjęc do slidera. Obrazki są w folderze src, odnoszę się do nich po prostu ('./img1.jpg') i nie chce wczytać

komentarz 19 maja 2019 przez 42savage Bywalec (2,630 p.)

jeżeli chodzi o te zdjęcia to taki błąd wyskakuje

komentarz 19 maja 2019 przez ScriptyChris Mędrzec (190,190 p.)

Gdzie w strukturze projektu umieściłeś plik webpack.config.js?

komentarz 19 maja 2019 przez 42savage Bywalec (2,630 p.)

tak to się prezentuje

komentarz 20 maja 2019 przez ScriptyChris Mędrzec (190,190 p.)

Spróbuj ustawić context webpacka na folder tego_typu.

komentarz 21 maja 2019 przez 42savage Bywalec (2,630 p.)
edycja 21 maja 2019 przez 42savage

Ustawienie context powoduje kolejny błąd, wtedy ścieżka to tego_typu/tego_typu

Z jednym, z problemów, czyli tym dotyczącym zdjęć sobie poradziłem

do css-loader trzeba dodać ?url=false

teraz został tylko problem z plikami slicka

komentarz 22 maja 2019 przez ScriptyChris Mędrzec (190,190 p.)

Ustawienie context powoduje kolejny błąd, wtedy ścieżka to tego_typu/tego_typu

Jak ustawiłeś context?

Włącz pauzowanie kodu na niezłapanych wyjątkach i sprawdź co konkretnie (za pośrednictwem jQuery - jak widać na screenie z Twojego pytania) chce pobrać te obrazki oraz dlaczego przez błędną ściężkę.

komentarz 22 maja 2019 przez 42savage Bywalec (2,630 p.)
edycja 22 maja 2019 przez 42savage

Znalazłem pewien sposób, zrobiłem slick fixa - zostało tylko podanie poprawnej ścieżki

zauważyłem, że przeglądarka szuka w ten sposób

file:///D:/node_modules/slick-carousel/slick/ajax-loader.gif

pomija folder tego_typu

kolejne spostrzeżenie:

gdy dodałem w tym fixie tego typu przeglądarka szuka w tym miejscu

file:///D:/tego_typu/dist/tego_typu/node_modules/slick-carousel/slick/ajax-loader.gif

komentarz 23 maja 2019 przez ScriptyChris Mędrzec (190,190 p.)

zauważyłem, że przeglądarka szuka w ten sposób

To widać w komunikacie błędu, który pokazałeś. Ja poprosiłem żebyś zdebugował ten błąd - żeby było wiadomo, co inicjuje pobieranie i skąd bierze ścieżkę.