gpt4 book ai didi

reactjs - .tsx webpack 编译失败 : Unexpected token <

转载 作者:搜寻专家 更新时间:2023-10-30 21:01:23 24 4
gpt4 key购买 nike

我的应用程序使用 .ts、.js 和 .jsx 文件编译并运行。现在,我尝试将 .jsx 文件更改为 .tsx,但它中断了。

如何修复这个编译错误:

ts-loader: Using typescript@1.6.2 and C:\users\ruser\Desktop\Downloads\divinote\site\tsconfig.json                                                                                                                                                    67% 226/234 build modulesModuleParseError: Module parse failed: C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\ts-loader\index.js?cacheDirectory!C:\users\ruser\Desktop\Downloads\divinote\site\src\app\views\header\DiviAppBar.tsx 
Line 15: Unexpected token <
You may need an appropriate loader to handle this file type.
| }
| DiviAppBar.prototype.render = function () {
| return (<AppBar />);
| };
| return DiviAppBar;
at DependenciesBlock.<anonymous> (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack\lib\NormalModule.js:113:20)
at DependenciesBlock.onModuleBuild (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:292:15
at context.callback (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:148:14)
at Object.loader (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\ts-loader\index.js:431:5)
at WEBPACK_CORE_LOADER_EXECUTION (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:155:71)
at runSyncOrAsync (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:155:93)
at nextLoader (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:290:3)
at C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at C:\users\ruser\Desktop\Downloads\divinote\site\node_modules\graceful-fs\graceful-fs.js:76:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3) 69% 337/338 build moduleschild_process.js:484

当我编译这段代码时:

"use strict";
import React = require('react');
import AppBar = require('material-ui/lib/app-bar');

class DiviAppBar extends React.Component
{
render()
{
return (
<AppBar />
);
}
}

export = DiviAppBar;

使用这个 webpack 配置文件:

'use strict';

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var rootPath = __dirname; //site
var srcPath = path.join(rootPath, 'src'); //site/src

module.exports =
{
bail: true,
cache: true,
context: rootPath,
debug: true,
devtool: 'inline-source-map', //'eval-cheap-module-source-map','inline-source-map'
target: 'web',
devServer:
{
contentBase: './dist',
historyApiFallback: true
},
entry:
{
app: path.join(srcPath, 'app/main.jsx'),
lib: ['react', 'react-router']
},
output:
{
path: path.join(rootPath, 'dist'),
publicPath: '',
filename: '[name].js',
library: ['[name]', '[name]'],
pathInfo: true
},
resolve:
{
root: srcPath,
extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
modulesDirectories: ['node_modules', 'src', 'typings']
},
module:
{
loaders:
[
{test: /\.js$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
{test: /\.jsx$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
{test: /\.ts$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
{test: /\.tsx$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
{test: /\.scss$/, loaders: ['style', 'css', 'sass']},
{test: /\.png$/, loader: 'file-loader'},
{test: /\.jpg$/, loader: 'file-loader'},
{test: /\.jpeg$/, loader: 'file-loader'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
]
},
plugins:
[
new CopyWebpackPlugin
([
{ from: 'src/images', to: 'images' }
]),
new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
new HtmlWebpackPlugin
({
inject: true,
template: 'src/index.html'
}),
new webpack.NoErrorsPlugin()
]
};

和这个 tsconfig.json 文件:

{
"compilerOptions":
{
"jsx": "preserve",
"noImplicitAny": true,
"module": "commonjs",
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"files": [],
"exclude":
[
"node_modules",
"dist"
]
}

最佳答案

第一个问题与 Martin 提到的“jsx”配置有关。将“jsx”设置为“ react ”。

第二个问题与您的代码有关。像这样改变它:

class DiviAppBar extends React.Component<Props, State> ...

为您的 Prop 创建一个界面,为您的状态创建另一个界面。如果您没有任何使用空对象。

class DiviAppBar extends React.Component<{}, {}> ...

关于reactjs - .tsx webpack 编译失败 : Unexpected token <,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34262334/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com