podio / requirejs-react-jsx

A RequireJS plugin for loading jsx in development and compiling (with r.js). Supports bundling and 1:1 source maps in development and production.
MIT License
104 stars 20 forks source link

Missing source in debugger? #8

Closed matthewrbrooks closed 9 years ago

matthewrbrooks commented 9 years ago

I've just switched from a jsx --watch approach to trying requirejs-react-jsx

Everything is working fine - apart from I have no transformed .jsx->.js source in the debugger - the only tabs available under Sources are my .js files.

Is this to be expected or am I missing something?

Thanks

srn commented 9 years ago

What version of React are you running?

matthewrbrooks commented 9 years ago

Installed using bower... "react": "~0.13.1",

srn commented 9 years ago

Can you try adding inlineSourceMap to the transformOptions in the config?

srn commented 9 years ago

Seems like I forgot to update readme.md with the the inlineSourceMap option.

Edit: Updated here https://github.com/podio/requirejs-react-jsx/commit/9806be6c20ea440cf7bec925a28d1b52ec84f9ec

Munter commented 9 years ago

Just published v0.12.3 which also has a small change in how we do the source map pragma. Might have an influence as well

matthewrbrooks commented 9 years ago

Søren, Munter - thanks for the quick replies!

I've added inlineSourceMap but still only seeing my main.js... here it is, just in case I'm doing anything stupid.

requirejs.config({
    paths: {
        'react': 'bower_components/react/react-with-addons',
        'jquery': 'bower_components/jquery/dist/jquery.min',
        'JSXTransformer': 'bower_components/react/JSXTransformer',
        'jsx': 'bower_components/requirejs-react-jsx/jsx',
        'text': 'bower_components/requirejs-text/text'
    },
    shim : {
        'react': {
            'exports': "React"
        },
        'JSXTransformer': 'JSXTransformer'
    },
    jsx: {
        fileExtension: '.jsx',
        transformOptions: {
            harmony: true,
            stripTypes: false,
            inlineSourceMap: true
        },
        usePragma: false
    }
});

requirejs.onError = function(err) {
    console.log(err.requireType);
    console.log('modules:' + err.requireModules);
    throw err;
}

require(['jsx!app'], function(app) {
    app.go();
});
matthewrbrooks commented 9 years ago

Oh - that didn't work very well. I'm a github newbie, there's probably a better way of including formatted source!

srn commented 9 years ago

I just formatted it for you :)

srn commented 9 years ago

Could you update the requirejs-react-jsx version in bower to 0.12.3?

matthewrbrooks commented 9 years ago

OK - I've done that. Still no joy I'm afraid!

Confirmed my bower.son says "requirejs-react-jsx": "~0.12.3"

Just in case - the .bower.json finishes with a reference to ~0.12.2, despite the tag being v0.12.3... could it be pulling the old version because of this (I don't know how these files work of course)

    "tag": "v0.12.3",
    "commit": "9a78aa3d44aa9fc88c159e65126a7a8d87e9e318"
  },
  "_source": "git://github.com/podio/requirejs-react-jsx.git",
  "_target": "~0.12.2",
  "_originalSource": "requirejs-react-jsx"
}
srn commented 9 years ago

React changed the way they do source maps, so they no longer provide a toJSON method on the source map, as it just the mapping now instead. Here's the fix: https://github.com/podio/requirejs-react-jsx/commit/95c2661ea579781f88e1a42b5e8976f9f78df702

Could you update requirejs-react-jsx to 0.13.1 and try again?

matthewrbrooks commented 9 years ago

Have done. I've confirmed the fix is there - looked at source and added a console.log just to be sure, which is being hit, producing "app.jsx scripts/app.jsx"

            console.log(sourceMap.file, sourceMap.sources[0]);
            content += "\n//# sourceMappingURL=data:application/json;base64," + btoa(JSON.stringify(sourceMap));

but still no joy - debugger Sources pane still only has three tabs - (index) require.js main.js

To confirm, current bower config

  "dependencies": {
    "react": "~0.13.1",
    "requirejs": "~2.1.16",
    "jquery": "~2.1.3",
    "requirejs-react-jsx": "~0.13.1"
  }
srn commented 9 years ago

This is what it looks like to me taking the example from readme.md

http://i.imgur.com/upv8B0g.png

matthewrbrooks commented 9 years ago

Right, I will put that together and see if I get the same thing.

matthewrbrooks commented 9 years ago

The readme.md example works fine, although I had to rename app.js to app.jsx for it to work.

My code also now works fine! Whether this is a result of your fix or a bit of user error, I'm not sure. I was expecting the .jsx to just turn up in the tabs on the RHS of the Sources view - but I hadn't dived into the treeview and opened them.

(EMBARRASSED FACE)

MANY thanks for talking me through to a solution to what I expect was my problem in the first place...

srn commented 9 years ago

No problem, glad to hear it worked out.