After updating react-tooltip package version from "4.2.21" to "5.19.0" it throws many mjs errors

[mrigank214]

If this is a bug or a Feature request reported using this template, we will close this issue, for those, please use the correct template.

This will be handled as a Question.

Hi team , I have recently updated react-tooltip package from 4.2.21 to 5.19.0 and I am encountering many errors when i run "npm run webpack" , could someone please help me with it . Attaching my package.json file for package reference

{ "name": "DirectorUI", "version": "3.1.0", "private": true, "scripts": { "preinstall": "npx npm-force-resolutions@0.0.3", "app": "http-server ./", "newapp": "cd server && npm run devserver", "webpack": "npm run lint && npm test && webpack", "webpackDev": "webpack", "buildViews": "babel ./ui/ --out-dir ./uiBuild/ --watch", "less": "lessc ./css/style.less ./css/style.css && lessc ./newcss/style.less ./css/director.css", "lessMin": "lessc --clean-css ./css/style.less ./css/style.css && lessc --clean-css ./newcss/style.less ./css/director.css", "lessSpinnerMin": "lessc --clean-css ./css/cc-spinner.less ./css/cc-spinner.css", "lint": "eslint ./ui", "fixESlint": "eslint --fix ./ui ", "runESlint": "eslint ./ui > esLint.out", "htmlESlint": "eslint ./ui -f html > eslintreport.html", "loc": "sloc ./ui ./locales ./css --exclude ./css/font-awesome --format cli-table", "buildLodash": "lodash include=debounce,throttle --output ./ui/common/lodash.js -m", "test-jest": "jest ./ui/test/main.test.js --config=jestOld.config.js > unit_testing_results_jest.txt --colors", "test-coverage": "jest --coverage ./ui/test/main.test.js --config=jestOld.config.js", "test-watch": "jest ./ui/test/main.test.js --config=jestOld.config.js > unit_testing_results.txt --colors --watchAll", "test:update": "jest --updateSnapshot", "jestTeamCityIntegration": "jest ./ui/test/main.test.js --config=jestOld.config.js SET TEAMCITY_VERSION=1 && webpack", "newTests": "jest --runInBand --config=jest.config.js", "oldTests": "jest ./ui/test/main.test.js --config=jestOld.config.js --silent", "test": "npm run newTests && npm run oldTests" }, "resolutions": { "unset-value": "2.0.1", "glob-parent": "5.1.2" }, "dependencies": { "@cas/cas-ui-utils": "1.2.41", "@citrix/rdx": "^3.0.0", "@citrixgs/g11n-sdk-react": "~22.16.2", "axios": "0.27.2", "canvas": "^2.11.2", "classnames": "2.2.5", "fixed-data-table-2": "^0.8.13", "flux": "^4.0.3", "highcharts": "9.3.3", "lodash": "4.17.21", "lodash.clonedeep": "^4.5.0", "lodash.debounce": "^4.0.8", "lodash.defer": "^4.1.0", "lodash.orderby": "^4.6.0", "moment": "2.29.2", "moment-timezone": "0.5.21", "npm-force-resolutions": "0.0.10", "rdx": "2.5.1", "react": "^17.0.2", "react-datetime": "^2.8.10", "react-dom": "^17.0.2", "react-microservice-app": "^1.2.25", "react-router-dom": "5.3.3", "react-tooltip": "5.19.0", "react-transition-group": "2.9.0", "semantic-ui-react": "^2.1.4", "serve-favicon": "~2.4.1", "validator": "13.7.0" }, "devDependencies": { "@babel/cli": "^7.22.9", "@babel/core": "^7.22.9", "@babel/helper-function-name": "^7.22.5", "@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/plugin-proposal-decorators": "^7.22.7", "@babel/plugin-proposal-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-function-sent": "^7.22.5", "@babel/plugin-proposal-json-strings": "^7.0.0", "@babel/plugin-proposal-numeric-separator": "^7.0.0", "@babel/plugin-proposal-throw-expressions": "^7.22.5", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/plugin-syntax-import-meta": "^7.0.0", "@babel/polyfill": "^7.12.1", "@babel/preset-env": "^7.22.9", "@babel/preset-react": "^7.22.5", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.1.0", "babel-jest": "^28.1.3", "babel-loader": "^8.3.0", "babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-styled-components": "1.5.1", "copy-webpack-plugin": "^6.4.1", "core-js": "2.6.12", "css-loader": "0.28.9", "debug": "^2.6.6", "enzyme": "^3.11.0", "enzyme-adapter-react-17-updated": "^1.0.2", "eslint": "^7.32.0", "eslint-plugin-react": "7.30.0", "eslint-plugin-react-hooks": "^4.6.0", "expect": "^1.20.2", "http-server": "^14.1.1", "jest": "^28.1.1", "jest-cli": "28.1.1", "jest-environment-jsdom": "28.1.1", "jest-enzyme": "7.1.2", "jest-teamcity-reporter": "^0.9.0", "jsdom": "19.0.0", "jsdom-global": "3.0.2", "less": "4.1.3", "less-plugin-clean-css": "^1.5.1 ", "react-test-renderer": "17.0.2", "regenerator-runtime": "^0.13.11", "shortid": "^2.2.14", "sinon": "^2.2.0", "sloc": "0.2.1", "string.prototype.replaceall": "^1.0.7", "style-loader": "0.18.2", "terser-webpack-plugin": "4.2.3", "url-loader": "0.5.9", "webpack": "4.46.0", "webpack-cli": "^4.9.2" } }

[mrigank214]

Tried version 5.18.0 still facing the same result.

[gabrieljablonski]

Please check out this answer on StackOverflow

https://stackoverflow.com/a/65982614/7731997

It relates to a ruby on rails setup, but maybe adding this rule to webpack configuration solves your issue.

environment.config.merge({
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      }
    ]
  }
})

If it doesn't work, also try upgrading webpack to the latest version and let us know.

[mrigank214]

It worked, thank you @gabrieljablonski :) .

[lakshya-sky]

For react-app-rewired add below code to config-overrides.js

module.exports = function override(config, env) {
  
  ...

  config.resolve.extensions.push('.mjs');
  config.module.rules.push({
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  })

  ...

};