CSS are not working for me. about react-inputs-validation HOT 15 CLOSED

1. Are you using webpack to bundle your CSS?
   (if you use webpack, seach 'react-inputs-validation__textbox__input___20hDL' in your bundled css file, If you can find it, then it means it is already in use, and if you cannot find it, then it means it does not include it. My className already hashed. In this case, you may hashed it again using webpack

            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }

)
2. By hitting a submit, do you mean hitting the keyboard enter?

It would be very helpful if you can provide a simple test repository

from react-inputs-validation.

Thanks @edwardfhsiao for the response.
Yes I am using css-loader config similar to what you've shared above. I got the css working by importing it into index.html, which i think is not a good approach, as it will load whole bunch of css that is not required.

I mean on click of Submit button, validations are ignored. I will create a sample repo and share it.

from react-inputs-validation.

my css already modulized the name, I think the problem you are facing is that you hashed the name again.

here is what i did for my project

// for node_modules only
      {
        test: /\.css$/,
        include: [PATH.NODE_MODULES_PATH],
        // exclude: [PATH.ROOT_PATH],
        enforce: 'pre',
        enforce: 'post',
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: loader => [
                // require("stylelint")({ /* your options */ }),
                require('postcss-import')({
                  root: loader.resourcePath
                }),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          }
        ]
      },

// for my project only
      {
        test: /\.css$/,
        include: [PATH.ROOT_PATH],
        exclude: [PATH.NODE_MODULES_PATH],
        enforce: 'pre',
        enforce: 'post',
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: loader => [
                // require("stylelint")({ /* your options */ }),
                require('postcss-import')({
                  root: loader.resourcePath
                }),
                require('autoprefixer')(),
                require('cssnano')(),
                require('postcss-simple-vars')({
                  variables: styleVariables
                })
              ]
            }
          }
        ]
      },

from react-inputs-validation.

Thanks!! I feel what you're saying, I'll give this a try.
can i also see the source code the "Example Form" at the bottom of this page https://edwardfhsiao.github.io/react-inputs-validation/

from react-inputs-validation.

its right here
https://github.com/edwardfhsiao/react-inputs-validation/blob/gh-pages/example/index.js

from react-inputs-validation.

for the CSS part i am still relying on index html, because now i am facing issue with MiniCss plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); TypeError: Cannot destructure property createHashof 'undefined' or 'null'.
as MiniCSS requires webpack >4.1.0 .

But atleast got the validation working on click of submit buttons and onBlur :)

from react-inputs-validation.

after adding this in webpack getting the below compilation error
./node_modules/react-inputs-validation/lib/react-inputs-validation.min.css
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

Tried to dig in - but unsuccessful

from react-inputs-validation.

sorry, that was for webpack4 as well..

try this

      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            },
            {
              loader: 'sass-loader'
            }
          ]
        })
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                // ident: 'postcss',
                plugins: loader => [
                  require('postcss-import')({
                    root: loader.resourcePath
                  }),
                  require('autoprefixer')(),
                  require('cssnano')()
                ]
              }
            }
          ]
        })
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                // ident: 'postcss',
                plugins: loader => [
                  require('postcss-import')({
                    root: loader.resourcePath
                  }),
                  require('autoprefixer')(),
                  require('cssnano')()
                ]
              }
            }
          ]
        })
      }

    "extract-text-webpack-plugin": "^3.0.0",
    "webpack": "^3.2.0",

from react-inputs-validation.

closing this issue since no further question

from react-inputs-validation.

my css already modulized the name, I think the problem you are facing is that you hashed the name again.

here is what i did for my project

// for node_modules only
      {
        test: /\.css$/,
        include: [PATH.NODE_MODULES_PATH],
        // exclude: [PATH.ROOT_PATH],
        enforce: 'pre',
        enforce: 'post',
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: loader => [
                // require("stylelint")({ /* your options */ }),
                require('postcss-import')({
                  root: loader.resourcePath
                }),
                require('autoprefixer')(),
                require('cssnano')()
              ]
            }
          }
        ]
      },

// for my project only
      {
        test: /\.css$/,
        include: [PATH.ROOT_PATH],
        exclude: [PATH.NODE_MODULES_PATH],
        enforce: 'pre',
        enforce: 'post',
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: loader => [
                // require("stylelint")({ /* your options */ }),
                require('postcss-import')({
                  root: loader.resourcePath
                }),
                require('autoprefixer')(),
                require('cssnano')(),
                require('postcss-simple-vars')({
                  variables: styleVariables
                })
              ]
            }
          }
        ]
      },

I tried this but now i'm getting error from bootstrap.css:

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(1:1) Unknown word

1 | exports = module.exports = require("../../../css-loader/lib/css-base.js")(false);

from react-inputs-validation.

