modules not exported the same way between es5 and es6 builds

[rikkertkoppes]

Working with RC.8 here, I am using the following stack:

typescript 2.1.4
webpack 2.2.1

When packing inferno, I run into issues with how the modules are exported. When working in typescript, the typings from dist-es/index.d.ts are correctly resolved, indicating that, for example, Component is the default export from inferno-component. Typescript build phase works ok.

Next inline is the webpack build phase, which picks up the main field from package.json, pointing to dist/inferno-component.node.js. Which is ok, as I don't want es6 code in browsers just yet.

However, the es5 build exports Component as the root export, which is not how it is expected to be.

This all worked fine with inferno 1.2.2, so this breaks the upgrade path, which I think is not desired

I would suggest aligning the module signature across es5 and es6 builds, unless I am missing something here

[Havunen]

HI @rikkertkoppes module root was dropped away from package.json. Are you using jsnext:main that is non-standard and used for building inferno internally?

[Havunen]

@longlho Any idea what could cause this?

[rikkertkoppes]

No, not using jsnext:main, it's the opposite. Webpack picks out the main field and produces es5 code which is ok, but does not follow the module signature that is expected by typescript (expecting Component as default export, not root export)

When I modified inferno-components package.json and added a module field pointing to the same es6 build (dist-es/index.js), everything gets packed just right. However, that leaves me with es6 in the browser, which is not (yet) desired.

[longlho]

@rikkertkoppes do you have your tsconfig.json & webpack.config.js?

[rikkertkoppes]

Both are handled by grunt, but these are the options set for them

ts:

module: 'commonjs',
target: 'es5',
sourceMap: true,
comments: true

webpack:

entry: "./public/js/dist/main.js",
devtool: "source-map",
output: {
    path: "public/js/",
    filename: "packed.js"
},
//use ts sourcemaps
module: {
    preLoaders: [{
        test: /\.js$/,
        loader: "source-map-loader"
    }, {
        test: /\.json$/,
        loader: "json-loader"
    }]
}

[longlho]

do you mind making a small example repo to demo the issues? Looking at the configs things seem fine

[rikkertkoppes]

Yeah sure, probably after the weekend though

[rikkertkoppes]

here you go: https://github.com/rikkertkoppes/infernoBuildProblem

I included the ts build and the webpack bundle files in the repo. Description in the readme

Just checkout and open the html file, note that the console logs undefined and an error, which is exactly what I observe

[longlho]

awesome thanks!

[longlho]

yeah confirm the prob is that we dist UMD ES5 but type def still assumes it's ES6. The solution is prob to set main as non-rollup (transpiled only) and set browser to the minified file.

@Havunen thoughts?

[Havunen]

@longlho Sounds good to me

[katyo]

I also have an issue with importing default export in typescript.
Is there any workaround to fix that now?
Maybe it would be better avoid default export at all or simply add named export.

Currently default key is missing in the exported module object. I tried to import whole module like this:

import * as h from 'inferno-hyperscript'

In this case I have the function, but typings is missing.
In another case when I import it as usual I have the typings but reference to function is missing (i.e. undefined), because the default key is missing.

I found temporary solution using proxy module, like that:

import {VNode, InfernoChildren} from 'inferno';
import * as h_ from 'inferno-hyperscript';

export interface H {
  (_tag: string | VNode | Function, _props?: any, _children?: InfernoChildren): VNode;
}

export const h: H = h_ as any;

[longlho]

Can you guys try canary tag w/ npm i inferno@canary to see if the issue's fixed?

[moatra]

As of inferno@1.4.2, the main entry point appears to be working correctly. However, for webpack builds for clientside bundling now pick up on the browser entry point. That field for inferno-component points to dist/inferno-component.min.js, which returns the Component UMD but does not have the default property set on the module.

As a temp workaround, you can update resolve.mainFields in your webpack config to ignore the browser entry point (ala mainFields: ["module", "main"]), and it imports the non-minified es5 target that correctly sets the default field.

[Havunen]

yeah I think this is still wrong. When using webpack we should import dist/index.js the non minified or bundled es5 code, and webpack will handle the requires. Then those full bundles (js/min.js) we should send into CDNjs

Anyway it "works" now, so I think this fix is not critical and can wait for 1.5

[TrySound]

@moatra Does it work with webpack-dev-server? I got 'fs' and 'net' are not resolved

[TrySound]

@Havunen I guess it's critical because of webpack-dev-server :)

[Havunen]

@TrySound strange. We are using Webpack Dev server with Inferno also at work, but didn't notice any issue

[TrySound]

This without browser field

./~/debug/src/node.js
Module not found: Error: Can't resolve 'fs' in '...\node_modules\debug\src'
 @ ./~/debug/src/node.js 184:15-28
 @ ./~/debug/src/index.js
 @ ./~/sockjs-client/lib/main.js
 @ ./~/sockjs-client/lib/entry.js
 @ (webpack)-dev-server/client/socket.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/example.js
errors @ client?cd17:119
sock.onmessage @ socket.js:37
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
SockJS._transportMessage @ main.js:272
EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
client?cd17:119 ./~/debug/src/node.js
Module not found: Error: Can't resolve 'net' in '...\node_modules\debug\src'
 @ ./~/debug/src/node.js 191:16-30
 @ ./~/debug/src/index.js
 @ ./~/sockjs-client/lib/main.js
 @ ./~/sockjs-client/lib/entry.js
 @ (webpack)-dev-server/client/socket.js
 @ (webpack)-dev-server/client?http://localhost:8080
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/example.js
errors @ client?cd17:119
sock.onmessage @ socket.js:37
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
SockJS._transportMessage @ main.js:272
EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35

[longlho]

that's bc of debug and modules that export non-browser-compatible entry point in main

[Havunen]

we have one more option, add webpack entry point ... :-)

[Havunen]

somebody add test cases for this

[Havunen]

can you guys try out if latest canary works for you npm i inferno@canary

[thdxr]

The latest canary has fixed the issue for me 👍

[moatra]

Installed inferno@1.5.0-alpha.2f6639f8 and friends:

Observed the following for var ic = require('inferno-component');:

• ic is an es5-friendly function for webpack builds with target='node'✔️
• ic is an es5-friendly function for webpack builds with target='web'✔️
• ic.default is defined and set to the same value as ic for webpack builds with target='node'✔️
• ic.default is defined and set to the same value as ic for webpack builds with target='web'✔️

[Havunen]

I think this is now fixed. Closing. Please comment or file new issue if you guys still have problems with this.