Preact您可能需要一个合适的加载程序来处理这种文件类型
只需要一些帮助,我就会因为这场斗争而失去理智。我搜索了很多这类相同问题的帖子,但它不起作用,这就是我在这里寻求帮助。Preact您可能需要一个合适的加载程序来处理这种文件类型
我目前正在运行的简单反应的的WebPack-dev的服务器上,当我要建立的preact COMPAT我刚刚得到这个错误:
您可能需要适当的加载程序来处理此类文件在Client.jsx
这是文件:
Client.jsx
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
const renderClient =() => {
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('app'),
);
};
renderClient();
个
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const config = {
context: __dirname,
entry: './src/components/Client.jsx',
devtool: 'cheap-module-eval-source-map',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public/',
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
react: 'preact-compat',
'react-dom': 'preact-compat',
},
},
devServer: {
publicPath: '/public/',
historyApiFallback: true,
},
stats: {
colors: true,
reasons: true,
chunks: false,
},
plugins: [new webpack.NamedModulesPlugin()],
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'eslint-loader',
exclude: /node_modules/,
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: [path.resolve('js'), path.resolve('node_modules/preact-compat/src')],
},
],
},
};
if (process.env.NODE_ENV === 'production') {
config.devtool = 'source-map';
config.plugins = [];
}
module.exports = config;
.babelrc
{
"plugins": [
["transform-react-jsx", { "pragma": "h" }],
[
"module-resolver",
{
"root": ["."],
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
]
],
"presets": [
"react",
[
"env",
{
"targets": {
"browsers": "last 2 versions"
},
"loose": true,
"modules": false
}
]
],
"env": {
"test": {
"plugins": ["babel-plugin-transform-es2015-modules-commonjs"]
}
}
}
在你.jsx
规则只包含在目录./js/
和./node_modules/preact-compat/src/
文件,但您的输入./src/components/Client.jsx
,因此巴贝尔并不适用于它。您还需要将./src/
文件添加到规则。
path.resolve('js')
应该可能是path.resolve('src')
,除非您有从您的代码中使用的./js/
目录。另外,preact-compat/src
是不必要的,因为它运送了一个已经编译好的代码,当您导入preact-compat
时将使用该代码。
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: [path.resolve('src')],
},
而是只包括你需要什么transpile的,您可以排除一切你不想transpile。正如你在ESLint规则中所做的那样,这通常是node_modules
。
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
你错过了一个装载机将操纵jsx
。 如果您使用的是Babel,您可以使用babel-loader将jsx转换为js。
您可以在加载器添加到您的webpack.config.js
文件
var config = {
// Existing Code ....
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
}
]
}
}
我已经标记这不是一个答案。引用链接的问题在于,如果他们死亡,这对于未来的读者是没有用的。我建议从该链接中复制相关的细节并引用它,所以至少如果它消失了,那么问题仍然有答案。 –
你说得对,更新了答案,thanx。 – felixmosh
对不起,但它没有工作,它仍然说同样的错误 –
非常感谢你兄弟! –