尝试使用 babel-plugin-relay 和 Webpack 5 运行应用程序时出错

Question

我很难让 Relay 在我的 monorepo 中工作。我已经用 Yarn workspaces (version berry) 和 Webpack 5 设置了一切。

当我尝试运行我的一个应用程序时，出现错误：

MacroError: The macro you imported from "undefined" is being executed outside the context of 
compilation with babel-plugin-macros. This indicates that you don't have the babel plugin 
"babel-plugin-macros" configured correctly. Please see the documentation for how to configure 
babel-plugin-macros properly: 
https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

我也收到 2 条警告：

Compiled with problems:

WARNING in ../../../.yarn/cache/babel-plugin-macros-npm-2.8.0-451367d7e7-59b09a21cf.zip/node_modules/babel-plugin-macros/dist/index.js 78:24-31

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted


WARNING in ../../../.yarn/cache/import-fresh-npm-3.3.0-3e34265ca9-2cacfad06e.zip/node_modules/import-fresh/index.js 32:31-48

Critical dependency: the request of a dependency is an expression

我已经检查了 babel-plugin-marcos 和 babel-plugin-relay 包的来源，我可以找到错误行（阅读 here 了解更多信息）但我可以搞清楚是怎么回事。

我的设置

package.json

{
  "name": "@apps/app1",
  "version": "0.0.1",
  "private": true,
  "packageManager": "yarn@3.2.0",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "framer-motion": "^6.2.10",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-relay": "^13.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@babel/runtime": "^7.17.9",
    "@types/babel__core": "^7",
    "@types/babel__plugin-transform-runtime": "^7",
    "@types/babel__preset-env": "^7",
    "@types/events": "^3",
    "@types/node": "^17.0.24",
    "@types/react": "^18.0.3",
    "@types/react-dom": "^18.0.0",
    "@types/react-relay": "^13.0.2",
    "@types/yup": "^0.29.13",
    "babel-loader": "^8.2.4",
    "babel-plugin-relay": "^13.2.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "events": "^3.3.0",
    "graphql": "^16.3.0",
    "html-webpack-plugin": "^5.5.0",
    "http-proxy-middleware": "^2.0.4",
    "module": "^1.2.5",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "pnp-webpack-plugin": "^1.7.0",
    "process": "^0.11.10",
    "stream-browserify": "^3.0.0",
    "string_decoder": "^1.3.0",
    "ts-node": "^10.7.0",
    "typescript": "^4.6.3",
    "util": "^0.12.4",
    "web-vitals": "^2.1.4",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  },
  "scripts": {
    "start": "webpack serve --config webpack.dev.config.ts --stats-error-details"
  }
}

webpack.dev.config.ts

import * as path from "path";
import { Configuration as WebpackConfiguration, ProvidePlugin } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
const HtmlWebpackPlugin = require("html-webpack-plugin");
const PnpWebpackPlugin = require("pnp-webpack-plugin");

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config: Configuration = {
  mode: "development",
  output: {
    publicPath: "/",
  },
  entry: path.resolve(__dirname, "src/index.tsx"),
  resolve: {
    plugins: [PnpWebpackPlugin],
    extensions: [".tsx", ".ts", ".js", "jsx"],
    fallback: {
      path: require.resolve("path-browserify"),
      stream: require.resolve("stream-browserify"),
      util: require.resolve("util/"),
      crypto: require.resolve("crypto-browserify"),
      buffer: require.resolve("buffer/"),
      events: require.resolve("events/"),
      string_decoder: require.resolve("string_decoder/"),
      os: require.resolve("os-browserify/browser"),
      fs: false,
      module: false
    },
  },
  resolveLoader: {
    plugins: [PnpWebpackPlugin.moduleLoader(module)],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
    }),
    new ProvidePlugin({ process: "process/browser.js" }),
  ],
  module: {
    rules: [
      // { test: /\.(css)$/, use: ["style-loader", "css-loader"] },
      { test: /\.(svg|ico|png|gif|jpg|jpeg)$/, type: "asset/ressource" },
      {
        test: /\.(ts|tsx)?$/i,
        // exclude: /node_modules/,
        use: {
          loader: require.resolve("babel-loader"),
          options: {
            generatorOpts: { compact: false },
            presets: [
              "@babel/preset-env",
              ["@babel/preset-react", { runtime: "automatic" }],
              "@babel/preset-typescript",
            ],
          },
        },
      },
    ],
  },
  devtool: "inline-source-map",
  devServer: {
    static: path.join(__dirname, "public"),
    historyApiFallback: true,
    port: 4000,
    open: true,
    hot: true,
  },
};

