trying to switch from commonjs to system, everything blows up..

[born2net]

I am not sure if this is a system.js bug, jspm bug, or a bug in my brain, but all is working great when I was on commonjs in my jspm.config.js, now I am trying to make a switch over to system so I can use hot-reload, but everything blows up.

this is the change I did:

SystemJS.config({
  transpiler: "plugin-typescript",
  typescriptOptions: {
    "module": "system",
    "emitDecoratorMetadata": true,
    "tsconfig": true,
    "sourceMap": true
  },
  packages: {
    "StudioDashboard": {
      "main": "StudioDashboard.js"
    },
   ....

to use module system

and before with commonjs all worked, but now I get:

I can't even begin to think where to debug this...

regards

Sean

[aluanhaddad]

Can you post your tsconfig.json?

[born2net]

sure thing. here as well as the rest of the project: https://github.com/born2net/studioDashboard/blob/master/tsconfig.json https://github.com/born2net/studioDashboard https://github.com/born2net/studioDashboard/blob/master/jspm.config.js

not that I switched back to commonjs in the above links, but besides that all is the same config

regards

[guybedford]

When you switch from CommonJS modules to System modules the behaviour of circular references changes. You may find middleware is undefined because the module it is importing from in turn indirectly imports the module that is importing it.

If it's not that though, it may be to do with the handling of default exports. Someone with more TypeScript experience may be able to advise further.

[aluanhaddad]

I'll take a closer look later on but you are importing the Redux thunk middleware incorrectly. You are using namespace syntax:

import * as ns from 'path';

This will not import the callable which is default exported from the module. Try:

import m from 'module';

Note that I'm using namespace here in the JavaScript sense and not the TypeScript sense. CommonJS imports work differently because the object itself is exported as the module and returned by require.

[born2net]

tx for looking into this. if I change to

import {thunkMiddleware} from 'redux-thunk';

I get:

Error:(6, 9) TS2305: Module '"redux-thunk"' has no exported member 'thunkMiddleware'.

I would not mind hiring any one of you to help me get this resolved. the project can be installed and run in under a minute.

https://github.com/born2net/studioDashboard

git clone https://github.com/born2net/studioDashboard.git
cd studioDashboard
npm install jspm@beta -g
npm install

and would be HAPPY to pay for your time to fix this and convert the project to system from commonjs.

tx again!!!!!

Sean.

[aluanhaddad]

Try

import thunkMiddleware from 'redux-thunk';

The module does not have an export named thunkMiddlewhere, it has an export named default. The import name from module is syntactic sugar for

import {default as thunkMiddleware} from 'redux-thunk';

[born2net]

I tried both: import {default as thunkMiddleware} from 'redux-thunk'; and import thunkMiddleware from 'redux-thunk'; first with commonjs and next with'system configured in tsconfig.js and in jspm.config.js and in both cases I got the same errors as my image snapshot above... :(

anything else I can try? again it would be my pleasure to paypal a thank you note for $100 if we can get this fixed...

tx again,

Sean.

[guybedford]

@born2net if you do System.import('redux-thunk').then(function(m){ console.log(m.default); }) do you get the right function?

[born2net]

yes the function is in "m" but default is undefined

:

[guybedford]

@born2net then it sounds like you do have a circular reference somewhere, because the only time the default would be undefined and then later defined is in that senario.

[born2net]

I checked and I don't see any imports inside redux-thunk that would cause a circular reference. it's gotta be something else :/ that lib is so simple: https://github.com/gaearon/redux-thunk/blob/master/src/index.js

[guybedford]

Ok then it's definitely not that - it's likely purely a wiring problem them. Something that will seem very simple when you know what it is! All about debugging skill at this point unfortunately which is difficult to advise from afar, apart from simply to say use devtools!

[born2net]

tx I will look some more, maybe @aluanhaddad can fork the project? tx again for the time guys, I know you have a lot on your plate

[born2net]

on a diff topic, when I use system instead of commonjs, is moduleId for angular 2 path template resolution no longer supported? as I get am error of:

which works fine if set back to commonjs

tx

[frederikschubert]

In commonjs module.id contains the path to the module. In system format this variable is called __modulename.

[born2net]

tx @frederikschubert, I will try and report back... tx!!!

[aluanhaddad]

@born2net I will take a look tomorrow.

[born2net]

tx sooooo much!!! @aluanhaddad and as I said, be happy to paypal some funds for the efforts...

[born2net]

Hi @frederikschubert any chance to look at the project, I really would like to use hot-reload on ng2 and can't switch to hot-reload until I resolve this issue and change from commonjs to system tx again Sean

[born2net]

by the way I created a branch with all the settings for system @aluanhaddad https://github.com/born2net/studioDashboard/tree/hot-reload

and I run the local server for hot-reload via: node ./server.js and open browser to: http://localhost:9089/src/public/

and for reference: https://github.com/gaearon/redux-thunk/issues/35

[gaearon]

You are using redux-thunk@1.x. The default export has been added in 2.x. This is mentioned as the first paragraph in the README: https://github.com/gaearon/redux-thunk#note-on-2x-update

import thunk from 'redux-thunk'

will work fine with 2.x.

[born2net]

TX @gaearon updating to latest 2.x FIXED this issue... closing and tx for everyone's support.

Sean.

[guybedford]

Thanks @gaearon!