felipecrv / jsx-requirejs-plugin Goto Github PK

thanks

Exception at https://github.com/philix/jsx-requirejs-plugin/blob/master/js/JSXTransformer-0.10.0.js#L10386

Tracing dependencies for: all.components
Error: Error: Loader plugin did not call the load callback in the build:
jsx:
  jsx!components/helloworld: Error: fromText eval for jsx!components/helloworld failed: SyntaxError: Unexpected token <
http://requirejs.org/docs/errors.html#fromtexteval
Module loading did not complete for: all.components, components/component.menu, components/extension.menu
    at Function.build.checkForErrors (C:\Code\js\build\r.js:27237:19)

In order to build I surrounded _dereq_('source-map') with try .. catch:

  if (options.sourceMap) {
    try {
      var SourceMapGenerator = _dereq_('source-map').SourceMapGenerator;
      state.g.sourceMap = new SourceMapGenerator({file: 'transformed.js'});
    } catch (e) {
      // ignored
    }
  }

Hi there,

I'm currently trying to r.js optimize my react-app, but it seems like something is wrong with my config as the optimizer still tries to interpret the .jsx-file. The normal require.js-Module works like a charm.
I'm using r.js 2.1.14 and react 0.10. Any idea?

The Error(tm):

Tracing dependencies for: main
Error: Error: Loader plugin did not call the load callback in the build:
jsx:
  jsx!app/App: Error: fromText eval for jsx!app/App failed: SyntaxError: Unexpected token <
http://requirejs.org/docs/errors.html#fromtexteval
Module loading did not complete for: main
    at Function.build.checkForErrors (c:\Users\<user>\AppData\Roaming\npm\node_modules\requirejs\bin\r.js:27416:19)

/js/main.js

require.config({
    baseUrl : "js/",
    paths : {
        "jquery" : "vendor/jquery-1.11.1.min",
        "lodash" : "vendor/lodash-2.41.min",
        "helper" : "app/helper",
        "react"  : "vendor/react.min",
        "jsx"    : "vendor/jsx",
        "JSXTransformer" : "vendor/JSXTransformer"
    },
    jsx : {
        fileExtension : '.jsx'
    },
    waitSeconds: 0
});

require(['jquery','lodash','helper'], function() {
    require(['react', 'jsx!app/App'], function(React, App){
        React.renderComponent(
            App(),
            document.getElementById('reactcontent'));
    });
});

/build.js

({
    appDir: "./js",
    baseUrl: ".",
    mainConfigFile: "./js/main.js",
    removeCombined: true,
    findNestedDependencies: true,
    dir: "./dist",
    modules: [
      {
        name: "main",
        exclude: ["react","jsx"]
      }
    ],
    onBuildWrite: function (moduleName, path, singleContents) {
        return singleContents.replace(/jsx!/g, '');
    },
})

file structure

App
|   build.js
|   app.html
+---js
|   |   main.js
|   |   require.js
|   |   text.js
|   +---vendor
|   |       JSXTransformer.js
|   |       react.min.js
|   |       react-with-addons.js
|   |       react-with-addons.min.js
|   |       jquery-1.11.1.min.js
|   |       jsx.js
|   |       lodash-2.41.min.js
|   |       lodash.js
|   |       react.js
|   \---app
|           App.jsx
|           helper.js

When having a code like:
var {className, ...other} = this.props;

