CODEWITHSUNDEEP
javascriptjqueryreactjskeyboard
Monica
Monica

Reputation: 1534

.keyboard is not a function when used with React

I want to get user input from a textarea using jquery keyboard.js.

The keyboard that I am using: https://github.com/Mottie/Keyboard

This is the error I am getting: enter image description here

These are my imports in my file:

import React from "react";
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import jQuery from 'jquery';
import keyboard from '../../../../node_modules/virtual-keyboard/dist/js/jquery.keyboard.js';

And this is my code:

export default class KEyboard extends React.Component {
    ...
    componentDidMount() {
         ...
         jQuery(ReactDOM.findDOMNode(this.refs.keyboard)).keyboard(this.props.options);

this.refs.keyboard is good. already debug it. Same as this.props.options

And this is my webpack.config.js

var path = require('path');
const validate = require('webpack-validator');


var config = {
  entry: './src/index.js',
  output: {
  path: __dirname,
  filename: 'bundle.js'
},
devtool: 'source-map',
eslint: {
  configFile: './.eslintrc'
},
module: {
  preLoaders: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    },
  ],
  loaders: [
    {
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    },
    {
      test: /\.css$/,
      loader: 'style-loader'
    },
    {
      test: /\.css$/,
      loader: 'css-loader',
      query: {
        modules: true,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    },
    /*
    {
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass']
    },
   */
    {
      test: /\.scss$/,
      loader: 'style-loader'
    },
    {
      test: /\.scss$/,
      loader: 'css-loader',
      query: {
        modules: true,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    },
    {
      test: /\.scss$/,
      loader: 'sass-loader'
    },
    /*
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel-loader', 'eslint-loader']
    }
    */
    {
      test: /\.(jpg|png)$/,
      loader: 'file-loader?name=[path][name].[hash].[ext]'
    },
  ]
},
};

module.exports = validate(config);

Upvotes: 0

Views: 774

Answers (2)

Monica
Monica

Reputation: 1534

So, at the end the problem was the version of the virtual keyboard.

I followed the following steps:

  1. npm install --save [email protected]
  2. npm install
  3. npm run build
  4. npm run watch

Opened the project in incognito to make sure there is no cache problem, and it worked!

Upvotes: 0

natnai
natnai

Reputation: 564

Use ProvidePlugin.

...

plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery' }) ]

...

Then in your component, simply refer to jQuery as if it were a global variable on the window object. You can do the same for jquery-ui. Do not import it. The fact that jquery is already on the global scope, and then re-imported in the module, and isn't behaving correctly in the module, would seem to suggest there is a conflict.

ProvidePlugin will cause all other modules that depend on jQuery to extend from a single global instance of jQuery. This should solve your problem. That should solve the jquery-ui problem and your current one as well. Make sure to remove it from your html template(s).

See webpack documentation for more details.

Upvotes: 1

Related Questions