I try to run a REACT application on bluemix / IBMCloud which runs successful on my local workstation.
I get the error Module not found: Can't resolve 'watson-react-components'
when I invoke the application (deploy to bluemix is successful)
Here the import statement im my java script code
import React from 'react';
import './Conversation.css';
import { InputWithButton } from 'watson-react-components';
import Message from './Message.js';
I install the packagethe following install commands
# Install & build
npm install && npm install watson-react-components && npm run build
this is what I get during the installation of the packages
│ └── whatwg-fetch#2.0.3
└─┬ watson-react-components#0.6.16
├── map-range#0.1.2
├── numeral#2.0.6
├─┬ prismjs#1.11.0
│ └─┬ clipboard#1.7.1
│ ├─┬ good-listener#1.2.2
│ │ └── delegate#3.2.0
│ ├── select#1.1.2
│ └── tiny-emitter#2.0.2
Here the error message on the app
Failed to compile
./src/Conversation.js
Module not found: Can't resolve 'watson-react-components' in '/home/vcap/app/src'
sorry sorry --- the problem was sitting in front of the computer. I missed the cf push command in the deployment script.
Problem solved!!! sorry again
The bug is in the command to install the app.
It should be npm install && npm install --save watson-react-components && npm run build
You forgot a --save
Related
Using "react-bootstrap"
import { useAccordionButton } from 'react-bootstrap/AccordionButton';
Gives error message:
Module not found: Can't resolve 'react-bootstrap/AccordionButton'
npm list
bsn-gui#0.1.0 C:\goproj\src\github.com\amortaza\bsn-gui
├── #testing-library/jest-dom#5.14.1
├── #testing-library/react#11.2.7
├── #testing-library/user-event#12.8.3
├── bindings#1.5.0 extraneous
├── bootstrap#5.1.1
├── file-uri-to-path#1.0.0 extraneous
├── nan#2.15.0 extraneous
├── react-bootstrap-validation#0.1.11
├── react-bootstrap#1.6.3
├── react-dom#17.0.2
├── react-scripts#4.0.3
├── react-split#2.0.13
├── react#17.0.2
└── web-vitals#1.1.2
Accordion.Button is available in react-bootstrap v5 (v2.0.0-rc0)
Accordion.Button
You have v4 react-bootstrap#1.6.3 installed.
Uninstall the current version and install latest.
npm uninstall -S react-bootstrap
npm install -S react-bootstrap#2.0.0-rc.0
Your NPM list states you are using react-bootstrap#1.6.3 yet your code is referencing the 2.0.0-rc.0 API. Of course, as with all third-party tools, you must reference the documentation relevant to the version you choose to use. Refer to the proper documentation for 1.6.3, or change your version to 2.0.0-rc.0 if you need that API.
I have a react.js project and have just gotten started with testing. I installed the react-testing-library and jest to get started with it.
However, when I run
npm test
I get the following error.
/Users/Tomascdmota/Downloads/Trust-Motores-main/node_modules/react-scripts/node_modules/jest-cli/build/cli/index.js:40
execute(argv, argv.projects, result => {
^
TypeError: execute is not a function
at Object.run (/Users/Tomascdmota/Downloads/Trust-Motores-main/node_modules/react-scripts/node_modules/jest-cli/build/cli/index.js:40:3)
at Object.<anonymous> (/Users/Tomascdmota/Downloads/Trust-Motores-main/node_modules/react-scripts/scripts/test.js:104:6)
at Module._compile (node:internal/modules/cjs/loader:1091:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1120:10)
at Module.load (node:internal/modules/cjs/loader:971:32)
at Function.Module._load (node:internal/modules/cjs/loader:812:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
at node:internal/main/run_main_module:17:47
My jest version is 26.6.0
I haven't added anything.
I have deleted the node_modules, package-lock.json, yarn.lock and removed jest from the dependencies/DevDependencies. After that I ran yarn install.
I still get that same error. I have googled the error and looked it up here on SO but came short-handed.
Any helps is appreciated.
I have deleted the node_modules, package-lock.json, yarn.lock
If you had package-lock.json and yarn.lock files at the same time, it looks like at some point you probably used both yarn and npm to install packages, which can definitely cause conflicts.
In terms of this specific issue, I ran into the exact same problem and it was due to a package conflict with jest-cli. The solution in my case was to upgrade react-scripts, e.g. (pick one):
Yarn
yarn add react-scripts
Or NPM
npm i react-scripts#latest
Details
In case it helps, here are more details on my specific issue and how I resolved it. I got the same error and it looks like I had two different versions of jest-cli installed:
$ npm list jest-cli
├─┬ jest-enzyme#4.2.0
│ └─┬ jest#27.5.1
│ └── jest-cli#27.5.1
└─┬ react-scripts#1.1.0
└─┬ jest#20.0.4
└── jest-cli#20.0.4
In my case, the solution was to upgrade react-scripts:
npm i react-scripts#latest
It looks like the dependency conflict is now resolved:
$ npm list jest-cli
└─┬ jest-enzyme#4.1.1
└─┬ jest#27.5.1
└── jest-cli#27.5.1
In fact, it doesn't even show jest-cli as a dependency of react-scripts any more, because it's using the same version of jest as jest-enzyme now:
$ npm list jest
├─┬ jest-enzyme#4.1.1
│ └── jest#27.5.1
└─┬ react-scripts#5.0.0
├─┬ jest-watch-typeahead#1.0.0
│ └── jest#27.5.1 deduped
└── jest#27.5.1 deduped
I am trying to follow this tutorial on https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/
The commands that are given in the tutorial are as follows
# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox
# Install dependencies
yarn
# Run the test runner (Jest) in a terminal:
yarn test --watchAll
# Start the component explorer on port 6006:
yarn storybook
# Run the frontend app proper on port 3000:
yarn start
I am however running into an issue when yarn storybook on my wsl2 ubuntu terminal.
Here is the error
yarn storybook
yarn run v1.22.5
warning ../package.json: No license field
$ start-storybook -p 6006 -s public
info #storybook/react v6.3.0
info
info => Loading presets
info => Serving static files from ./public at /
info => Loading 1 config file in "/mnt/d/taskbox/.storybook"
info => Loading 9 other files in "/mnt/d/taskbox/.storybook"
info => Adding stories defined in "/mnt/d/taskbox/.storybook/main.js"
info => Using prebuilt manager
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack4 setup
(node:7126) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /mnt/d/taskbox/node_modules/postcss-safe-parser/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
17% building 63/88 modules 25 active /mnt/d/taskbox/node_modules/global/window.jsBrowserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
webpack built preview 0ef1297f848efab9f24c in 139265ms
╭─────────────────────────────────────────────────────╮
│ │
│ Storybook 6.3.0 started │
│ 3.97 min for preview │
│ │
│ Local: http://localhost:6006/ │
│ On your network: http://172.22.229.210:6006/ │
│ │
│ A new version (6.3.6) is available! │
│ │
│ Upgrade now: npx sb#latest upgrade │
│ │
│ Read full changelog: https://git.io/fhFYe │
│ │
╰─────────────────────────────────────────────────────╯
node:internal/errors:456
ErrorCaptureStackTrace(err);
^
Error: spawn wslvar ENOENT
at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
at onErrorNT (node:internal/child_process:480:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -2,
code: 'ENOENT',
syscall: 'spawn wslvar',
path: 'wslvar',
spawnargs: [ 'systemroot' ],
cmd: 'wslvar systemroot',
stdout: '',
stderr: ''
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I've been having a hard time finding similar errors to go off of since it seems like a rare error. I suspect it's related to me running storybook on WSL2 though.
According to this Github comment, the error is usually caused by either:
powershell.exe not being in the path (unlikely, but could be the case if a /etc/wsl.conf explicitly disabled Windows PATH interop).
Missing wslvar, which is part of the wslu (WSL Utilities) package. While it's installed by default in some WSL distributions, it may not be up-to-date or installed in some. See the Github page for installation instructions for each distribution.
I'm getting back this error when I try NPM start on windows after creating a react file.
$ npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\Ronan\desktop\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\Ronan\desktop\package.json'
Edit: Heres a pic of my file tree if that helps.
To get a react project running, you would have to use a tool called the Node Package Execute "npx" to kickstart a create-react-app project, see illustration below:
npx create-react-app your-app-name
Doing this will generate a small react project with all the directories/files you need to start building your react app,
The directory you should get will look like the below:
your-app-name
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
running npm start inside this directory should kickstart a localhost:3000 server where you can see a preview of your project in your browser.
I am using Linux and I want to know if I can check what version of angular-material am using. I'm using bower for installing/updating packages.
Looks like you can use npm ls #angular/material to tell you the exact version.
If installed with npm
npm list #angular/material
If installed with yarn
yarn list #angular/material
If installed with bower, as in OP case
You can check out what version of angular-material you use by opening the following file:
bower_components/angular-material/bower.json
which will display something like that:
{
"name": "angular-material",
"version": "0.11.0",
...
}
Or as Matt pointed, use bower list, then lookup for angular-material.
if you have npm installed the following may help
npm angular/material -v
I normally use ng --version, this will list the version of everything I have installed
Package Version
--------------------------------------------------------------------
#angular-devkit/architect 0.803.26
#angular-devkit/build-angular 0.803.26
#angular-devkit/build-optimizer 0.803.26
#angular-devkit/build-webpack 0.803.26
#angular-devkit/core 8.3.26
#angular-devkit/schematics 8.3.26
#angular/cdk 8.2.3
#angular/cli 8.3.26
#angular/compiler-cli 8.2.14
#angular/material 8.2.3
#ngtools/webpack 8.3.26
#nguniversal/module-map-ngfactory-loader 8.1.1
#schematics/angular 8.3.26
#schematics/update 0.803.26
rxjs 6.5.4
typescript 3.5.3
webpack 4.39.2
To check the version of a bower package from the terminal, you can use bower list which will render a dependency tree like this one:
bower check-new Checking for new versions of the project dependencies...
My App#0.0.1 C:\Development\my-app
├── angular#1.4.7 (latest is 1.5.1-build.4592+sha.c4e47e4)
├─┬ angular-animate#1.4.7 (latest is 1.5.1-build.4592+sha.c4e47e4)
│ └── angular#1.4.7 (latest is 1.5.1-build.4592+sha.c4e47e4)
├─┬ angular-aria#1.4.7 (latest is 1.5.1-build.4592+sha.c4e47e4)
│ └── angular#1.4.7
├─┬ angular-cookies#1.4.7 (latest is 1.5.1-build.4592+sha.c4e47e4)
│ └── angular#1.4.7
├── angular-local-storage not installed
├─┬ angular-material#0.11.2 (latest is 1.0.5)
│ ├── angular#1.4.7 (1.5.1-build.4592+sha.c4e47e4 available)
│ ├── angular-animate#1.4.7 (1.5.1-build.4592+sha.c4e47e4 available)
│ └── angular-aria#1.4.7 (1.5.1-build.4592+sha.c4e47e4 available)
├─┬ angular-resource#1.4.7 (latest is 1.5.1-build.4592+sha.c4e47e4)
│ └── angular#1.4.7
└─┬ angular-sanitize#1.4.7 (latest is 1.5.1-build.4592+sha.c4e47e4)
└── angular#1.4.7
In my example, angular-material is installed with version 0.11.2 (and I should update it to 1.0.5).
To process this (and a lot more) information via a node script, for example in Jenkins, you can use the --json parameter: bower list --json.
Go to your project, and open the following file:
node_modules/#angular/material/package.json
In this file, the ID contains the version installed for that project.