Preact 你可能需要一个合适的加载器来处理这种文件类型

Question

只是需要一些帮助，我在这场斗争中失去了理智。我已经搜索了很多此类相同问题的帖子，但都没有用，这就是我在这里寻求帮助的原因。

我目前运行在 webpack-dev-server 上进行简单的 React，当我想建立 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"]
    }
  }
}

Answer 1

您错过了一个将操纵 jsx 的加载程序。如果你正在使用 Babel，你可以使用 babel-loader 将 jsx 转换为 js。

您可以将该加载程序添加到您的 webpack.config.js 文件中

var config = {
    // Existing Code ....
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel'
            }
        ]
    }
}

Answer 2

在您的 .jsx 规则中，您只包含目录 ./js/ 和 ./node_modules/preact-compat/src/ 中的文件，但您的条目是 ./src/components/Client.jsx，因此 Babel 不会应用于它。您还需要将 ./src/ 文件添加到规则中。

path.resolve('js') 可能应该是 path.resolve('src')，除非您的代码中使用了 ./js/ 目录。此外，preact-compat/src 是不必要的，因为它附带了一个已经转译的代码，当您导入 preact-compat.

时将使用该代码

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  include: [path.resolve('src')],
},

您可以排除您不想转译的所有内容，而不是仅包括您需要转译的内容。这通常是 node_modules 正如您在 ESLint 规则中所做的那样。

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
},

Preact 你可能需要一个合适的加载器来处理这种文件类型

Preact You may need an appropriate loader to handle this file type

reactjs

webpack

babeljs

webpack-dev-server

preact