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.
Related
I was trying to set up an existing project in a new development server. However I get the following error:
./node_modules/react-router-dom/esm/react-router-dom.js
Attempted import error : 'createLocation' is not exported from 'history'.
Searching for a solution I found that it might be because there are conflicting versions of the history and react-router-dom. It seems that react-router-dom 5.2.0 works with history 4.9.0, and I have history 5.0.0. The solution should be downgrading history to 4.9.0, but in the existing project, with the same versions, this error does not appear.
I checked the libraries versions with npm list -depth=0
├── #ant-design/compatible#1.0.8
├── #ant-design/icons#4.2.2
├── #babel/preset-env#7.11.5
├── #babel/preset-react#7.10.4
├── #craco/craco#5.7.0
├── #types/jest#26.0.14
├── #types/jwt-decode#2.2.1
├── #types/node#14.11.1
├── #types/react-dom#16.9.8
├── #types/react-highlight-words#0.16.1
├── #types/react-redux#7.1.9
├── #types/react-resizable#1.7.2
├── #types/react-router-dom#5.1.5
├── #types/react-table#7.0.23
├── #types/react#16.9.49
├── #types/redux-logger#3.0.8
├── #typescript-eslint/eslint-plugin#3.10.1
├── #typescript-eslint/parser#3.10.1
├── antd#4.10.2
├── axios#0.19.2
├── bootstrap#4.5.2
├── craco-less#1.17.0
├── env-cmd#10.1.0
├── eslint-plugin-react-hooks#4.1.2
├── eslint-plugin-react#7.20.6
├── eslint#6.8.0
├── history#5.0.0
├── js-file-download#0.4.12
├── jwt-decode#3.1.2
├── lodash#4.17.20
├── mocker-data-generator#2.9.0
├── moment#2.28.0
├── node-sass#4.14.1
├── password-validator#5.1.0
├── prettier#1.19.1
├── query-string#6.13.2
├── react-dom#16.13.1
├── react-highlight-words#0.16.0
├── react-redux#7.2.1
├── react-resizable#1.11.0
├── react-router-dom#5.2.0
├── react-scripts#3.4.3
├── react-test-renderer#16.13.1
├── react#16.13.1
├── redux-devtools-extension#2.13.8
├── redux-logger#3.0.6
├── redux-thunk#2.3.0
├── redux#4.0.5
├── resize-observer-polyfill#1.5.1
├── rsuite#4.8.2
├── typescript#3.9.7
├── webpack-dev-middleware#3.7.2
└── webpack-hot-middleware#2.25.0
Ideally I wanted to use the same versions as the existing project, however I dont understand how the project is working with the conflicting versions of history and react-router-dom.
History 5.x.x does not export createLocation. Therefore it will never work if you have that history version in your root package.json and trying to do that import from your project.
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 have created my first react-js app, just saying 'Hello world'. After I change the 'Hello world' to another text, nothing changes when I refresh the browser, even if I empty the cache. The changes take place only when I close the local server and reopen it with npm start. Could anyone help me?
If you want to create new react app from-scratch. You can use :
> npx create-react-app my-app
> cd my-app
> npm start
After that, you will have the initial configured react project structure :
my-app
├── 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
└── registerServiceWorker.js
See react app seed in Github : https://github.com/facebook/create-react-app.
Sam's answer is probably the best way to do it but if you want do refresh it without adding all the bells and whistles of create-react-app you can go for browsersync.
https://browsersync.io/
It watches over your CSS, HTML, JS. I usually use create-react-app but in some cases browsersync does the trick as well.
I consider myself above novice with some web development experience, and have been practicing Angular. However, I'm not finding the answer on how to implement this one step from the angular-ui.github.io/bootstrap page.
It says to download the package to add it to my project, and to add this to the Angular module:
angular.module('myModule', ['ui.bootstrap']);
I cannot find the life of me through searching stackoverflow, or tutorials on where to add this in my project.
Now, I did use a CLI command in the project directory:
npm install bootstrap#4.0.0-beta
Testing this with the bootstrap tags in my divs shows that it works, just not the programming part to have the interactive content work.
Would someone mind pointing me in the right direction or clarify what I'm missing here?
Thank you all for your help!
---edit---
AHONCIAN-M-X2UY:bootstrap ahoncian$ npm ls --depth=0
bootstrap#0.0.0 /Users/ahoncian/OneDrive/angulartraining/bootstrap/bootstrap
├── #angular/common#2.4.10
├── #angular/compiler#2.4.10
├── #angular/compiler-cli#2.4.10
├── #angular/core#2.4.10
├── #angular/forms#2.4.10
├── #angular/http#2.4.10
├── #angular/platform-browser#2.4.10
├── #angular/platform-browser-dynamic#2.4.10
├── #angular/router#3.4.10
├── #types/jasmine#2.5.38
├── #types/node#6.0.88
├── angular-cli#1.0.0-beta.28.3
├── angular-ui-bootstrap#2.5.0 extraneous
├── codelyzer#2.0.1
├── core-js#2.5.1
├── jasmine-core#2.5.2
├── jasmine-spec-reporter#2.5.0
├── karma#1.2.0
├── karma-chrome-launcher#2.2.0
├── karma-cli#1.0.1
├── karma-jasmine#1.1.0
├── karma-remap-istanbul#0.2.2
├── protractor#4.0.14
├── rxjs#5.4.3
├── ts-helpers#1.1.2
├── ts-node#1.2.1
├── tslint#4.5.1
├── typescript#2.0.10
└── zone.js#0.7.8
npm ERR! extraneous: angular-ui-bootstrap#2.5.0 /Users/ahoncian/OneDrive/angulartraining/bootstrap/bootstrap/node_modules/angular-ui-bootstrap
npm ERR! extraneous: tsickle#0.2.5 /Users/ahoncian/OneDrive/angulartraining/bootstrap/bootstrap/node_modules/#angular-cli/ast-tools/node_modules/tsickle
AHONCIAN-M-X2UY:bootstrap ahoncian$
Following along the getting started example from ZEIT for next.js, I'm getting this error:
error in ./pages/index.js
Module build failed: ReferenceError: [BABEL] /Users/Projects/nextDemo/pages/index.js: Using removed Babel 5 option: /Users/Projects/.babelrc.optional - Put the specific transforms you want in the `plugins` option
What is this error - is it trying to use my globally installed babel? Is there a version mismatch or an update I should be doing?
This is the basic steps I did to get here:
$ npm install next --save
$ mkdir pages
//pages/index.js:
import React from 'react'
export default () => <div>Hello world!</div>
Add a script to the package.json like this:
{
"scripts": {
"dev": "next"
}
}
$ npm run dev
and the installed packages:
└─┬ next#1.2.3
├── ansi-html#0.0.6
├── babel-core#6.18.2
├── babel-generator#6.19.0
├── babel-loader#6.2.8
├── babel-plugin-module-resolver#2.4.0
├── babel-plugin-react-require#3.0.0
├── babel-plugin-transform-async-to-generator#6.16.0
├── babel-plugin-transform-class-properties#6.19.0
├── babel-plugin-transform-object-rest-spread#6.19.0
├── babel-plugin-transform-runtime#6.15.0
├── babel-preset-es2015#6.18.0
├── babel-preset-react#6.16.0
├── babel-runtime#6.18.0
├── cross-spawn#5.0.1
├── del#2.2.2
├── domready#1.0.8
├── friendly-errors-webpack-plugin#1.1.1
├── glamor#2.20.8
├── glob-promise#2.0.0
├── htmlescape#1.1.1
├── is-windows-bash#1.0.2
├── json-loader#0.5.4
├── loader-utils#0.2.16
├── minimist#1.2.0
├── mkdirp-then#1.2.0
├── mz#2.6.0
├── path-match#1.2.4
├── react#15.4.1
├── react-dom#15.4.1
├── react-hot-loader#3.0.0-beta.6
├── read-pkg-up#2.0.0
├── send#0.14.1
├── source-map-support#0.4.6
├── strip-ansi#3.0.1
├── url#0.11.0
├── webpack#1.13.3
├── webpack-dev-middleware#1.8.4
├── webpack-hot-middleware#2.13.2
└── write-file-webpack-plugin#3.4.2
It uses your .babelrc file from the parent directory because:
Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within.
Use "babelrc": false to stop lookup behavior.