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.

Vue template or render function not defined

I have problem with Vue rendering on my website. I have downloaded some forum app from github, I had some difficoulties with installing it, because npm is not really updated and app is from 2 years ago. I managed to fix everything about npm with package.json like:
"devDependencies": {
"axios": "^0.18.1",
"bootstrap": "^4.4.1",
"cross-env": "^5.2.1",
"jquery": "^3.5.0",
"laravel-mix": "^5.0.4",
"lodash": "^4.17.15",
"popper.js": "^1.16.1",
"resolve-url-loader": "^3.1.1",
"sass-loader": "^8.0.2",
"vue": "2.5.21",
"vue-template-compiler": "2.5.21"
},
"dependencies": {
"laravel-echo": "^1.7.0",
"node-sass": "^4.13.1",
"pusher-js": "^4.4.0",
"vue-loader": "15.5.1",
"vue-router": "^3.1.6",
"vue-simplemde": "^1.0.4",
"vuetify": "^1.5.24"
}
But now the problem is something with rendering vue:
app.js:71622 [Vue warn]: Failed to mount component: template or render
function not defined.
This is how app.js looks like:
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'
Vue.use(Vuetify)
Vue.use(VueSimplemde)
import md from 'marked'
window.md = md;
import User from './Helpers/User'
window.User = User
import Exception from './Helpers/Exception'
window.Exception = Exception
window.EventBus = new Vue();
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('AppHome', require('./components/AppHome.vue'));
import router from './Router/router.js'
const app = new Vue({
el: '#app',
router
});

You are getting that error because your App has no render template specified at all, new Vue() is missing render option called Render Function.
This would contain the minimum required HTML for the app to work where most importantly: <div id="app"></div> is required because the el option set to #app is telling Vue what html element it should mount it's self to when rendering.
The most common way of of providing the instance with a template is to have a dedicated component that would be home to apps top level html layout but the minimum requirement is as follows:
// App.vue
<template>
<div id="app"></div>
</template>
// app.js
import Vue from 'vue'
import App from './App.vue' // <-- MAIN TEMPLATE
import router from './router'
const app = new Vue({
el: '#app',
render: h => h(App), // <-- REGISTER MAIN TEMPLATE
router
});
However since this source appears to be a Laravel Project, clearly the HTML is in a blade template rendered server side and I always find Laravel rendering Vue components server side to be a wonkey concept, I prefer an SPA with Laravel Acting as an API.
Perhaps this resource will help https://vuejsdevelopers.com/2017/11/06/vue-js-laravel-server-side-rendering/

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";

How to use third-party library (gridstack.js) with Typescript and React

Maybe I'm missing some fundamental concepts of Typescript and/or React, but I can't make the following to work:
I'm using a React/Typescript Boilerplate as my app template. (No problems here).
In the other hand, I'm using a plain JS library called GridStack.js that extends jQuery with $.fn.gridstack(options). When you import this library into a simple HTML page you just need to initialize it by calling $('.grid-stack').gridstack(options). (Still no problems).
Then my objective is to create a TypeScript/React wrapper for gridstack.js than can be used in my boilerplate. This is where I have problems. I'm a bit lost between typescript and react, I even found a wrapper for React and also Gridstack.js typings but I can't make everything work together. This is why I decided to try to create my own wrapper but still without success. Specially where to import either react-gridstack or gridstack to make it work.
Can someone explain what am I missing? This is my code so far:
gridstackWrapper.tsx:
import * as React from 'react';
import * as $ from 'jquery';
export default class extends React.Component {
public shouldComponentUpdate() {
return false;
}
public componentDidMount() {
$(this.refs.gridstack).addClass('a-new-class'); // THIS WORKS
// ERROR: TypeError: $(...).gridstack is not a function
// So basically $.fn.gridstack(options) is not working
$(this.refs.gridstack).gridstack(this.gridstackOptions);
}
public render() {
return (
<div ref="gridstack" className="grid-stack" />
);
}
private gridstackOptions = {
float: false,
animate: true,
resizable: {handles: 'se, sw'},
verticalMargin: 12,
placeholderText: 'Move Control Here',
minWidth: 767,
};
}
index.tsx:
import * as React from 'react';
import GridstackWrapper from './gridstackWrapper';
class About extends React.Component<any, any> {
public render() {
return (
<GridstackWrapper />
);
}
}
export { About }
package.json:
"devDependencies": {
"#types/gridstack": "0.0.38",
"#types/jquery": "3.2.12",
"#types/jqueryui": "1.11.36",
"#types/lodash": "4.14.74",
}
"dependencies": {
"gridstack": "0.3.0",
"jquery": "3.2.1",
"jquery-ui": "1.12.1",
"lodash": "4.17.4"
}
Any help would be really appreciated, especially if I'm missing any fundamental concepts about React and Typescript.
Thanks in advance!

You need to install the type definitions for gridstack.
Run npm install --save-dev #types/gridstack.
This will install the .d.ts files from DefinitelyTyped.