search

akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.73k stars 2.1k forks source link

Webpack config needed for image files #1722

Closed scheung38 closed 4 years ago

scheung38 commented 4 years ago

package.json:

{
  "name": "web-starter-template",
  "version": "0.1.0",
  "description": "The Web Starter Template (WST) is a starting point for creating Front End Web applications.",
  "main": "app.js",
  "repository": {
    "type": "git",
    "url": ""
  },
  "dependencies": {
    "@koa/cors": "^2.2.3",
    "apollo-boost": "^0.4.7",
    "apollo-client": "^2.6.8",
    "apollo-link-http": "^1.5.16",
    "apollo-server": "^2.9.16",
    "apollo-server-koa": "^2.9.16",
    "axios": "^0.19.2",
    "downshift": "^4.0.7",
    "fs": "0.0.1-security",
    "graphql": "^14.6.0",
    "graphql-schema-from-json": "0.0.3",
    "graphql-tag": "^2.10.1",
    "koa": "^2.11.0",
    "koa-bodyparser": "^4.2.1",
    "koa-router": "^7.4.0",
    "koa-static": "^5.0.0",
    "process": "^0.11.10",
    "react-apollo": "^3.1.3",
    "react-autosuggest": "^9.4.3",
    "react-slick": "^0.25.2",
    "resolve": "^1.15.0"
  },
  "scripts": {
    "servers": "NODE_ENV=development gulp watch",
    "dev-server": "NODE_ENV=development gulp dev_server",
    "node-server": "NODE_ENV=development nodemon server/app.js",
    "prod": "NODE_ENV=production gulp prod",
    "dev-tests": "NODE_ENV=development gulp tests",
    "image-min": "NODE_ENV=development gulp images",
    "sass": "NODE_ENV=development gulp sass",
    "third-party": "NODE_ENV=development gulp vendor"
  },
  "keywords": [
    "Web",
    "Front",
    "End",
    "Template"
  ],
  "author": "Shaun Hinchy",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "7.0.0-beta.34",
    "@babel/preset-react": "^7.0.0-beta.36",
    "babel-loader": "8.0.0-beta.0",
    "babel-preset-react": "^6.24.1",
    "browser-sync": "^2.26.3",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "gulp": "3.9.1",
    "gulp-autoprefixer": "4.0.0",
    "gulp-git": "^2.5.0",
    "gulp-imagemin": "4.0.0",
    "gulp-mustache": "3.0.0",
    "gulp-rename": "1.2.2",
    "gulp-sass": "3.1.0",
    "gulp-sourcemaps": "2.6.1",
    "html-webpack-plugin": "^3.2.0",
    "html-webpack-template": "^6.2.0",
    "image-webpack-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "nodemon": "^1.14.7",
    "raw-loader": "^4.0.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "style-loader": "^1.1.3",
    "uglify-js": "3.2.2",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.2",
    "webpack-stream": "^5.2.1"
  }
}

/config/webpackconfig.js

"use strict";

const path = require("path");
const resolve = require('resolve');

module.exports = {

    mode: 'development',

    entry: {app: "./app/scripts/index.js"},

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[chunkhash].min.js",
        publicPath: "/"
    },

    devtool: 'source-map',

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
            {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: require.resolve('url-loader'),
                options: {
                    limit: 10000,

                },
            },
            {
                test: /\.html$/,
                loader: "raw-loader"
            }
        ]
    }
};

ReactSlickDemo.js:


import React from 'react';
import ReactDOM from 'react-dom';
import Slider from 'react-slick';

class ReactSlickDemo extends  React.Component {
    render() {
        let settings = {
            dots: true
        };

        return (

            <div className="container">
                <Slider {...settings}>
                    <div>
                        <img src="http://placekitten.com/g/400/200" />
                    </div>

                </Slider>

            </div>
        )
    };
}

module.exports = ReactSlickDemo;

web-starter-template@0.1.0 dev-server /Users/mincheung/Documents/GitHub/ZaharaM/elc-coding-test-master-aede79cc272cea41a964edefb1387f125bfca040 NODE_ENV=development gulp dev_server

[17:39:46] Using gulpfile ~/Documents/GitHub/ZaharaM/elc-coding-test-master-aede79cc272cea41a964edefb1387f125bfca040/gulpfile.js [17:39:46] Starting 'images'... [17:39:46] Starting 'mustache'... [17:39:46] Starting 'scripts'... [17:39:47] Starting 'sass'... [17:39:47] Finished 'mustache' after 517 ms [17:39:47] Starting 'templates'... [17:39:47] Finished 'templates' after 29 μs [17:39:48] Finished 'sass' after 1.44 s [17:39:50] Version: webpack 4.41.5 Built at: 02/02/2020 5:39:50 PM Asset Size Chunks Chunk Names app.4b1dba7c346e7573d6d4.min.js 1.26 MiB app [emitted] [immutable] app app.4b1dba7c346e7573d6d4.min.js.map 1.44 MiB app [emitted] [dev] app Entrypoint app = app.4b1dba7c346e7573d6d4.min.js app.4b1dba7c346e7573d6d4.min.js.map [17:39:50] Finished 'scripts' after 3.47 s [17:39:54] gulp-imagemin: Minified 20 images (saved 58.6 kB - 3.5%) [17:39:54] Finished 'images' after 7.26 s [17:39:54] Starting 'dev_server'... [17:39:54] Finished 'dev_server' after 102 ms [Browsersync] Access URLs:

   Local: http://localhost:3031
