Estoy creando una pequeña biblioteca para potenciar algunos de mis proyectos.

Descubrí que estaba teniendo problemas dentro de las aplicaciones cliente con múltiples versiones conflictivas de reaccionar al importar mi biblioteca. Esto me llevó a configurar tanto react como react-dom bajo dependencias de pares en la biblioteca package.json , lo que solucionó el problema.

Sin embargo, estoy tratando de ejecutar un entorno de espacio aislado a través de un paquete de paquetes web para probar y jugar con componentes dentro del repositorio de la biblioteca mientras estoy trabajando en él (en lugar de usar el enlace npm), y ahora tengo un problema por el cual la react ya no es ser detectado como una dependencia local.

Aquí está la configuración de mi paquete web. FWIW, cuando construyo los componentes para uso en producción, estoy exportando módulos a través de tsconfig, y no estoy usando webpack en absoluto. Pero me resulta difícil resolver esta situación de mantener un entorno de prueba:/

 const path = require('path'); const webpack = require('webpack'); const HtmlWebPackPlugin = require('html-webpack-plugin'); const isDevelopment = process.env.NODE_ENV !== 'production'; module.exports = { mode: isDevelopment ? 'development' : 'production', entry: path.resolve(__dirname, './sandbox/web/index.tsx'), module: { rules: [ { test: /\.tsx?$/, exclude: /node_modules/, use: ['babel-loader', 'ts-loader'], }, { test: /\.(s(a|c)ss)$/, use: ['style-loader', 'css-loader', 'sass-loader'], }, { test: /\.svg?$/, loader: 'svg-url-loader', options: { limit: 10000, }, }, ], }, resolve: { extensions: ['.js', '.jsx', '.tsx', '.ts'], alias: { src: path.resolve(__dirname, 'src'), components: path.resolve(__dirname, 'src/components'), hooks: path.resolve(__dirname, 'src/hooks'), themes: path.resolve(__dirname, 'src/themes'), types: path.resolve(__dirname, 'src/types'), utils: path.resolve(__dirname, 'src/utils'), 'react-native$': 'react-native-web', }, }, output: { path: path.resolve(__dirname, './sandbox/web'), filename: 'bundle.js', }, devtool: 'inline-source-map', watchOptions: { poll: true, ignored: '/node_modules/', }, plugins: [ new HtmlWebPackPlugin({ template: path.resolve(__dirname, './sandbox/web/index.html'), filename: 'index.html', }), new webpack.IgnorePlugin({ resourceRegExp: /^\.\/native$/, contextRegExp: /src$/, }), ], devServer: { historyApiFallback: { index: '/', }, }, };