I'm getting this error:
Uncaught Error: fromText eval for jsx!component failed: SyntaxError: Unexpected token {

Per this blog post:

http://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

Looks like JSXTransformer is being deprecated and we should be looking at BabelJS for JSX transpiling. I am still wrapping my head around how this will work with requirejs in browser and also using r.js compiler but figure I would open the issue to start some discussion around it

Hi,

More of a curiosity question than anything:

Is it necessary to include text (or whatever pathname someone is using for requirejs text plugin) to the exclude option in the modules definition?

Shouldn't you be able to just put text in the stubModules only?

(I am using the inlineText : true and optimizeAllPluginResources : true)

hey there

I am having trouble getting this to work:

require(['jsx!xxx'],function(file){
    //do something with 'file'
});

however, this works:

define(['jsx!xxx'],function(file){

   //do something with 'file'
});

is there some reason why this might happen with your plugin?

here's my config

requirejs.config({
    enforceDefine: false,
    waitSeconds: 7,
    baseUrl: '/static',
    paths: {
        'text': 'vendor/text',
        'jsx': "vendor/jsx",
        'JSXTransformer': 'vendor/JSXTransformer',
        'react':'vendor/react-with-addons',

    },

    'shim': {

    }

});

please let me know if you have any ideas thanks

Currently, update of jsx-requirejs-plugin requires changes in RequireJS configuration, i.e. you should find in your project all occurrences of

paths: {
    //...
    "JSXTransformer": "JSXTransformer-0.X"
}

and replace them with

paths: {
    //...
    "JSXTransformer": "JSXTransformer-0.Y"
}

This could be troublesome in some cases, e.g. when you have multiple configurations, or configuration script is stored somewhere on server side (e.g. in JSP page or in C# control).

Update process could be easier when file name doesn't include version number.

The README states that jsx and JSXTransformer should be excluded, but the code snippet excludes react and jsx. Which one is correct?

Hi,

Saw that React 0.13 was released with a new JSX Transformer. Were you going to update your existing one or want me to add PR? Believe I can just do the same changes you made with 0.12.2

used JSXTransformer 0.11.2 and r.js build fails with error message:

{ [ReferenceError: document is not defined]
     moduleTree:
      [ 'JSXTransformer',
        'jsx',

Hi,
I tried following the instructions in my own project and got this error, but I also get it if I just clone your project and open up index.html, so it's not just my code. I'm stuck working out what's going on here. Any advice?

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined @ react-with-addons.js:9729
autoGenerateWrapperClass @ react-with-addons.js:9729
getComponentClassForElement @ react-with-addons.js:13744
. . .
(anonymous function) @ main.js:21

I added the JSXTransformer.js file to my Play application and added the paths to to require.config
I keep getting Missing semicolon Errors:

~/jsx-requirejs-plugin [master●] » node r.js -o build.js

Tracing dependencies for: main

Tracing dependencies for: react

Tracing dependencies for: jsx
Uglifying file: /Users/joelkuiper/jsx-requirejs-plugin/build_js/JSXTransformer-0.10.0.js
toTransport skipping /Users/joelkuiper/jsx-requirejs-plugin/build_js/components/Timer.js: Error: Line 13: Unexpected token <
Error: Cannot parse file: /Users/joelkuiper/jsx-requirejs-plugin/build_js/components/Timer.js for comments. Skipping it. Error is:
Error: Line 13: Unexpected token <
Uglifying file: /Users/joelkuiper/jsx-requirejs-plugin/build_js/jsx.js
Uglifying file: /Users/joelkuiper/jsx-requirejs-plugin/build_js/main.js
Uglifying file: /Users/joelkuiper/jsx-requirejs-plugin/build_js/react-with-addons-0.10.0.js
Uglifying file: /Users/joelkuiper/jsx-requirejs-plugin/build_js/require.js
Uglifying file: /Users/joelkuiper/jsx-requirejs-plugin/build_js/text.js

main.js
----------------
jsx!components/Timer
main.js

It leaves the Timer untouched.

It's still necessary to add a specific r.js configuration hack for JSX files to build properly.

onBuildWrite: function (moduleName, path, singleContents) {
  return singleContents.replace(/jsx!/g, '');
},

See README.

The plugin should be written in a manner that makes it unnecessary.

See #1 to understand why this is tricky.

I noticed this repo uses version 0.13.3 without react-dom.js. It is a bit tricky now that react-dom is needed and requires react.js to be loaded before. In a sequential arrangement, how will you do this?

Hi,

This plugin works great when I used it to write reactjs with requirejs for my project, but I find it hard to write unit tests using karma. Is there a way to write converted js files to build directories so that I can directly run karma tests on them?

Thanks

It's easier to remember just the React version instead of two unrelated versions (e.g. 0.13.1 for React and 0.5.3 for jsx-requirejs-plugin) when maintaining bower.json.

Repository tag 0.5.0 does not contain bower.json, so bower install jsx-requirejs-plugin#0.5.0 issues warnings

bower jsx-requirejs-plugin#0.5.0     invalid-meta jsx-requirejs-plugin is missing "main" entry in bower.json
bower jsx-requirejs-plugin#0.5.0     invalid-meta jsx-requirejs-plugin is missing "ignore" entry in bower.json