Question

有人可以帮我解决这个问题吗？我使用Typescript，React，Webpack和https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

的帮助开始了项目

我配置了所有内容，当我尝试运行命令webpack时，我收到了错误

ERROR in ./app/index.tsx
Module parse failed: app/index.tsx Unexpected token (10:4)
You may need an appropriate loader to handle this file type.
| 
| ReactDOM.render(
|     <Hello compiler="TypeScript" framework = "React" />,
|     document.getElementById("example")
| );

我有与上述类似的配置和相同的源文件。

Webpack.config.js

const path = require('path');
module.exports = {
entry: path.join(__dirname, "/app/index.tsx"),
output: {
    filename: "bundle.js",
    path: path.join(__dirname, "/dist")
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [ ".webpack.js", ".web.js", ".ts", ".tsx", ".js" ]
},

module: {
    loaders: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        {
            test: /\.tsx?$/,
            include: path.join(__dirname, '/app'),
            loaders: [ "babel-loader", "awesome-typescript-loader"],
            query: {
                presets: [ "react", "es2015" ]
            }
        }
    ],

    rules: [
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        {
            test: /\.js$/,
            include: path.join(__dirname, '/app'),
            loader: "source-map-loader"}
    ]
},

// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
    "react": "React",
    "react-dom": "ReactDOM"
}

};

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import {Hello} from "./components/Hello";

ReactDOM.render(
    <Hello compiler="TypeScript" framework = "React" />,
    document.getElementById("example")
);

Answer 1

我知道这并没有直接回答你的问题，但它可能会为你提供一种解决问题的替代方法。

我自己做出新的反应和webpack，但在我的设置中，我使用typescript构建了TSX文件，然后将webpack指向已编译的js文件。除了必须运行两步构建过程的复杂性之外，这种方法是否有任何缺点我不知道，但到目前为止它对我来说已经足够好了。使用这种方法，我的webpack配置文件如下所示：

module.exports = {
  devtool: "inline-source-map",
  entry: './wwwroot/app/components/root.js',
  output: {
    filename: 'bundle.js',
    path: "./wwwroot/js/"
  },
  module: {
    rules: [
     {
       enforce: 'pre',
       test: /\.js$/,
       loader: "source-map-loader"
     }
   ]
  }
};

Answer 2

我必须将 webpack 配置更改为

const path = require('path');
module.exports = {
    entry: path.join(__dirname, "/app/index.tsx"),
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "/dist")
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [ ".webpack.js", ".web.js", ".ts", ".tsx", ".js" ]
    },

    module: {
        rules: [ {
            test: /\.tsx$/,

            use: [
                // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
                {
                    loader: "babel-loader"
                }
            ]
        }, {
            test: /\.js$/,
            use: [
                {
                    loader: "source-map-loader"
                }
            ]
        }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

不知何故，它的工作没有打字机加载器。

Answer 3

不确定这是否可以解决您的特定问题，但是我遇到了相同的错误。事实证明Jest更改了我的tsconfig.json。即使您没有使用Jest，这可能仍然适用于您。

tsconfig的更改自：

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "esnext",
    "target": "es5",
    "sourceMap": true,
    "jsx": "react",
    "allowJs": true,
    "lib": [ "dom", "dom.iterable", "esnext" ],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "strict": false,
    "noEmit": true
  },
  "exclude": [ "node_modules" ],
  "include": [ "src" ]
}

收件人：

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "esnext",
    "target": "es5",
    "sourceMap": true,
    "jsx": "preserve",
    "allowJs": true,
    "lib": [ "dom", "dom.iterable", "esnext" ],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "strict": false,
    "noEmit": true
  },
  "exclude": [ "node_modules" ],
  "include": [ "src" ]
}

注释选项“ jsx”已从“反应”更改为“保留”。改回来解决了我的问题

意外的令牌＆lt; ：使用Typescript，React的Webpack配置问题

3 个答案: