Importing classnames installed via NPM while using Webpack about classnames HOT 15 CLOSED

Because there's not really an "answer" on this thread, I wanted to supply the one that worked for me:

import * as classnames from 'classnames'

from classnames.

@ramarivera

I'm just curious, may I ask you to try this:

import classNames from 'classNames';

If that works, it is related to another bug I issued months ago:
#82 (comment)

from classnames.

@ramarivera
@dcousens

Sure I can help out.
@ramarivera your syntax is wrong, make sure to read the docs and understand how import works.
Especially default imports as described in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Importing_defaults

Correct code would be in your case:

import classNames from 'classnames'

from classnames.

@ramarivera Did you install the latest typings? npm install @types/classnames --save-dev

from classnames.

I tried that, but Typescript compiler says
Module '"classnames"' has no default export.

Just tried it again but got same results :/
(Thanks for the speedy reply!)

from classnames.

I can´t be sure of which of all the things i tried yesterday was, but something fixed it and now it's getting bundled correctly. Again, thanks for the quick replies and sorry for "wasting" your time 👍

from classnames.

I'm using typescript with React and this works for me:

npm i -D @types/classnames
import classNames from 'classnames';

from classnames.

I'm not familiar with webpack to this degree, maybe @AndyOGo could help

from classnames.

That's strange, I mean I use Babel, but that is really weird...

from classnames.

found microsoft/TypeScript#3337

from classnames.

I tried changing the syntax to what that thread provides, to no avail. I also changed my typescript loader from awesome-typescript-loader to ts-loader as suggested but it doesnt work either :(

from classnames.

Nope :( it says that no module with that name can be found

from classnames.

If the above does not fix it, I found this issue:
Importing commonJS modules with es6 imports

from classnames.

Thx @zposten !!! import * as classnames from 'classnames' works for me too.

from classnames.

Whilst this gets rid of the original error I now get:

classnames__WEBPACK_IMPORTED_MODULE_3__ is not a function

TypeError: classnames__WEBPACK_IMPORTED_MODULE_3__ is not a function
    at MyComponent (http://localhost:9009/main.6dc20d2f7c98431509a6.bundle.js:353:740)
    at renderWithHooks (http://localhost:9009/vendors~main.6dc20d2f7c98431509a6.bundle.js:48679:18)
    at mountIndeterminateComponent (http://localhost:9009/vendors~main.6dc20d2f7c98431509a6.bundle.js:50761:13)
    at beginWork (http://localhost:9009/vendors~main.6dc20d2f7c98431509a6.bundle.js:51366:16)
    at performUnitOfWork (http://localhost:9009/vendors~main.6dc20d2f7c98431509a6.bundle.js:55053:12)
    at workLoop (http://localhost:9009/vendors~main.6dc20d2f7c98431509a6.bundle.js:55093:24)
    at renderRoot (http://localhost:9009/vendors~main.6dc20d2f7c98431509a6.bundle.js:55176:7)
    at performWorkOnRoot (http://localhost:9009/vendors~main.6dc20d2f7c98431509a6.bundle.js:56083:7)
    at performWork (http://localhost:9009/vendors~main.6dc20d2f7c98431509a6.bundle.js:55995:7)
    at performSyncWork (http://localhost:9009/vendors~main.6dc20d2f7c98431509a6.bundle.js:55969:3)

Inspecting the imported module object I don't see any usable functions:

{
  Symbol(Symbol.toStringTag): "Module",
  __esModule: true,
  __proto__: Object
}

from classnames.