Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught TypeError: mitt is not a constructor #60

Closed
JonWallsten opened this issue Jul 7, 2017 · 7 comments
Closed

Uncaught TypeError: mitt is not a constructor #60

JonWallsten opened this issue Jul 7, 2017 · 7 comments

Comments

@JonWallsten
Copy link

JonWallsten commented Jul 7, 2017

Hi!
Im trying to use mitt in our react project using typescript.
But I get this error in runtime:

Uncaught TypeError: mitt is not a constructor
    at eval (api.ts:11)
    at Object../packages/foo-api/api.ts (bundle.js:10804)
    at __webpack_require__ (bundle.js:672)
    at fn (foo.js:98)
    at eval (index.ts:5)
    at Object../packages/foo-api/index.ts (bundle.js:10817)
    at __webpack_require__ (bundle.js:672)
    at fn (bundle.js:98)
    at eval (Foo.view.tsx:15)
    at Object../packages/foo-ui/Foo.view.tsx (bundle.js:11779)

I'm using ut just like in your example

import * as mitt from 'mitt'
const emitter: mitt.Emitter = new mitt()

When debugging in Dev tools and check mitt it's an object, not a contructor.

Object {__esModule: true, default: function}
   default: function mitt(all )
   __esModule: true
   __proto__: Object

Am I doing something wrong?

@RapidTransit
Copy link

const path = require('path');

    resolve: {
        extensions: ['.ts', '.js', '.tsx', '.less'],
        modules: ['./src', 'node_modules'],
        alias: {
            "mitt": path.resolve(__dirname, './node_modules/mitt/dist/mitt.umd.js')
        }
    },

Webpack loads the ES6 Source (because I think mitt points to it by default), you will need to override the main in mitt's package.json by tweaking the file location in your webpack config.

@developit
Copy link
Owner

Hi there - don't import * as mitt, just import it directly:

import mitt from 'mitt';

@RapidTransit
Copy link

RapidTransit commented Jul 12, 2017

That works with just Webpack but it won't work with just Typescript, when running tests etc.

@JonWallsten
Copy link
Author

@developit "[ts] Module '"mitt"' has no default export."
@RapidTransit I'll try that. Thanks!

@FromTheCodeCave
Copy link

We are converting a component that uses mitt from JavaScript to TypeScript. I installed the last version, 1.1.3, but still encountering "mitt is not a constructor". Followed the TypeScript approach mentioned.

Any recommendations on resolving would be appreciated?

@DavidHooper
Copy link

Here is how you can work around the issue for now without messing with Webpack.

import * as Mitt from 'mitt/dist/mitt.umd';
import { Emitter } from 'mitt';

const emitter = new Mitt() as Emitter;

@developit
Copy link
Owner

developit commented May 29, 2019

For folks encountering this: you need to set compilerOptions.allowSyntheticDefaultImports to true in your tsconfig.json. Doing that will make TypeScript resolve the module's default export the same as Webpack does, so you don't get errors in either:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
  }
}

Update: I'm adding a comment in the type definitions pointing to this issue with an explanation of the cause.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants