classNames is not defined

Question

I am newbie in react development and trying to understand how classNames work in react.

This is the react code from my book. I just copied it.

const MOUNT = document.getElementById('root');
class App extends React.Component {
  render() {
    const klasses = classNames({
      box: true, // always apply the box class
      alert: this.props.isAlert, // if the prop is set
      severity: this.state.onHighAlert, // with state
      timed: false // never apply this class
    });
    return React.createElement(
      'div',
      {className: klasses},
      React.createElement('h1', {}, 'Hello world')
    );
  }
}
ReactDOM.render(React.createElement(App, {}), MOUNT);

I included script file with this code to html and browser console shows such error.

app.js:4 Uncaught ReferenceError: classNames is not defined
at App.render (app.js:4)
at finishClassComponent (react-dom.js:11320)
at updateClassComponent (react-dom.js:11297)
at beginWork (react-dom.js:11676)
at performUnitOfWork (react-dom.js:13644)
at workLoop (react-dom.js:13753)
at HTMLUnknownElement.callCallback (react-dom.js:1527)
at Object.invokeGuardedCallbackDev (react-dom.js:1566)
at invokeGuardedCallback (react-dom.js:1423)
at performWork (react-dom.js:13871)

what is the problem?

@Derek I don't know. As I said this code is not mine. Just copied it. Probably it is not defined. I am reading e-book and downloaded all their source code. This is only one js code which I found on this chapter. — kust kust, Jul 05 '18 at 18:13

score 7 · Accepted Answer · answered Jul 05 '18 at 18:17

7

So, I think you'll want to install the classnames npm module to bind conditional classes defined in an object.

https://www.npmjs.com/package/classnames

npm i classnames --save

Next you'll want to require that in your .js / .jsx file before use.

import classNames from 'classnames';

Then use the module to bind your classes to the React Element.

import classNames from 'classnames';
const MOUNT = document.getElementById('root');
class App extends React.Component {
  render() {
    const klasses = classNames({
        box: true, // always apply the box class
        alert: this.props.isAlert, // if the prop is set
        severity: this.state.onHighAlert, // with state
        timed: false // never apply this class
    });
    return React.createElement(
      'div',
      {className: klasses},
      React.createElement('h1', {}, 'Hello world')
    );
  }
}
ReactDOM.render(React.createElement(App, {}), MOUNT);

Hope this helps, looks like Tholle got there first.

answered Jul 05 '18 at 18:17

Michael Abeln

2,518
10
20

do you know difference between npm i classnames --save and npm i -S classnames? I tried both and I don't see any difference – kust kust Jul 05 '18 at 18:26
They're the exact same statement! -S is just shorthand for --save, the same way npm i is just shorthand for npm install – Michael Abeln Jul 05 '18 at 18:29
Thanks. I tried the console command and added import on the top of my app.js file. but my chrome 67 browser shows Uncaught Syntaxerror.. – kust kust Jul 05 '18 at 18:36
Should I do npm install before npm install -S classnames? – kust kust Jul 05 '18 at 18:38
are you using babel to transpile your js files from es6 to es5? if not use change the import statement to: var classNames = require("classnames") LMK if this outputs any errors to your console – Michael Abeln Jul 05 '18 at 18:41
1

added type=text/babel to my script. Thanks. Error is disappeared! – kust kust Jul 05 '18 at 18:54
The actual code for the chapter didn't even include a package.json. So probably best to do an npm init -y first before the npm i classnames -S – JGFMK Dec 23 '20 at 18:57

score 5 · Answer 2 · answered Jul 05 '18 at 18:12

5

classnames is a library that you need to install and import into your module. Try npm i -S classnames in your shell, and then import classNames from 'classnames'; at the top of your JavaScript file.

answered Jul 05 '18 at 18:12

Tholle

108,070
19
198
189

In my react experiences - react/gatsby for react/react native - i've never had to import classNames... – Stephen Tetreault Jul 05 '18 at 18:14
1

@StephenTetreault well its not native to react so I'm not sure what you're using that bundles it with it – Derek Pollard Jul 05 '18 at 18:14
I did npm i -S classnames. The name of the js file is app.js. I added import on the top of the app.js and my browser shows unexpected identifier. – kust kust Jul 05 '18 at 18:24

score 1 · Answer 3 · answered Aug 11 '18 at 04:57

1

The answers above work but you need change the line that imports app.js in your index.html file:

<script type="module" "src="app.js"></script>

The suggestions above worked for me (I am reading the same React book as your).

answered Aug 11 '18 at 04:57

Andres Moreno

61
1
2

Good solution. But you run into CORS roadblock when told to use file protocol. Per the instructions. And on a Mac you have to preface all the scripts with . to be found. Code sucks in that chapter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script – JGFMK Dec 23 '20 at 19:18

score 0 · Answer 4 · answered Dec 23 '20 at 21:02

0

Per the comment from @kust kust you need to add type="text/babel" to the <script> tag for app.js.
You need to update all paths to be relative ... from / to ./

answered Dec 23 '20 at 21:02

JGFMK

8,425
4
58
92

classNames is not defined

4 Answers4

Linked