External: http://192.168.1.17:3031
      UI: http://localhost:3002

UI External: http://localhost:3002

Then :

react-dom.development.js:17071 The above error occurred in the component: in ReactSlickDemo (created by Downshift) in div (created by Downshift) in div (created by Downshift) in div (created by Downshift) in Downshift (created by DownshiftTwo) in DownshiftTwo (created by Menu) in div (created by Menu) in header (created by Menu) in Menu (created by App) in div (created by App) in App

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:17071 Promise.then (async) fetchProducts @ DownshiftTwo.js:33 inputOnChange @ DownshiftTwo.js:23 (anonymous) @ downshift.esm.js:115 (anonymous) @ downshift.esm.js:113 callCallback @ react-dom.development.js:149 invokeGuardedCallbackDev @ react-dom.development.js:199 invokeGuardedCallback @ react-dom.development.js:256 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270 executeDispatch @ react-dom.development.js:561 executeDispatchesInOrder @ react-dom.development.js:583 executeDispatchesAndRelease @ react-dom.development.js:680 executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688 forEachAccumulated @ react-dom.development.js:660 runEventsInBatch @ react-dom.development.js:816 runExtractedEventsInBatch @ react-dom.development.js:824 handleTopLevel @ react-dom.development.js:4826 batchedUpdates$1 @ react-dom.development.js:20393 batchedUpdates @ react-dom.development.js:2151 dispatchEvent @ react-dom.development.js:4905 (anonymous) @ react-dom.development.js:20444 unstable_runWithPriority @ scheduler.development.js:255 interactiveUpdates$1 @ react-dom.development.js:20443 interactiveUpdates @ react-dom.development.js:2170 dispatchInteractiveEvent @ react-dom.development.js:4882 QueryHandler.js:74 Uncaught (in promise) Error: Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) at Object. (QueryHandler.js:74) at webpack_require (bootstrap 4c6a3c2d1012f3a2a84c:19) at ReactSlickDemo.render (ReactSlickDemo.js:22) at finishClassComponent (react-dom.development.js:14695) at updateClassComponent (react-dom.development.js:14650) at beginWork (react-dom.development.js:15598) at performUnitOfWork (react-dom.development.js:19266) at workLoop (react-dom.development.js:19306) at renderRoot (react-dom.development.js:19389) at performWorkOnRoot (react-dom.development.js:20296) (anonymous) @ QueryHandler.js:74 webpack_require @ bootstrap 4c6a3c2d1012f3a2a84c:19 render @ ReactSlickDemo.js:22 finishClassComponent @ react-dom.development.js:14695 updateClassComponent @ react-dom.development.js:14650 beginWork @ react-dom.development.js:15598 performUnitOfWork @ react-dom.development.js:19266 workLoop @ react-dom.development.js:19306 renderRoot @ react-dom.development.js:19389 performWorkOnRoot @ react-dom.development.js:20296 performWork @ react-dom.development.js:20208 performSyncWork @ react-dom.development.js:20182 requestWork @ react-dom.development.js:20051 scheduleWork @ react-dom.development.js:19865 enqueueSetState @ react-dom.development.js:11144 Component.setState @ react.development.js:335 (anonymous) @ DownshiftTwo.js:34 Promise.then (async) fetchProducts @ DownshiftTwo.js:33 inputOnChange @ DownshiftTwo.js:23 (anonymous) @ downshift.esm.js:115 (anonymous) @ downshift.esm.js:113 callCallback @ react-dom.development.js:149 invokeGuardedCallbackDev @ react-dom.development.js:199 invokeGuardedCallback @ react-dom.development.js:256 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270 executeDispatch @ react-dom.development.js:561 executeDispatchesInOrder @ react-dom.development.js:583 executeDispatchesAndRelease @ react-dom.development.js:680 executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688 forEachAccumulated @ react-dom.development.js:660 runEventsInBatch @ react-dom.development.js:816 runExtractedEventsInBatch @ react-dom.development.js:824 handleTopLevel @ react-dom.development.js:4826 batchedUpdates$1 @ react-dom.development.js:20393 batchedUpdates @ react-dom.development.js:2151 dispatchEvent @ react-dom.development.js:4905 (anonymous) @ react-dom.development.js:20444 unstable_runWithPriority @ scheduler.development.js:255 interactiveUpdates$1 @ react-dom.development.js:20443 interactiveUpdates @ react-dom.development.js:2170 dispatchInteractiveEvent @ react-dom.development.js:4882 [object%20Object]:1 Failed to load resource: the server responded with a status of 404 (Not Found)

akiran commented 4 years ago

This might not be react-slick issue