We Keep Coding

I can't use react-calendar-datetime-picker in React project built with vite

Install react-calendar-datetime-picker and every time I try to launch the project it just goes blank. This is the error it gives me in the console:
[ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "react-calendar-datetime-picker". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "react-calendar-datetime-picker". The package may have incorrect main/module/exports specified in its package.json.
node_modules/vite/dist/node/chunks/dep-611778e0.js:38290:10:
38290 │ throw new Error(`Failed to resolve entry for ...
╵ ^
at packageEntryFailure (/home/guille/Documentos/pg_4/client/node_modules/vite/dist/node/chunks/dep-611778e0.js:38290:11)
at resolvePackageEntry (/home/guille/Documentos/pg_4/client/node_modules/vite/dist/node/chunks/dep-611778e0.js:38286:9)
at tryNodeResolve (/home/guille/Documentos/pg_4/client/node_modules/vite/dist/node/chunks/dep-611778e0.js:38093:20)
at Context.resolveId (/home/guille/Documentos/pg_4/client/node_modules/vite/dist/node/chunks/dep-611778e0.js:37901:28)
at Object.resolveId (/home/guille/Documentos/pg_4/client/node_modules/vite/dist/node/chunks/dep-611778e0.js:36470:55)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async resolve (/home/guille/Documentos/pg_4/client/node_modules/vite/dist/node/chunks/dep-611778e0.js:36682:26)
at async /home/guille/Documentos/pg_4/client/node_modules/vite/dist/node/chunks/dep-611778e0.js:36839:34
at async callback (/home/guille/Documentos/pg_4/client/node_modules/esbuild/lib/main.js:921:28)
at async handleRequest (/home/guille/Documentos/pg_4/client/node_modules/esbuild/lib/main.js:701:30)
This error came from the "onResolve" callback registered here:
node_modules/vite/dist/node/chunks/dep-611778e0.js:36829:18:
36829 │ build.onResolve({
╵ ~~~~~~~~~
at setup (/home/guille/Documentos/pg_4/client/node_modules/vite/dist/node/chunks/dep-611778e0.js:36829:19)
at handlePlugins (/home/guille/Documentos/pg_4/client/node_modules/esbuild/lib/main.js:843:23)
at Object.buildOrServe (/home/guille/Documentos/pg_4/client/node_modules/esbuild/lib/main.js:1137:7)
at /home/guille/Documentos/pg_4/client/node_modules/esbuild/lib/main.js:2079:17
at new Promise (<anonymous>)
at Object.build (/home/guille/Documentos/pg_4/client/node_modules/esbuild/lib/main.js:2078:14)
at Object.build (/home/guille/Documentos/pg_4/client/node_modules/esbuild/lib/main.js:1927:51)
at /home/guille/Documentos/pg_4/client/node_modules/vite/dist/node/chunks/dep-611778e0.js:36630:54
at Array.map (<anonymous>)
The plugin "vite:dep-scan" was triggered by this import
src/components/Calendar/Calendar.jsx:2:23:
2 │ import DtPicker from 'react-calendar-datetime-picker'
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-611778e0.js:38290:10: ERROR: [plugin: vite:dep-scan] Failed to resolve entry for package "react-calendar-datetime-picker". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "react-calendar-datetime-picker". The package may have incorrect main/module/exports specified in its package.json.
Failed to resolve entry for package "react-calendar-datetime-picker". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "react-calendar-datetime-picker". The package may have incorrect main/module/exports specified in its package.json.
This is my package.json
{
"name": "client",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#auth0/auth0-react": "^1.9.0",
"#date-io/moment": "^2.13.1",
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-brands-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#headlessui/react": "^1.5.0",
"#mapbox/mapbox-sdk": "^0.13.3",
"#material-tailwind/react": "0.3.4",
"#types/react-transition-group": "^4.4.4",
"axios": "^0.26.1",
"jalaali-js": "^1.2.4",
"mapbox-gl": "^2.7.1",
"moment": "^2.29.2",
"react": "^17.0.2",
"react-calendar-datetime-picker": "^1.6.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-map-gl": "^7.0.10",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"tw-elements": "^1.0.0-alpha12"
},
"devDependencies": {
"#vitejs/plugin-react": "^1.0.7",
"autoprefixer": "^10.4.4",
"postcss": "^8.4.12",
"tailwindcss": "^3.0.23",
"vite": "^2.8.0"
}
}
And my vite.config.js
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
export default defineConfig({
plugins: [react()]
})
that could be happening? How can I solve that?
I need to use this library since it is the most customizable and with the best documentation

React Material UI Button component not working

I have installed create-react-app and material-ui/core and have proceeded to make a simple Button.
After adding the Button to App file and using command npm start I'd expect the button to show in the browser, instead I get Error invalid hook call.
The only issue I could think of is the dependencies may be corrupt as the hook is clearly valid.
Here is the simple Button:
App.js
import {Button} from '#material-ui/core';
export default function App() {
return (
<div className="App">
<Button>Click Me</Button>
</div>
);
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Index.html
<div id='root'></div>
And here is the package.json file (dependencies only shown here to reduce code length):
{
"name": "mui-play",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}

Solved: There was an issue with the dependencies, I learnt that even if you install an npm package you must still go to the terminal in the source code editor and install the dependency into the package.json file. Here is the fixed file that allows the button to be displayed in the browser:
package.json:
"name": "mui-play",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
}
The line "#material-ui/core": "^4.12.3", has been added so that the package can use the dependency.

try by adding the packages you want manually and then run npm install on the terminal

Axios + Vue + ag-grid-vue ... Dependency not found

So, I'm pretty new to VueJS. Integrating axios has never really been a problem on any of my other apps, but for some reasons this one just won't show up.
It doesn't like npm only, or CDN only, or the current implementation of CDN+npm install.
Hope y'all can help me out! Not really sure what the issue is, and googling hasn't been too helpful.
~Desired Outcome:
post via axios within vue application
~Current Status Error:
ERROR Failed to compile with 1 error
"This dependency was not found:
* https://unpkg.com/axios/dist/axios.min.js?vue&type=script&lang=js& in ./src/App.vue
To install it, you can run: npm install --save https://unpkg.com/axios/dist/axios.min.js?vue&type=script&lang=js&"
~What Happened when Running Above Command in zShell:
zsh: parse error near `&'
~package.json file:
"name": "ag-grid",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "App.vue"
},
"dependencies": {
"ag-grid-community": "^25.2.1",
"ag-grid-vue": "^25.2.0",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-axios": "^3.2.4",
"vue-property-decorator": "^8.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
~Relevant script code:
import { AgGridVue } from "ag-grid-vue";
import { axios } from "axios";
import { VueAxios } from "vue-axios";

ES6 - Import modules from project root directory (babel/node/npm)

Before I continue, I have tried the following solutions:
Git: Babel plugin root import package: Plugin doesn't seem to work alongside jest
SO: Configuring for babel jest
SO: Create own babel plugin
Webpack aliasing is another solution however we don't use webpack
A project was handed over to me recently which utilizes relative import statements that can get pretty long and obscure (e.g. import * as stuff from '../../../../../utilities/stuff'). I'd like to simplify our import statements using the project's root directory in this fashion: import * as stuff from '~/utilities/stuff.
My understanding of the packages, dependencies and configurations is still in its infancy. It looks like we use babel for transpiling, however I don't see a core babel package - only babel-jest and babel-polyfill.
Here is our package.json:
{
"name": "placeholder",
"version": "0.1.0",
"private": true,
"dependencies": {
"animejs": "^2.2.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.5",
"html-to-react": "^1.3.0",
"htmlparser2-react": "0.0.4",
"js-csp": "^1.0.1",
"npm-run-all": "^4.1.1",
"prop-types": "^15.5.10",
"react": "^16.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-aria-menubutton": "^5.0.2",
"react-dnd": "^2.5.1",
"react-dnd-html5-backend": "^2.5.1",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-rte": "^0.11.0",
"react-sidebar": "^2.3.2",
"react-toasts": "^1.2.3",
"react-transition-group": "^2.2.0",
"react-virtualized": "^9.9.0",
"redux": "^3.7.2",
"redux-form": "^6.8.0",
"sweetalert": "^2.0.8",
"text-spinners": "^1.0.5",
"uuid": "^3.1.0"
},
"devDependencies": {
"babel-jest": "^20.0.3",
"enzyme": "^2.9.1",
"jest-enzyme": "^3.8.2",
"materialize-css": "^0.100.2",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"node-sass-chokidar": "0.0.3",
"node-sass-magic-importer": "^5.0.0-alpha.6",
"react-docgen": "^2.18.0",
"react-scripts": "1.0.13",
"react-styleguidist": "^6.0.24",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.3.0",
"xhr-mock": "^1.9.1"
}
}
And .babelrc
{
"presets": ["react-app"],
"sourceMaps": true,
"retainLines": true
}
Our directory structure is as follows: <rootDir>/src where all js/jsx source files are contained within 'src'. This is the directory I'd like to configure to be the root (represented by a tilda (~)). Help would be greatly appreciated!

Browserify module not found with recursive require (post-Babel transpile)

I have the Browserify entry-file index.js that imports from a file in the same directory and the the 'render' function from 'react-dom', which is installed in node_modules (see Package.json for versioning) --
// index.js
import { Header } from './header'
import { render } from 'react-dom'
render(<Header />, document.getElementById('root'));
I also have another file header.js which imports 'react' and creates a simple React class --
// header.js
import React from 'react'
export const Header = React.createClass({
render:() => {
return (
<div>
some header title
</div>
)
}
});
I use Babel to transpile es6 code so the "import" statements map to the necessary "require" statements. As far as I can tell this step is working properly. After transpiling with Babel, I use Browserify to package all the dependencies into a single file. The problem I am running into is I'm getting an "Uncaught ReferenceError: React is not defined" once I attempt to render the packaged javascript.
It looks like imports work fine in index.js but are not being resolved properly in header.js. For example, if I import React from 'react' in index.js, everything renders properly. It looks like I'm having an issue with recursive requires, but I can't seem to figure out why that is the case. Any thoughts would be greatly appreciated. I would be glad to supply more information as well.
For reference, here is an excerpt from my Package.json --
{
"dependencies": {
"babel-preset-es2015": "~6.3.13",
"babel-preset-react": "~6.1.18",
"babel-register": "~6.2.0",
"history": "^1.12.0",
"material-ui": "^0.13.4",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-router": "~1.0.0",
"react-tap-event-plugin": "^0.2.1"
},
"devDependencies": {
"browserify": "~11.2.0",
"del": "^2.1.0",
"express": "~4.13.3",
"express-urlrewrite": "~1.2.0",
"gulp": "~3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "~6.1.1",
"gulp-print": "~2.0.1",
"gulp-rename": "~1.2.2",
"gulp-sass": "~2.1.0",
"gulp-sourcemaps": "1.6.0",
"gulp-uglify": "^1.5.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
}

For example, if I import React from 'react' in index.js, everything renders properly
Every file that uses JSX syntax (e.g. <Header />) needs to import React. You get the error because you are not doing that in index.js and it works once you are doing it.
If you'd look at the compiled code, you will see that <Header /> is converted to React.createElement(Header).