React-dropzone: beginner, can't include styles

Created on 6 Jul 2019 · 3Comments · Source: react-dropzone/react-dropzone

Hey there, I'm a beginner and trying to setup react drop-zone with webpack

I npm install react-dropzone and when I include it in my project I get a module error

Module Error (from ./node_modules/eslint-loader/index.js):
16:19  error  `'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`  react/no-unescaped-entities

When I render the component the functionality it there but no styles are rendered, I believe I need to somehow include it in my webpack build process - but I'm not too sure how?

here is my webpack config

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader", "postcss-loader",
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "styles.css",
      chunkFilename: "styles.css"
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
  ],
  devServer: {
    historyApiFallback: true,
  },
};

any help would be amazing

Thanks

Source

Mattensor

All 3 comments

I am also having an issue with styling a dropzone component. I have tried inline styling and also the styled-components module. My main issue is increasing the size of the drop area and adding a border, I can generate a border with span, but I cannot increase the size of the actual drop area any way except for just adding more text so the size is forced to increase. Running this in reactjs with electron.