Я уже пару часов потратил на эту проблему, и я застрял.
tl; dr: Объединение моего пользовательского компонента с выводами веб-пакетов в undefinedили 'call' of undefined ошибка (при загрузке несвязанных пакетов поставщиков).См. Сгенерированную конфигурацию веб-пакета ниже.
Я создал моно-репо с простым пакетом TypeScript .Все отлично работает, когда я просто перенести его с TSC.Но как только я использую Реле , я сталкиваюсь с проблемами .Итак, я решил, что я просто использую webpack .Легче сказать, чем сделать.
Конечно, я хочу связать только то, что необходимо.И есть моя текущая проблема: я получаю сообщение об ошибке, когда связанный пакет пытается решить ../../node_modules/react/index.js.
Я думаю, что commonjs2 может быть способом, которым я использую этот пакет в другом проекте веб-пакета.
const webpackConfig = {
mode: "production",
resolve: {
extensions: [ ".web.js", ".mjs", ".js", ".json", ".web.jsx", ".jsx", ".tsx", ".ts" ],
modules: [
"<mono-repo-root>/node_modules",
"<mono-repo-root>/packages/custom-navigation/packages"
],
alias: {
packages: "<mono-repo-root>/packages/custom-navigation/packages",
react: "<mono-repo-root>/node_modules/react",
"react-dom": "<mono-repo-root>/node_modules/react-dom"
}
},
module: {
rules: [
{
test: /\.ts(x)?$/,
enforce: "pre",
use: [
{
loader: "tslint-loader",
options: {
configFile: "<mono-repo-root>/tslint.js",
tsConfigFile: "<mono-repo-root>/tsconfig.json",
formatter: "stylish",
emitErrors: false
}
}
]
},
{
test: /\.ts(x)?$/,
exclude: [ /node_modules/ ],
use: [
{
loader: "babel-loader",
options: {
presets: [ "@babel/preset-react" ],
plugins: [ "relay" ]
}
},
{
loader: "ts-loader",
options: {
configFile: "<mono-repo-root>/packages/custom-navigation/tsconfig.json"
}
}
]
},
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
},
plugins: [
// Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.EnvironmentPlugin( getEnv() ),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
node: {
"dgram": "empty",
"fs": "empty",
"net": "empty",
"tls": "empty",
"child_process": "empty"
},
optimization: {
minimize: false,
splitChunks: {
chunks: "all"
}
},
target: "node",
entry: "<mono-repo-root>/packages/custom-navigation/Navigation.tsx",
output: {
path: "<mono-repo-root>/packages/custom-navigation/dist",
filename: "index.js",
library: "@custom/navigation",
libraryTarget: "commonjs2", // tried umd, commonjs and commonjs2
publicPath: "/dist/"
},
externals: [
webpackNodeExternals(), // npmjs.com/package/webpack-node-externals
webpackNodeExternals( { modulesDir: 'packages/custom-navigation/node_modules' } )
]
}