I've never encountered this problem before since I'm not using bootstrap. How about the version of your dependencies? Or could you make a repo that I could take a look?

from react-inputs-validation.

I've never encountered this problem before since I'm not using bootstrap. How about the version of your dependencies? Or could you make a repo that I could take a look?

Thanks, here is my dependencies :

{
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.12",
        "@fortawesome/free-brands-svg-icons": "^5.6.3",
        "@fortawesome/free-solid-svg-icons": "^5.6.3",
        "@fortawesome/react-fontawesome": "^0.1.3",
        "babel-polyfill": "^6.26.0",
        "bootstrap": "^4.1.3",
        "chart.js": "^2.7.3",
        "classnames": "^2.2.6",
        "core-js": "^2.5.7",
        "datatables.net": "^1.10.19",
        "echarts": "^4.2.0-rc.2",
        "echarts-for-react": "^2.0.13",
        "enzyme": "^3.7.0",
        "enzyme-adapter-react-16": "^1.7.0",
        "express": "^4.16.4",
        "flag-icon-css": "^3.2.1",
        "font-awesome": "^4.7.0",
        "gentelella": "^1.4.0",
        "http-proxy-middleware": "^0.19.1",
        "jwt-decode": "^2.2.0",
        "node-sass": "^4.10.0",
        "pnotify": "^4.0.0-beta.2",
        "prop-types": "^15.6.2",
        "react": "^16.6.3",
        "react-animated-number": "^0.4.4",
        "react-app-polyfill": "^0.1.3",
        "react-bootstrap": "^0.32.1",
        "react-chartjs-2": "^2.7.2",
        "react-date-picker": "^7.1.1",
        "react-dom": "^16.6.3",
        "react-inputs-validation": "^2.1.3",
        "react-loadable": "^5.5.0",
        "react-redux": "^6.0.0",
        "react-router-config": "^4.4.0-beta.6",
        "react-router-dom": "^4.3.1",
        "react-router-redux": "^4.0.8",
        "react-sparklines": "^1.7.0",
        "react-spinners": "^0.4.8",
        "react-table": "^6.8.6",
        "react-test-renderer": "^16.6.3",
        "reactstrap": "^6.5.0",
        "redux": "^4.0.1",
        "redux-api-middleware": "^3.0.1",
        "redux-persist": "^5.10.0",
        "redux-thunk": "^2.3.0",
        "sass-loader": "^7.1.0",
        "simple-line-icons": "^2.4.1"
    },
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "css-loader": "^1.0.0",
        "icons-loader": "0.0.6",
        "react-scripts": "^2.1.1",
        "style-loader": "^0.21.0",
        "webpack": "^4.28.2",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.10"
    }
}

from react-inputs-validation.

where is "mini-css-extract-plugin": "^0.4.0", ?
my versions are

  "devDependencies": {
    "add-asset-html-webpack-plugin": "^3.0.1",
    "babel-core": "^6.2.1",
    "babel-eslint": "^8.0.1",
    "babel-loader": "^7.1.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.4",
    "cssnano": "^3.10.0",
    "empty-module": "^0.0.2",
    "eslint": "^4.1.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-react": "^7.1.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^4.0.0-alpha.2",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.5.0",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-simple-vars": "^4.1.0",
    "sass-loader": "^6.0.2",
    "style-loader": "^0.19.0",
    "stylelint": "^8.2.0",
    "stylelint-config-standard": "^17.0.0",
    "uglifyjs-webpack-plugin": "^1.2.2",
    "url-loader": "^0.6.2",
    "webpack": "^4.19.1",
    "webpack-assets-manifest": "^2.0.0",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.4"
  }

from react-inputs-validation.

where is "mini-css-extract-plugin": "^0.4.0", ?
my versions are

  "devDependencies": {
    "add-asset-html-webpack-plugin": "^3.0.1",
    "babel-core": "^6.2.1",
    "babel-eslint": "^8.0.1",
    "babel-loader": "^7.1.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.4",
    "cssnano": "^3.10.0",
    "empty-module": "^0.0.2",
    "eslint": "^4.1.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-react": "^7.1.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^4.0.0-alpha.2",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.5.0",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-simple-vars": "^4.1.0",
    "sass-loader": "^6.0.2",
    "style-loader": "^0.19.0",
    "stylelint": "^8.2.0",
    "stylelint-config-standard": "^17.0.0",
    "uglifyjs-webpack-plugin": "^1.2.2",
    "url-loader": "^0.6.2",
    "webpack": "^4.19.1",
    "webpack-assets-manifest": "^2.0.0",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.4"
  }

Yes you right, I accidentally copied the wrong file, in any case I copied your dependencies but I still get the same error.

from react-inputs-validation.

@fordcrees Please create a repo for this then

from react-inputs-validation.