Javascript 将jsx转换为js后出现未定义dom错误_Javascript_Reactjs_Babeljs

Javascript 将jsx转换为js后出现未定义dom错误

javascript reactjs

Javascript 将jsx转换为js后出现未定义dom错误,javascript,reactjs,babeljs,Javascript,Reactjs,Babeljs,我创建了一个jsx文件，如下所示 /** @jsx dom */ (function(){ 'use strict'; define([ 'jquery', 'react', 'react-dom' ], function($, React, ReactDOM){ var AppView = React.createClass({ render: function() {

我创建了一个jsx文件，如下所示

  /** @jsx dom */
(function(){
'use strict';

define([
        'jquery',
        'react',
        'react-dom'
    ],

    function($, React, ReactDOM){

        var AppView = React.createClass({
            render: function() {
                return <div>Hello World</div>;
            }
        });

        ReactDOM.render(<AppView />, document.getElementById('dsl-application'));

    });
})();

输出文件如下所示

(function () {
'use strict';

define(['jquery', 'react', 'react-dom'], function ($, React, ReactDOM) {

    var AppView = React.createClass({
        displayName: 'AppView',

        render: function () {
            return dom(
                'div',
                null,
                'Hello World'
            );
        }
    });


    ReactDOM.render(dom(AppView, null), document.getElementById('dsl-application'));
});
})();

问题是我得到了未捕获的引用错误：在浏览器中运行js文件时未定义dom。dom是在转换后添加的。有没有解决这个问题的线索？

要在浏览器中将JSX转换为JS，您需要

browser.JS

来自

babel

。有关简单示例，请参阅

[[根据更多信息更新]]

使用以下文件，然后运行

npm安装

和

webpack

，然后您的

index.html

就可以提供服务了

index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  </body>
</html>

main.jsx

'use strict'

var React = require('react')
var ReactDOM = require('react-dom')
var AppView = require('./component.jsx')

ReactDOM.render(
    <AppView />,
    document.getElementById('example')
);

使用基本的React应用程序也会遇到同样的问题

原来凶手就在我的webpack.config.js里。我有：

插件：[
[“transform react jsx”{
“pragma”：“dom”
}]
]

babel的默认pragma是React.createElement（）

事实上，我没有理由选择这个选项，我只是复制/粘贴了从上面的链接

从文档中，我应该导入我所拥有的“dom”模块指定并确保安装了babel插件jsx

这个插件的文档在这里，并解释了一些关于pragmas的内容

我只需删除“pragma”选项，就可以解决这个问题只需使用默认设置（附加在我的webpack.config.js的一部分以提供更多上下文）：--我使用的是webpack 2.6.1

。。。
模块：{
规则：[{
//一个regexp，它告诉webpack在所有服务器上使用以下加载程序
//.js和.jsx文件
测试：/\.js$/,，
加载器：“巴别塔加载器”，
选项：{
巴别塔：错，
预设：[“es2016”、“反应”、“阶段0”]，
插件：[
[“transform react jsx”]
]
},
//我们绝对不希望巴贝尔把所有的文件都传送到
//节点_模块。这需要很长时间。
排除：/node\u模块/
},
...

我在这里没有看到任何JSX。你能再解释一下你希望哪个插件会在转换后添加

dom

吗？你是对的。我更新了JSX代码。为什么你的代码中有

/**@JSX dom*/

？因为它是一个JSX文件。我应该删除它吗？我每天都使用JSX，从来没有使用过。我会尝试删除我的t，看看会发生什么。我不打算在浏览器中转换它。我想预编译它。我会尝试一下，让你知道，如果它有帮助，我肯定会接受它作为答案。目前我们改变了方法，以满足最后期限。我会尽早尝试

{
  "name": "another",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  }
}

'use strict'

var React = require('react')
var ReactDOM = require('react-dom')
var AppView = require('./component.jsx')

ReactDOM.render(
    <AppView />,
    document.getElementById('example')
);

'use strict'

var React = require('react')

var AppView = React.createClass({
    render: function(){
        return(<h1>Hello, world!</h1>)
    }
});

module.exports = AppView

module.exports = {
    entry: './main.jsx',
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['react', 'es2015']
          }
        }
      ]
    }
}