我正在尝试使用webpack构建一个打字稿反应项目。我按照打字稿教程,但继续得到错误`模块解析失败:......你可能需要一个合适的装载机``
我可以使用tsc
进行编译,因此问题不在于打字稿本身。
失败发生在以下代码段中的<div>
ReactDOM.render(
<div>Something</div>,
document.getElementById("content")
);
如果我将<div>
替换为null
,则会运行webpack。
我不确定我在这里失踪了什么,我猜测它是如何加载jsx / tsx的?
我的webpack.config是
module.exports = {
entry: "./src/components/index",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{
test: /\.tsx?$/,
use: 'awesome-typescript-loader',
}
]
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
};
-----------更新----------------
React和React-Dom作为
包含在文件index.tsx
中
import * as React from "react";
import * as ReactDOM from "react-dom";
在tsconfig文件中启用了JSX "jsx": "react"
此外,.babelrc包括
{
"plugins": ["transform-runtime","array-includes"],
"presets" : ["env", "react", "stage-2"]
}
----------- update 2 -------------- 我怀疑这是一个webpack loader没有加载属性的问题。 如果我从
更改加载程序module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
到
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "some-random-loader-name" },
我希望错误的是找不到加载程序,但我仍然得到与使用awesome-typescript-loader
时相同的行为。
答案 0 :(得分:0)
这很愚蠢,但万一其他人遇到类似的问题。
我的package.json中有一个无服务器模块的条目,其中包含较旧版本的webpack。
webpack使用旧版本而不是报告错误,而不是使用全局版本。
我查看了npm list webpack -g
,但没有npm list webpack