无法将TSX文件导入JSX文件

时间:2019-06-29 03:08:51

标签: reactjs typescript serverside-rendering

我正在尝试建立一个基本的SSR react应用,使用打字稿作为前端,使用js作为服务器。

App的主要组件是.tsx文件。

但是我遇到以下错误:

  

错误:找不到模块'../src/App'       在Function.Module._resolveFilename(internal / modules / cjs / loader.js:581:15)

在我的renderSSR.js文件中:

  

从“ ../src/App”导入应用;

(这应导入../ src / App.tsx)

如果我将服务器端更改为所有.ts文件并使用ts-node,则一切正常。但是我不想这样做。

我的webpack文件的一些相关部分:

config.resolve = {
    extensions: [".tsx", ".ts", ".js", ".jsx"]
  };

config.module = {
     rules: [
      // Babel
      {
        test: /\.(js|jsx)$/,
        include: resolvePath("../src"),
        loader: "babel-loader",
        options: {
          cacheDirectory: IS_DEV,
          compact: IS_PROD
        }
      },
      // TS
      {
        test: /\.ts(x?)$/,
        loader: "ts-loader",
        exclude: /node_modules/
      },

更新:通过将import语句更改为:

,我可以解决此导入问题。
  

从“ ../src/App.tsx”导入应用;

但是,这会在新导入的App.tsx文件中导致以下错误:

  

{import * as React from“ react”;
  ^ SyntaxError:意外令牌*

在打字稿中输入如何导入React。

0 个答案:

没有答案