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

IT技术 javascript reactjs babeljs
2021-05-05 19:42:33

我创建了一个 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'));

    });
})();

并使用以下命令将 jsx 转换为 js

babel --watch src --out-dir bundle --preset react

输出文件如下所示

(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 文件时遇到了 Uncaught ReferenceError: dom is not defined 。dom 是在转换后添加的。任何线索如何解决这个问题？

2个回答

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

结果发现罪魁祸首是我的 webpack.config.js。我有：

plugins: [ 
    ["transform-react-jsx", {
        "pragma": "dom" 
    }]
]

babel 的默认编译指示是 React.createElement ( https://babeljs.io/docs/plugins/transform-react-jsx/ )。

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

从文档中，我应该导入我指定的“dom”module，并确保我安装了 babel-plugin-jsx-pragmatic。

这个插件的文档在这里https://www.npmjs.com/package/babel-plugin-jsx-pragmatic并解释一些关于 pragmas 的内容。

我通过简单地删除 'pragma' 选项解决了这个问题，这样我就可以使用默认选项（附上我的 webpack.config.js 的一部分以提供更多上下文）：--我正在使用 webpack 2.6.1

...
module: {
    rules: [{
      //a regexp that tells webpack to use the following loaders on all
      //.js and .jsx files
      test: /\.js$/,
      loader: 'babel-loader',
      options: {
        babelrc: false,
        presets: ["es2016", "react", "stage-0"],
        plugins: [
          ["transform-react-jsx"]
        ]
      },
      //we definitely don't want babel to transpile all the files in
      //node_modules. That would take a long time.
      exclude: /node_modules/
    },

...

要在浏览器中将 JSX 转换为 JS，您需要browser.js从babel. 一个简单的例子参考https://github.com/ruanyf/react-demos/blob/master/demo01/index.html

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

使用以下文件，然后运行npm install和webpack，然后您index.html就可以使用了。

索引.html

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

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

包.json

{
  "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')
);

组件.jsx

'use strict'

var React = require('react')

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

module.exports = AppView

webpack.config.js

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']
          }
        }
      ]
    }
}
其它你可能感兴趣的问题
上一篇错误：尝试在使用 Animated React Native 时分配只读属性 下一篇React router v4 服务静态文件 (robot.txt)