export default config;

babel.rc

{
  "presets": ["@babel/preset-env", ["@babel/preset-react", { "runtime": "automatic" }], "@babel/preset-typescript"],
  "plugins": [
    ["relay", { "artifactDirectory": "../../__generated__", "eagerESModules": true }],
    ["@babel/plugin-transform-runtime", { "regenerator": true }]
  ]
}

欢迎任何提示！

Answer 1

好的，我已经通过

消除了错误

正在删除 .babelrc 个文件
正在删除 babel-plugin-macros.config.js 个文件
将 Relay 插件配置添加到 webpack.config.dev.ts

我的 webpack.config 的相关部分现在看起来像这样

module: {
  rules: [     
    {
      test: /\.(ts|tsx)?$/,
      use: {
        loader: require.resolve("babel-loader"),
        options: {
        generatorOpts: { compact: false },
          presets: [
            "@babel/preset-env",
            ["@babel/preset-react", { runtime: "automatic" }],
            "@babel/preset-typescript",
          ],
          plugins: [
            ["relay", { artifactDirectory: "../../__generated__", eagerESModules: true }],
            ["@babel/plugin-transform-runtime"],
          ],
        },
      },
    },
  ],
},

不过，两人warnings依然坚持！

Compiled with problems:

WARNING in ../../../.yarn/cache/babel-plugin-macros-npm-2.8.0-451367d7e7-59b09a21cf.zip/node_modules/babel-plugin-macros/dist/index.js 78:24-31

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted


WARNING in ../../../.yarn/cache/import-fresh-npm-3.3.0-3e34265ca9-2cacfad06e.zip/node_modules/import-fresh/index.js 32:31-48

Critical dependency: the request of a dependency is an expression

我读到它可能与宏的一些异步调用有关！？我可以安全地忽略这些警告吗？这是 webpack 问题吗？

更新---

我已经在 Webpack GitHub Repo 提交了一份问题报告，根据他们的说法，babel-plugin-macros 警告

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

是类似

的结果

importSomeModules(require); 
// or
const myRequire = require;

其中 require 不是调用表达式（例如：require()、require.resolve()）。

在 babel-plugin-macros 的情况下，这是

function macrosPlugin(babel, 
// istanbul doesn't like the default of an object for the plugin options
// but I think older versions of babel didn't always pass options
// istanbul ignore next
{
  require: _require = require,
  resolvePath = nodeResolvePath,
  isMacrosName = testMacrosRegex,
  ...options
} = {}) {}

不幸的是，babel-plugin-macros 不再维护（尽管仍然是 babel-plugin-relay 的依赖项）。

另一个警告来自 import-fresh

Critical dependency: the request of a dependency is an expression is a result of something like

let var1 = someCall();
require(var1); // webpack can't determine var1 value

猜猜可以找到包受影响的行here。

尝试使用 babel-plugin-relay 和 Webpack 5 运行应用程序时出错

Error when trying to run application with babel-plugin-relay and Webpack 5

relay

reactjs

webpack

yarnpkg-v2

我的设置

更新---

尝试使用 babel-plugin-relay 和 Webpack 5 运行 应用程序时出错

Error when trying to run application with babel-plugin-relay and Webpack 5

relay

reactjs

webpack

yarnpkg-v2

我的设置

更新---

尝试使用 babel-plugin-relay 和 Webpack 5 运行应用程序时出错