React : Getting require is not defined error when importing @unleash/proxy-client-react

msdinesh07 commented 1 year ago

Describe the bug

Installed @unleash/proxy-client-react and tried to import it in our project.

Used below line and did npm start.

import { FlagProvider } from '@unleash/proxy-client-react';

In browser, noticed below logs in dev console.

Uncaught ReferenceError: require is not defined at eval (eval at (app.bundle.js:16177:2), :1:744) at eval (eval at (app.bundle.js:16177:2), :1:5008) at Object. (app.bundle.js:16177:2) at webpack_require (vendor.75009cd30bee87d51b12.js:551:30) at fn (vendor.75009cd30bee87d51b12.js:99:20) at eval (eval at (app.bundle.js:5896:2), :49:25) at Object. (app.bundle.js:5896:2) at webpack_require (vendor.75009cd30bee87d51b12.js:551:30) at fn (vendor.75009cd30bee87d51b12.js:99:20) at Object. (app.bundle.js:6:19)

Steps to reproduce the bug

No response

Expected behavior

No response

Logs, error output, etc.

Uncaught ReferenceError: require is not defined
    at eval (eval at <anonymous> (app.bundle.js:16177:2), <anonymous>:1:744)
    at eval (eval at <anonymous> (app.bundle.js:16177:2), <anonymous>:1:5008)
    at Object.<anonymous> (app.bundle.js:16177:2)
    at __webpack_require__ (vendor.75009cd30bee87d51b12.js:551:30)
    at fn (vendor.75009cd30bee87d51b12.js:99:20)
    at eval (eval at <anonymous> (app.bundle.js:5896:2), <anonymous>:49:25)
    at Object.<anonymous> (app.bundle.js:5896:2)
    at __webpack_require__ (vendor.75009cd30bee87d51b12.js:551:30)
    at fn (vendor.75009cd30bee87d51b12.js:99:20)
    at Object.<anonymous> (app.bundle.js:6:19)

Screenshots

No response

Additional context

No response

Unleash version

Gitlab Unleash

Subscription type

Open source

Hosting type

None

SDK information (language and version)

react

Tymek commented 1 year ago

Hi @msdinesh07
Can you share more details about your setup? Do you use any custom configuration to bundle your code, or is it from a template like create-react-app? It's hard to work on issues like this one without reproducing it.

msdinesh07 commented 1 year ago

Ya I understand it.. Sure let me provide u the necessary details

msdinesh07 commented 1 year ago

