We Keep Coding

React : "Module not found " when importing component from a local project

In a React ProjectA, I want to import and use a ./src/components/package/MyComponent from React projectB.
ProjectB is successfully compiled, without any errors. In ProjectB index.js file I have exported the component
import ReactDOM from "react-dom";
import App from './App';
import "./app.css";
export { default as MyComponent } from './components/package/MyComponent';
ReactDOM.render(<App />, document.getElementById("root"));
In PojectA package.json file, I have imported the projectB module
"dependencies": {
"#somescope/projectB": "file:../projectB",
"axios": "^0.19.2",
"date-fns": "^2.10.0",
"interweave": "^12.5.0",
"lodash": "^4.17.15",
"material-icons": "^0.3.1",
"react": "^16.8.0",
"react-dom": "^16.8.0",
"react-grid-system": "^6.2.4",
"react-intersection-observer": "^8.26.2",
"react-scripts": "3.2.0"
},
I have run "npm install", "npm install #somescope/projectB" and "npm install --save ../projectB", to install the projectB module into projectA. After running these commands I can see projectB is present under projectA/node_modules folder.
But when I try to import and use the MyComponent :
import {MyComponent} from "#somescope/projectB";
and run "npm start" command it is giving below error in console :
Module not found: Can't resolve '#somescope/projectB'
Can anyone please help, what am I doing wrong and how to resolve this error?

export { default as MyComponent } from './components/package/MyComponent';
That line seems like you made a default export. If that is the case then to import that component you would need to do this:
import MyComponent from "#somescope/projectB";
I removed the {} since it might be a default export.

React.js Hooks: TypeError: Object(...) is not a function [duplicate]

I'm running the latest version of React and I'm getting this error
I have a simple Component using React Hooks as you can see here :
import React, { useState } from "react";
const AppFunction = () => {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<h1>Count:{count} </h1>
<button onClick={incrementCount}>Click Me</button>
</div>
);
};
export default AppFunction;
Everything i've found about it on stack overflow says to upgrade the libraries but I have the latest version (16.7.0) and have tried the alpha version with no luck , what am i doing wrong?
package.json
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.1"
},

UPDATE
Hooks are now release as part of React v16.8.0. You can use hooks by upgrading your react version
See the docs for more details on the APIs
React 16.7.0 Doesn't contain hooks.
As per the React blog
Our latest release includes an important performance bugfix for
React.lazy. Although there are no API changes, we’re releasing it as a
minor instead of a patch.
In order to run hooks in your code, refer How to use new Feature Hooks in React?

I tried to use the following in package.json but do not work.
"react": "16.7.0-alpha.2",
"react-dom": "16.7.0-alpha.2",
What worked is the following
"react": "next",
"react-dom": "next",
EDIT
React version v16.8.0 has Hooks inside. Use that.

edit package.json
"react": "16.7.0-alpha.2",
"react-dom": "16.7.0-alpha.2",
"react-router-dom": "4.4.0-beta.6",
and run yarn
The react released 16.7.0, but there are no react hooks. If you use '^react#16.7.0-alpha.2', remove yarn.lock, it will install react#16.7.0. So you must delete '^' and use 'react#16.7.0-alpha.2'.

Module not found: Can't resolve 'react-datepicker

I'm trying to use date picker in a MERN tutorial, but it fails to compile because it can't resolve 'react-datepicker'. I've rm -rf node_modules and datepicker to no avail.
component.js
import axios from 'axios';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
package.json
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-datepicker": "^2.5.0",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1"
},
I'm wondering if the version (2.10.0) I've installed is somehow not compatible with something... when I installed there were no err or missing required dependencies.

I have resolved this problem
Type npm install react-datepicker --save in terminal on local environment or on production
Then import these in your component
import DatePicker from "react-datepicker"; used this in component where i need date-picker
import "react-datepicker/dist/react-datepicker.css"; used this app.js
it worked for me.

import DatePicker from 'react-datepicker/dist/react-datepicker';
Use this.
The same problem occurred with my code too, and this worked.

Good grief.
'../react-datepicker';
Thanks for helping me rubber duck!

None of the above code snippet worked for me.. But the below snippet worked fine in my react application.
https://github.com/Hacker0x01/react-datepicker/issues/879
import React, {useEffect, useState} from "react";
import DatePicker from "react-datepicker"
import "react-datepicker/src/stylesheets/datepicker.scss";
export default function SimpleClassDatePicker() {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={date => setStartDate(date)} />
);
};

"npm i react-date-picker" It works for me ."npm i react-date-picker"not "npm i react-datepicker"

Go and check react-date-picker folder in node_modules.
Mine was not react-datepicker..
So importing should be;
import DatePicker from "react-date-picker";
import "react-date-picker/dist/DatePicker.css";

Vue/Vuetify - Unknown custom element: <v-app> - did you register the component correctly?

I am new to Vue and Vuetify. I just created quick app to check both of them. But I am a running into issues in beginning. The vue fails to identify vuetify components despite following all the steps outlined in document. The error is like below -
vue.runtime.esm.js?ff9b:587 [Vue warn]: Unknown custom element:
- did you register the component correctly? For recursive
components, make sure to provide the "name" option.
found in
---> at src\App.vue
You can access the entire code at sandbox https://codesandbox.io/s/40rqnl8kw

