petehunt / jsx-loader

JSX loader for webpack

don't use this!

use babel-loader instead.

jsx-loader's Issues

move to reactjs org

I think we talked about this before, but it should probably be there.

ES6 module support

Please add support for ES6 modules.

Duplicated displayName property

I run in this error when building using strict mode. I'm using React 0.10 but it happened also with the 0.9.

ERROR in Example.jsx
Module parse failed: ./node_modules/jsx-loader/index.js!Example.jsx Line 7: Duplicate data property in object literal not allowed in strict mode
 var Example = React.createClass({displayName: 'Example',displayName: 'Example',

After some investigation, I've found it happens when I declare my component in this way:

'use strict';
var Example = React.createClass(/*...*/)
module.export = Example;

it does not happen if I do:

'use strict';
module.export = React.createClass(
  displayName: 'Example'
 /* ... */
);

Not a blocker, but i spent too much time debugging it so others may find this useful :)

Pass --target option for harmony transposing.

With the upcoming release of React v0.13.0, there is additional harmony support coming. Part of that is passing --target (es3|es5) to the jsx CLI. This should be added to the jsx-loader as an option.

Harmony throwing warnings when compiling

All these logs from warnings are getting really annoying, and I can't find any reason why they would be happening. They only started recently (like 2 weeks) though -- no idea what is causing them.

webpack.config.js (loaders)

{
           test: /\.jsx?$/,
           loaders: ['react-hot', 'jsx-loader?harmony'],

           include: [
               // everything local
               path.resolve(__dirname, "js"),

               // troublemakers
               path.resolve(__dirname, "node_modules/react-progressbar/index.js"),
           ],

}

Logs

WARNING in ./~/harmony/~/formidable/lib/incoming_form.js
Critical dependencies:
1:43-50 require function is used in a way, in which dependencies cannot be statically extracted
 @ ./~/harmony/~/formidable/lib/incoming_form.js 1:43-50

WARNING in ./~/harmony/~/formidable/lib/incoming_form.js
Critical dependencies:
1:0-13 the request of a dependency is an expression
 @ ./~/harmony/~/formidable/lib/incoming_form.js 1:0-13

WARNING in ./~/harmony/~/formidable/lib/file.js
Critical dependencies:
1:43-50 require function is used in a way, in which dependencies cannot be statically extracted
 @ ./~/harmony/~/formidable/lib/file.js 1:43-50

WARNING in ./~/harmony/~/formidable/lib/file.js
Critical dependencies:
1:0-13 the request of a dependency is an expression
 @ ./~/harmony/~/formidable/lib/file.js 1:0-13

WARNING in ./~/harmony/~/formidable/lib/querystring_parser.js
Critical dependencies:
1:43-50 require function is used in a way, in which dependencies cannot be statically extracted
 @ ./~/harmony/~/formidable/lib/querystring_parser.js 1:43-50

WARNING in ./~/harmony/~/formidable/lib/querystring_parser.js
Critical dependencies:
1:0-13 the request of a dependency is an expression
 @ ./~/harmony/~/formidable/lib/querystring_parser.js 1:0-13

Avoid dragging all of React along?

Inhaling a single JSX file with jsx-loader causes ~600KB of React to be dragged through the minifier, taking 4-7 seconds on my laptop. Is there some way to avoid this? I'd prefer to get my copy of React from the CDN.

Tagged releases

Hi. Can you tag a release in GitHub so that jsx-loader can be made into a WebJar?

Source filename is not included in jstransform parse errors

My webpack configuration is like:

      bail: true,
      loaders: [
        {
          test: /\.jsx$/,
          loader: 'jsx-loader?harmony&stripTypes'
        }
      ]

When there is a syntax error in a .jsx file, the error raised has the line number, but not the file, eg:

/Users/grant/code/webpack-project/gulpfile.js:125
      throw new $.util.PluginError('webpack', err);
            ^
ModuleBuildError: Module build failed: Error: Parse Error: Line 3: Unexpected identifier
    at throwError (/Users/grant/code/webpack-project/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2644:21)
    at throwUnexpected (/Users/grant/code/webpack-project/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2688:13)
    at consumeSemicolon (/Users/grant/code/webpack-project/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2829:13)
    at parseVariableStatement (/Users/grant/code/webpack-project/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:4600:9)
    at parseStatement (/Users/grant/code/webpack-project/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:5402:24)
    at parseSourceElement (/Users/grant/code/webpack-project/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6139:24)
    at parseProgramElement (/Users/grant/code/webpack-project/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6185:16)
    at parseProgramElements (/Users/grant/code/webpack-project/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6217:29)
    at parseProgram (/Users/grant/code/webpack-project/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:6230:16)
    at Object.parse (/Users/grant/code/webpack-project/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:7566:23)
    at DependenciesBlock.onModuleBuildFailed (/Users/grant/code/webpack-project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:288:19)
    at nextLoader (/Users/grant/code/webpack-project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:248:31)
    at /Users/grant/code/webpack-project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:15
    at runSyncOrAsync (/Users/grant/code/webpack-project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:171:4)
    at nextLoader (/Users/grant/code/webpack-project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:268:3)
    at Storage.finished (/Users/grant/code/webpack-project/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at fs.js:271:14
    at /Users/grant/code/webpack-project/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:104:5
    at Object.oncomplete (fs.js:107:15)

I'm not 100% clear how the Webpack loaders work, but my understanding is that the jstransform will simply get a stream and not have any possible understanding of the original file, and that this jsx-loader is the place that can report this.

Check jsx pragma or extensions for performance

Only call React.transform on .jsx file or files with /** @jsx.

if(/\.jsx$/.test(this.resourcePath) ||
   /^\/\*\*?\s*@jsx/.test(source))

Harmony: support "let" and default parameters

One of the nice things about ES6 is to have methods with default parameters.

When I use it, the jsx-loader failes:

}

gives:
harmony!/actions.jsx Line 12: Unexpected token =
You may need an appropriate loader to handle this file type.

The same goes for the "let" keyword which defines a locally scoped var.

Source map support

I don't think source maps work with this out of the box. They should.

Does jsx-loader support ES6 Spread operator ...

Does jsx-loader support ES6 Spread operator (...)
I want to use "react-style" but it uses the spread operator and I get an "Unexpected token ." has soon has I require it.
I'm using the harmony flag: {test: /.jsx$/, loader: 'jsx-loader?harmony'}

Deprecate the package on npm registry

Babel is handling jsx loading now.

But most users will not notice this if they just install it via npm i --save jsx-loader. @petehunt If you could just npm deprecate jsx-loader (reference), so that it informs cli-only users of this deprecation.

Thanks :)

Too loose dependency declaration on react-tools

jsx-loader now has "react-tools": ">= 0.12.1" which isn't right because 0.x releases can contain backward incompatible changes (according to semver) and an app which depends on jsx-loader can be affected even if it pinned jsx-loader to some particular version.

This can't be solved by pinning react-tools dependency in an app because jsx-loader depends on react-tools itself and... you know, this is Node.js.

ES6 default parameter support

https://babeljs.io/docs/learn-es2015/#default-rest-spread

es6 syntax does not work between the {} of jsx code

For example, if you inline vars below, the key is set to an incorrect value.

      var posKey = `pos:${key}`;
      var retKey = `ret:${key}` ;
      rowCells.push([
        <Cell item={productPositionItem} key={posKey} />,
        <Cell item={productReturnItem} key={retKey} />
      ]);

Source maps are hidden behind a flag instead of being configured by Webpack

Webpack lets loaders know if user wishes to enable source maps.
Loaders can check whether source maps are enabled by looking at this.sourceMap property.

Current implementation of source map in jsx-loader doesn't look at this property and instead turns on if ?sourceMap is specified in query, which is not documented in README. This means most users are unaware source maps are supported now, because even if they enabled them in Webpack config, they still won't be emitted.
#25, a one-line pull request, addresses this by using this.sourceMap supplied by Webpack instead of undocumented ?sourceMap parameter. It's rather a trivial change and it hasn't been merged for a month, even after a version bump, so I wonder if there are any issues with it?

Harmony (ES6) of iterator not supported

Hello,

I am trying to use ES6's "of" keyword to iterate over an array, but it is not working.
I am getting the following error:

Using let, doesn't seem to work either, but the error is only during runtime.
Thanx,
Omer

example needed

Hi Pete
can you provide me with an example on how to setup the loader?

Move react-tools to peerDependencies?

We won't have to update jsx-loader again and again ...

npm package

Hi Pete
Can you publish a npm package?

Use jsx-loader is correct and babel is wrong

loaders: [{
            test: /\.js$/,
            loaders: [
                'babel-loader?presets[]=react'
            ],
            exclude: /node_modules/,
}]

It is wrong.

loaders: [{
            test: /\.js$/,
            loaders: [
                'jsx-loader?insertPragma=React.DOM&harmony'
            ],
            exclude: /node_modules/,
}]

It is correct!