Package.json file content:

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "test application",
  "main": "index.js",
  "scripts": {
    "start": "set NODE_ENV=development && node server",
    "bootstrap": "npm install yarn@0.18.1 && node ./node_modules/yarn/bin/yarn.js install",
    "yarn": "node ./node_modules/yarn/bin/yarn.js",
    "clean": "rm -rf dist",
    "nuclear-option": "git reset HEAD --hard && git clean -fdx && npm run bootstrap",
    "build": "set NODE_ENV=development && webpack --config webpack.config.js",
    "performance": "SET NODE_ENV=production && node server",
    "deploy": "node --max-old-space-size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.production.config.js",
    "deploy:cnd": "node --max-old-space-size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.cnd.config.js",
    "eslint": "eslint .",
    "jscs": "jscs .",
    "test": "jest --coverage",
    "pre-commit": "lint-staged"
  },
  "pre-commit": [],
  "lint-staged": {
    "*.{js,jsx,json}": []
  },
  "dependencies": {
    "attr-accept": "1.1.0",
    "axios": "0.15.3",
    "babel-plugin-syntax-class-properties": "^6.13.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.16.0",
    "bowser": "1.6.0",
    "classnames": "2.2.5",
    "diff": "^5.1.0",
    "dotenv": "2.0.0",
    "es6-promise": "3.3.1",
    "fixed-data-table-2": "1.0.1",
    "get-stream": "^6.0.1",
    "got": "^12.5.3",
    "history": "2.1.2",
    "jquery": "3.1.1",
    "jquery-ui": "1.12.1",
    "jss": "^10.9.2",
    "jszip": "3.1.3",
    "lint-staged": "^6.0.0",
    "lodash": "4.17.2",
    "material-ui": "0.15.4",
    "moment": "2.17.1",
    "mousetrap": "1.6.0",
    "node-sass": "^7.0.1",
    "node-uuid": "1.4.7",
    "prop-types": "15.5.10",
    "protractor-jasmine2-screenshot-reporter": "0.3.5",
    "radium": "^0.24.1",
    "react": "15.4.1",
    "react-addons-linked-state-mixin": "15.4.1",
    "react-app-polyfill": "^0.2.2",
    "react-bootstrap": "0.30.7",
    "react-bs-notifier": "^4.4.6",
    "react-calendar": "2.3.1",
    "react-date-picker": "6.3.1",
    "react-dom": "15.4.1",
    "react-excel-workbook": "^0.0.4",
    "react-loader": "2.4.0",
    "react-measure": "1.4.4",
    "react-overlays": "0.6.10",
    "react-paginate": "2.2.3",
    "react-redux": "^5.0.6",
    "react-router": "2.8.1",
    "react-select": "1.2.1",
    "react-sidebar": "2.3.2",
    "react-sortable-hoc": "^0.8.3",
    "react-split-pane": "0.1.57",
    "react-tap-event-plugin": "2.0.1",
    "react-virtualized": "^9.20.0",
    "reactstrap": "^6.1.0",
    "redux": "3.6.0",
    "redux-saga": "^0.16.0",
    "remove-trailing-separator": "^1.1.0",
    "rf-canvas": "^1.1.0",
    "rtree": "1.4.2",
    "snapsvg": "0.4.0",
    "sweetalert2": "^7.20.7",
    "whatwg-fetch": "1.1.0",
    "xlsx": "0.9.0",
    "proxy-client-react": "3.5.2"
  },
  "devDependencies": {
    "autoprefixer": "6.5.1",
    "babel-cli": "6.18.0",
    "babel-core": "6.18.0",
    "babel-eslint": "4.1.8",
    "babel-jest": "12.1.0",
    "babel-jscs": "2.0.5",
    "babel-loader": "6.2.5",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-preset-es2015": "6.18.0",
    "babel-preset-react": "6.16.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-0": "6.16.0",
    "body-parser": "1.15.2",
    "case-sensitive-paths-webpack-plugin": "1.1.4",
    "chai": "3.5.0",
    "clean-webpack-plugin": "0.1.13",
    "compression-webpack-plugin": "0.3.1",
    "connect-slashes": "1.3.1",
    "cross-env": "1.0.8",
    "css-loader": "0.19.0",
    "enzyme": "2.5.1",
    "eslint": "1.10.3",
    "eslint-plugin-react": "3.16.1",
    "expect": "1.20.2",
    "express": "4.14.0",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "html-loader": "0.4.4",
    "html-minifier-loader": "1.3.4",
    "html-webpack-plugin": "2.24.1",
    "http-proxy": "1.16.2",
    "image-webpack-loader": "1.8.0",
    "imports-loader": "0.6.5",
    "jest": "12.1.1",
    "jest-cli": "12.1.1",
    "jscs": "2.11.0",
    "jsdom": "6.5.1",
    "json-loader": "0.5.4",
    "json-server": "0.8.23",
    "object-assign": "4.1.0",
    "postcss-loader": "0.9.1",
    "raw-loader": "0.5.1",
    "react-addons-perf": "^15.4.2",
    "react-addons-test-utils": "15.4.1",
    "react-hot-loader": "1.3.1",
    "react-transform-hmr": "1.0.4",
    "redux-devtools": "3.3.1",
    "resolve-url-loader": "1.6.1",
    "rimraf": "2.5.4",
    "sass-loader": "3.2.3",
    "send": "0.13.2",
    "serve-static": "1.10.3",
    "socket.io": "1.7.2",
    "stats-webpack-plugin": "0.2.2",
    "style-loader": "0.12.4",
    "svg-url-loader": "1.1.0",
    "url-loader": "0.5.7",
    "webpack": "1.12.9",
    "webpack-dev-middleware": "1.8.4",
    "webpack-dev-server": "1.16.2",
    "webpack-hot-middleware": "2.13.2",
    "webpack-merge": "0.14.1",
    "webpack-validator": "2.2.12",
    "webpack-war-archiver-plugin": "0.0.1",
    "yarn": "^0.19.1"
  },
  "jest": {
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/app/components/"
    ]
  }
}

msdinesh07 commented 1 year ago

Below require is causing the issue.

const t = require("unleash-proxy-client") , r = require("react") , o = e.n(r)().createContext(null);

