require("glamorous").default undefined?

[kokjinsam]

• glamorous version: 3.11.1
• glamor version: 2.20.4
• react version: 15.5.4

What you did:

I'm creating an UI component package written in Typescript.

What happened:

The UI component is written in ES6. Then Typescript compiles ES6 code to ES5. But it throws error when using the package.

Here's the compiled ES5 code:

Problem description:

The error says that glamorous.default is undefined

[kentcdodds]

Ah, that's interesting that TypeScript does that... 🤔

So here's the deal with our various dist files. The main in the package.json points to dist/glamorous.cjs.js which exports itself as a normal CJS module (so it doesn't have a default). With babel this isn't a problem because of the interopRequireDefault thing that it does. With webpack this isn't a problem, because it picks up the module config in our package.json which points to dist/glamorous.es.js and it can consume the ESModules. What do we need to do to make things work well with TypeScript?

[kokjinsam]

I'm not sure what can be done. Either there's something wrong with the Typescript definition or Typescript itself. Looking through SO, I found this, which is very similar to this case.

Edited: But the proposed solution on SO doesn't seem like a valid ES6 import statement

[kentcdodds]

Feel free to open a PR to update whatever we need to so we can support TypeScript well!

[dragosbulugean]

having the same issue with typescript. solution is to use require instead of import, but you lose autocomplete and it looks ugly next to all your imports.

[kentcdodds]

Are you all using webpack?

[ErikCupal]

I know I have been having problems with this some time ago (because of some different library). I solved it by compiling typescript to ES6 (with ES modules - no CJS), running through Babel and finally through Webpack (of course using ts-loader and babel-loader). I'm using it since them and got no problems 😃. In my opinion it is better solution for now than importing using require.

If anyone needs help with this, I can share my webpack.config.js, .babelrc and tsconfig.json 😉.

[kokjinsam]

@dragosbulugean you're using import glamorous = require("glamorous");? I'm hesitant to do that because that does not seem like a valid ES6 import statement.

@kentcdodds you mean to bundle the package? or consuming the package?

@ErikCupal that's what I'm doing right now. How are you dealing with type definitions? BTW, do you think that there could be a mistake on how we do exports in the type definitions that is causing this problem?

[dragosbulugean]

@kentcdodds I am using fuse-box
@sammkj const glamorous = require("glamorous") (it works but doesn't look good and autocompletion doesn't work)

[luke-john]

Just looking into this as have started seeing it on one of our server side renders.

A "solution" could be something as simple as glamorous.default = glamorous before exporting.

https://rollupjs.org/repl?version=0.41.6&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmNvbnN0JTIwZm9vJTIwJTNEJTIwKCklMjAlM0QlM0UlMjAlN0IlNUNuJTVDdGNvbnNvbGUubG9nKCdmb28nKSU1Q24lN0QlNUNuJTVDbmZvby5kZWZhdWx0JTIwJTNEJTIwZm9vJTVDbiU1Q25leHBvcnQlMjBkZWZhdWx0JTIwZm9vJTIyJTdEJTVEJTJDJTIyb3B0aW9ucyUyMiUzQSU3QiUyMmZvcm1hdCUyMiUzQSUyMmNqcyUyMiUyQyUyMm1vZHVsZU5hbWUlMjIlM0ElMjJteUJ1bmRsZSUyMiUyQyUyMmdsb2JhbHMlMjIlM0ElN0IlN0QlMkMlMjJtb2R1bGVJZCUyMiUzQSUyMiUyMiU3RCUyQyUyMmV4YW1wbGUlMjIlM0FudWxsJTdE

I'll open a PR up shortly.

Related Rollup issue:

rollup/rollup#1156 (comment)

[kokjinsam]

I just wanna make a note here for any future reference.

For those who encounter this problem, please make sure that babel-plugin-module-exports is not used when compiling the library or project. babel-plugin-module-exports adds module.exports = exports['default']; which is not compatible with Typescript.