我很難讓 Relay 在我的 monorepo 中作業。我已經使用 Yarn 作業區（版本 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
我已經檢查了 thebabel-plugin-marcos和babel-plugin-relay包的來源，我可以找到錯誤行（閱讀此處了解更多資訊），但我無法弄清楚發生了什么。
我的設定
包.json
{
"name": "@apps/app1",
"version": "0.0.1",
"private": true,
"packageManager": "[email protected]",
"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 }]
]
}
歡迎任何提示！
uj5u.com熱心網友回復：
好吧，我已經擺脫了錯誤
- 洗掉
.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警告
關鍵依賴：require函式的使用方式不能靜態提取依賴
是類似的結果
importSomeModules(require);
// or
const myRequire = require;
whererequire不是呼叫運算式（例如：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
關鍵依賴：依賴的請求是一個運算式，是類似的結果
let var1 = someCall();
require(var1); // webpack can't determine var1 value
猜猜受影響的包裹線可以在這里找到。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459403.html
標籤：反应 网页包 中继 yarnpkg-v2