Unable to add react-widgets/ComboBox to project on Ubuntu

Question

I'm having a hard time deploying my app.

Using node 16.14.2 and npm 8.5.0.

My package versions are as follows:

{  
 "name": "tic-tac-toe",  
 "version": "0.1.0",  
 "private": true,  
 "dependencies": {  
 "@testing-library/jest-dom": "\^5.16.3",  
 "@testing-library/react": "\^12.1.4",  
 "@testing-library/user-event": "\^13.5.0",  
 "react": "\^18.0.0",  
 "react-dom": "\^18.0.0",  
 "react-scripts": "5.0.0",  
 "react-widgets": "\^5.8.4",  
 "web-vitals": "\^2.1.4"  
  },

I am able to get the issue simply by creating a default app ( npx create-react-app my-app , adding import ComboBox from 'react-widgets/ComboBox'; to my index.js file, installing dependencies with npm install && npm install react-widgets , and running npm start .

The console output is as follows:

Failed to compile.
Module not found: Error: Can't resolve 'react-widgets/ComboBox' in '/home/twtduck/ttt/src'
assets by path static/ 1.62 MiB
  asset static/js/bundle.js 1.61 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.91 KiB [emitted] 1 related asset
  asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 546 bytes [emitted]
runtime modules 31.7 KiB 16 modules
modules by path ./node_modules/ 1.48 MiB 96 modules
modules by path ./src/ 18.1 KiB
  modules by path ./src/*.css 8.82 KiB
    ./src/index.css 2.72 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css 1.37 KiB [built] [cod
e generated]
    ./src/App.css 2.72 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css 2 KiB [built] [code gen
erated]
  modules by path ./src/*.js 5.71 KiB
    ./src/index.js 1.83 KiB [built] [code generated]
    ./src/App.js 2.49 KiB [built] [code generated]
    ./src/reportWebVitals.js 1.39 KiB [built] [code generated]
  ./src/logo.svg 3.61 KiB [built] [code generated]
WARNING in src/index.js
  Line 7:8:  'ComboBox' is defined but never used  no-unused-vars
ERROR in ./src/index.js 9:0-46
Module not found: Error: Can't resolve 'react-widgets/ComboBox' in '/home/twtduck/ttt/src'
resolve 'react-widgets/ComboBox' in '/home/twtduck/ttt/src'
  Parsed request is a module
  using description file: /home/twtduck/ttt/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/twtduck/ttt/src/node_modules doesn't exist or is not a directory
      looking for modules in /home/twtduck/ttt/node_modules
        existing directory /home/twtduck/ttt/node_modules/react-widgets
          using description file: /home/twtduck/ttt/node_modules/react-widgets/package.json (relative path: .)
            using description file: /home/twtduck/ttt/node_modules/react-widgets/package.json (relative path: ./ComboBox)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox doesn't exist
              .web.mjs
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.web.mjs doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.mjs doesn't exist
              .web.js
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.web.js doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.js doesn't exist
              .json
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.json doesn't exist
              .web.jsx
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.web.jsx doesn't exist
              .jsx
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.jsx doesn't exist
              as directory
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox doesn't exist
      /home/twtduck/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /home/twtduck/ttt/node_modules
        existing directory /home/twtduck/ttt/node_modules/react-widgets
          using description file: /home/twtduck/ttt/node_modules/react-widgets/package.json (relative path: .)
            using description file: /home/twtduck/ttt/node_modules/react-widgets/package.json (relative path: ./ComboBox)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox doesn't exist
              .web.mjs
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.web.mjs doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.mjs doesn't exist
              .web.js
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.web.js doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.js doesn't exist
              .json
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.json doesn't exist
              .web.jsx
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.web.jsx doesn't exist
              .jsx
                Field 'browser' doesn't contain a valid alias configuration
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox.jsx doesn't exist
              as directory
                /home/twtduck/ttt/node_modules/react-widgets/ComboBox doesn't exist

The strange part about this is that it works fine on Windows, but not Ubuntu. I've tried re-installing the server from a fresh image, to no success. I've also tried downgrading to react 17, which also doesn't work. Suggestions?

Answer 1

woltjer

can you try with this?

import { ComboBox } from 'react-widgets'

with this way you will get a part of react-widgets

that is similar to:

import { useState, useContex } from 'react'