webpack:///~/@unleash/proxy-client-react/dist/index.browser.js?5ebf

Tymek commented 1 year ago

Looks like something is misconfigured in webpack.config.js. Webpack for index.browser.js is configured to output for Node.js instead of creating a browser package

msdinesh07 commented 1 year ago

Please find the content of webpack.config.js file below.

/ global __dirname, process / const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const validate = require('webpack-validator');

const appPath = path.join(__dirname, 'app');

const config = { devtool: 'eval-source-map',

// The base directory for resolving entry (must be absolute path) context: appPath, entry: { app: [ 'webpack-hot-middleware/client?reload=true', path.join(appPath, 'App.js') ], siteTool: [ 'webpack-hot-middleware/client?reload=true', path.join(appPath, 'siteTool/scripts/main.js') ], vendor: [ 'snapsvg' ]

},

output: { path: path.join(__dirname, '/dist/'), filename: './[name].bundle.js', publicPath: '/build/' }, resolve: { extensions: ['', '.js', '.json', '.jsx'], root: [ path.resolve('./app'), ],

alias: {
  config: path.join(__dirname, 'config', 'development'),
  'axios-service': path.join(__dirname, 'app', 'utils', 'AxiosService')
},

}, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), new HtmlWebpackPlugin({ chunks: ['app', 'vendor'], template: './index.tpl.html', inject: 'body', filename: './index.html' }), new HtmlWebpackPlugin({ chunks: [], template: './error/index.tpl.html', inject: 'body', filename: './error/index.html' }), new HtmlWebpackPlugin({ chunks: ['siteTool', 'vendor'], template: './siteTool/index.tpl.html', inject: 'body', filename: './sitetool/index.html' }), new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('development') } }), new webpack.IgnorePlugin(/cptable/),

// This plugin is included to ensure the front end builds properly
// on the Linux architechture, which is case sensitive to file names.
// If your project won't build, do not remove this plugin. Instead,
// correct the case of either the file itself or your inclusion of it
// to get rid of the error.
new CaseSensitivePathsPlugin(),

], module: { loaders: [{ test: /.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { 'presets': ['react', 'es2015', 'stage-0', 'react-hmre'] } }, { test: require.resolve('snapsvg'), loader: 'imports-loader?this=>window,fix=>module.exports=0' }, { test: /.json?$/, loader: 'json-loader' }, { test: /.(jpe?g|PNG|png|gif)$/i, loaders: [ 'url-loader?limit=8192' ] }, { test: /.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: 'url-loader?limit=8192&mimetype=application/font-woff' }, { test: /.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/, loader: 'url-loader' }, { test: /.(css|scss)$/, loaders: [ 'style-loader', 'css-loader?sourceMap', 'resolve-url-loader', 'sass-loader?sourceMap' ], }, ] }, node: { fs: 'empty' }, externals: [{ './cptable': 'var cptable', './jszip': 'jszip' }], };

if (process.env.NODE_ENV === 'development') { config.devtool = '#inline-source-map'; config.devServer = { hot: true, contentBase: './app', noInfo: false, inline: true, historyApiFallback: true, proxy: { '/api/*': { target: 'http://127.0.0.1:3000/api/', secure: false, rewrite: function (req) { req.url = req.url.replace(/^\/api/, ''); } } } }; }

if (process.env.NODE_ENV !== 'test') { config.plugins.push( new webpack.optimize.CommonsChunkPlugin( / chunkName: / 'vendor', / filename: / 'vendor.[hash].js' ) ); } else { config.plugins.push( new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), new webpack.optimize.CommonsChunkPlugin( / chunkName: / 'vendor', / filename: / 'vendor.[hash].js' ) ); }

process.stdout.on('error', function (err) { if (err.code === 'EPIPE') { process.exit(0); } });

module.exports = validate(config);

Tymek commented 1 year ago

Looks like this project is using webpack 1.12.9 that is 7 years old. Issue seems to be with the bundler setup, not the package. Unfortunately we can't dedicate time to debugging this at the moment. I'm sorry for any inconvenience this may cause and encourage you to explore alternative solutions or workarounds, like stackoverflow.com - webpack : Uncaught ReferenceError: require is not defined.

msdinesh07 commented 1 year ago

Thanks Tymek.. will explore upgrading the webpack and see it..

Unleash / proxy-client-react