在tsx编译中导入jsx文件错误

问题描述

我正在尝试在tsx文件中导入jsx文件.这导致错误

I am trying to import jsx file in tsx file. This is causing the error

我使用webpack，react，typescript，Import tsx文件都没有问题，但是任何jsx文件都导致编译错误，

I a using webpack , react, typescript, Import tsx files no issues, but any jsx file is causing compilation error,

package.json

package.json

{
  "name": "typescript-babel-webpack",
  "version": "1.0.0",
  "description": "A simple lightweight TypeScript + Babel + Webpack project.",
  "scripts": {
    "build": "webpack"
  },

  "license": "",
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "inline-style-prefixer": "^2.0.4",
    "react-style-proptype": "^1.4.0",
    "style-loader": "^0.13.1",
    "ts-loader": "^1.3.1",
    "typescript": "^2.1.4",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "@types/react": "^0.14.55",
    "@types/react-dom": "^0.14.19"

  },
  "dependencies": {
    "event-emitter-es6": "^1.1.5",
    "inline-style-prefixer": "^2.0.4",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-style-proptype": "^1.4.0"
  }
}

tsconfig.json

tsconfig.json

{   "compilerOptions": {
    "module": "commonjs",
     "target": "es6",
    "sourceMap": true,
    "jsx": "react",
     "allowJs":true

   },   "exclude": [
     "node_modules"   ] }

webpack.json

webpack.json

module.exports = {
  entry: [ './src/index.tsx'],
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  devtool: 'eval-source-map',
  resolve: {
    extensions: ['', '.js', '.jsx','.ts','.tsx','.css']
  },
  module: {
    loaders: [
      { test: /\.css$/, exclude: /node_modules/,loader: "style!css" },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
        {
            test: /\.jsx$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },

      { test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/}
    ]
  }
};

我能够通过将来自jsx的ReactComponenet包装到一个函数中并在tsx中使用它来使其工作.这是代码

I was able to make it work by wrapping ReactComponenet from jsx in a function and use it in tsx. here is the code

tsx文件

import * as React from  "react";
import * as ReactDom from 'react-dom'
import {componenetFactory} from './Test'

export class SplitPaneCom  extends   React.Component<any,any>{
  constructor(props){
    super(props);
  }

  render(){

    let componentInstance=componenetFactory();
    return componentInstance;
  }

}

ReactDom.render(<SplitPaneCom/>,document.getElementById("jumboTron"));

jsx文件

import React, { Component, PropTypes } from 'react';

export  class TestComponenet extends  Component{
    constructor(props){
        super(props);
    }


    render(){
        return (<div>Testzcdf content</div>);
    }
}

export let componenetFactory=function(){
    return <TestComponenet/>
}

如果我尝试直接使用TestComponenet，则会出现错误，我会将其包装在函数中并在tsx中调用.

If I try to use TestComponenet directly I get error, I am wrapping it in function and calling it in tsx.

推荐答案

我从tsx创建jsx，然后确定是否使用它.或其他组件.您可以在此 github存储库中查看代码.

I create the jsx from tsx and after decide if use it. Or another component. You can look at the code on this github repository.

这篇关于在tsx编译中导入jsx文件错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！