You're likely experiencing a problem with the order of your operations. You're defining your own App component that uses the v-app component before you've even told Vue to make use of it, so Vue assumes you're using your own custom v-app component.
Place Vue.use(Vuetify) before starting any Vue instances via new Vue() that require Vuetify components, or place it within the component definitions themselves right at the top of the <script> tag after importing Vue and Vuetify within the single file component. Don't worry if you have more than one Vue.use(Vuetify) statement because only the first one will do anything--all subsequent calls will simply do nothing.
Original - Vue.use() is called before new Vue(), resulting in an error.
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});
Vue.use(Vuetify);
Fix - Calling new Vue() after Vue.use() allows Vue to resolve the dependency correctly.
Vue.use(Vuetify);
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});

There is another reason for this error that I recently ran into.
I recently upgraded from Vuetify 1.5 to 2.x and even though I had the order of operations correct as in the currently accepted answer here I was still receiving the error about v-app being unknown:
Unknown custom element: <v-app> - did you register the component
correctly? For recursive components, make sure to provide the "name"
option.
Turns out that the upgrade process requires the following addition to package.json devDependencies section which didn't originally exist in my vuetify 1.5x package:
"vuetify-loader": "^1.3.0"
(1.3.0 current version as of this writing)
Once I added that the error went away.

If you are coming from Google: for me it was breaking changes from v1 to v2, that made most Codepen examples useless.
I had to change this to get a very simple Vuetify app with navigation drawers to run again:
remove toolbar from <v-app toolbar>
replace v-toolbar with v-app-bar
replace v-app-bar-side-icon with v-app-bar-nav-icon
replace v-app-bar-title with v-toolbar
replace v-list-tile to v-list-item
replace all flat with text
Maybe this helps someone.
(edited to include cong yu's remark)

Edit: it looks like VuetifyLoader will automatcially do that for you.
Old Answer: Another possible problem is if you have a la carte enabled you will need to also specify all the components that you want included:
import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
VApp, // required
VNavigationDrawer,
VFooter,
VToolbar,
VFadeTransition
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'
Vue.use(Vuetify, {
components: {
VApp,
VNavigationDrawer,
VFooter,
VToolbar,
VFadeTransition
},
directives: {
Ripple
}
})

With vuetify v2.x you should register the vuetify plugin as follows :
import Vue from 'vue'
/** register vuetify plugin globally **/
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
const vuetify= new Vuetify(opts)
/****/
new Vue({
vuetify,
}).$mount('#app')
Vuetify v3
import { createApp } from 'vue'
import App from './App.vue'
/*****/
import '#mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify= createVuetify({
components,
directives,
})
/****/
const app = createApp(App)
app.use(vuetify)
app.mount('#app')

I experienced the same issue. It was caused by the cache of the browser make sure to clear the cache as well.

You will get this error even after installing the official Vuetify 3 (Alpha), due to the standard demo version generated during the install lacking adding components, i.e:
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
const vuetify = createVuetify({
components,
directives,
});
Thus the working version of main.ts for Vuetify 3 is:
import "vuetify/styles"; // Global CSS has to be imported
import { createApp } from "vue";
import { createVuetify } from "vuetify";
import App from "./App.vue";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
const app = createApp(App);
const vuetify = createVuetify({
components,
directives,
});
app.use(vuetify).mount("#app");
// or app.use(vuetify); app.mount("#app");

In case someone like me new working on vue and nuxt. My mistake was that I did not put the s in the last. buildModule should be buildModules.
My nuxt.config.js:
export default {
buildModules:[
"#nuxtjs/vuetify"
],
module:[
"#nuxtjs/axios"
],
components:true
}

Importing lodash functions globally in Angular 4 app

I'm trying to optimise my Angular 4 application by importing lodash functions globally to the app.module.ts. I tried:
import { some } from 'lodash/fp/some';
import _ from 'lodash/wrapperLodash';
However, I can't get the reference to that function in a component. This will throw an error:
_.some(myVar, { lat: null });
My dependencies (the ones related to the topic):
"devDependencies": {
"#angular/compiler": "^4.2.4",
"#angular/core": "^4.2.4",
"#types/lodash": "^4.14.104",
"lodash": "^4.17.5",
"typescript": "~2.3.3"
}
Error:
ERROR TypeError: __WEBPACK_IMPORTED_MODULE_0_lodash_fp_wrapperLodash___default.a.some is not a function

I still don't understand why people use lodash with all posibilities that ES6 already has.
https://www.sitepoint.com/lodash-features-replace-es6/
But if you want to use it, try to import it in this way:
import * as _ from "lodash";
import * as _ from "lodash";
Please note that If you use import _ from
“lodash”, you will receive following error that “Module ‘lodash’ has
no default export”:
From https://hassantariqblog.wordpress.com/2016/10/15/angular2-import-lodash-into-angular2-application-using-typescript/
Or for just one function of lodash:
import wrapperLodash from 'lodash/wrapperLodash';