We Keep Coding

React: How to find a dep inside a node module component for a hook?

React 16.8 | Typescript 3.5
I want to run useEffect to update an array inside App() every time a QR scanner inside a node module imported to the app updates one of its fields.
Alternatively, I would like to receive the data from 'onScan'.
How do you import and use as a dep elements of node module components? There's a page within a file called 'SendPage.jsx' which runs a useState hook called 'setTo()' to update a value 'to'. I'm looking to intercept that 'to' value and use it inside App().
These are my dependencies in node modules. Specifically, inside the "#burner-wallet/modern-ui" there's
"#burner-wallet/assets": "^1.0.0",
"#burner-wallet/core": "^1.0.0",
"#burner-wallet/exchange": "^1.0.0",
"#burner-wallet/modern-ui": "^1.0.9",
"#types/node": "12.0.4",
"#types/react": "*",
"#types/react-dom": "16.8.4",
"#types/react-router-dom": "^4.3.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "^3.2.0",
"typescript": "3.5.1",
"universal-cookie": "^4.0.4"
},
This is the package.json inside the "#burner-wallet/modern-ui" module space:
"name": "#burner-wallet/modern-ui",
"version": "1.0.9",
"license": "MIT",
"main": "dist/ModernUI.js",
"types": "dist/ModernUI.d.ts",
"scripts": {
"build": "tsc",
"start-local": "tsc -w",
"start-basic": "tsc -w"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-object-rest-spread": "^7.4.4",
"#babel/preset-typescript": "^7.3.3"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"repository": {
"type": "git",
"url": "https://github.com/burner-wallet/burner-wallet-2.git",
"directory": "packages/modern-ui"
},
"dependencies": {
"#burner-wallet/types": "^1.0.2",
"#burner-wallet/ui-core": "^1.0.2",
"#types/clipboard": "^2.0.1",
"#types/color": "^3.0.0",
"#types/ethereumjs-util": "^5.2.0",
"#types/qrcode.react": "^0.8.2",
"#types/react": "*",
"#types/react-qr-reader": "^2.1.2",
"#types/react-router-dom": "^4.3.4",
"#types/styled-components": "4.1.8",
"clipboard": "^2.0.4",
"color": "^3.1.2",
"ethereumjs-util": "^6.1.0",
"qrcode.react": "^0.9.3",
"react-qr-reader": "^2.2.1",
"styled-components": "^5.0.1"
}
}
My app.tsx file:
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import ScanContext from './scancontext';
import { setLocally, getLocallyStoredQRs } from './localstorage';
// import { xdai, dai, eth } from '#burner-wallet/assets';
import { xdai} from '#burner-wallet/assets';
import BurnerCore, { HistoryEvent } from '#burner-wallet/core';
import { InjectedSigner, LocalSigner } from '#burner-wallet/core/signers';
import { InfuraGateway, InjectedGateway, XDaiGateway, } from '#burner-wallet/core/gateways';
import Exchange, { Uniswap, XDaiBridge } from '#burner-wallet/exchange';
import ModernUI from '#burner-wallet/modern-ui';
import { HistoryProps } from '#burner-wallet/core/History';
const core = new BurnerCore({
signers: [new InjectedSigner(), new LocalSigner()],
gateways: [
new InjectedGateway(),
new InfuraGateway(process.env.REACT_APP_INFURA_KEY),
new XDaiGateway(),
],
// TODO use Sai
// assets: [xdai, dai, eth],
assets: [xdai],
});
const exchange = new Exchange({
pairs: [new XDaiBridge(), new Uniswap('dai')],
});
const QRCardsSpace = styled.div`
padding-bottom: 100px;
`;
function App() {
const [newQRs, setQR] = useState('');
// const storedCookieQRs: string[] = getLocallyStoredQRs();
const appUI = <ModernUI
title="Vincenz Burner Wallet"
core={core}
plugins={[exchange]}
/>
useEffect(() => {
// This will be where the addresses are assigned when read
console.log("useEffect");
console.log("newQRs" , newQRs);
var latestToAddress = "0x4f0f4m";
const QRData = [latestToAddress];
setQR(latestToAddress);
setLocally(QRData);
}, [appUI]); // Set here the conditional change to the QR data
return (
<div>
{appUI}
<QRCardsSpace>
<ScanContext />
</QRCardsSpace>
</div>
) };
export default App;

I can't use Vue.use to use VueRouter

I have an issue with vue js , I want to use VueRouter to link 2 vue component, but it seems I have an issue with Vue.use, I have this error :
I don't think the problem is about VueRouter but more about vue import I'm kinda lost at this point
//This is my app.js
import Welcome from "./Jetstream/Welcome";
require('./bootstrap');
window.Vue = require('vue');
console.log(window.vue)
// Import modules...
import { createApp, h } from 'vue';
import Vue from 'vue'
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import Router from 'vue-router'
Vue.use(Router)
const router = new VueRouter({
mode: 'history',
routes:
{
path: '/student',
name: 'student',
component: Welcome
},
});
const el = document.getElementById('app');
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(el);
InertiaProgress.init({ color: '#4B5563' });
<template>
<div>Hello</div>
<!-- this is My vue component-->
<!-- i try use a simple method-->
<a class="btn btn-primary" #click="truc"> Test</a>
<!--And this is what I swa on the documentation-->
<router-link :to="{name: 'student'}">Student</router-link>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Session.vue",
methods:{
truc(){
this.$router.push('/student')
}
}
}
</script>
If you need more content tell me, thanks for your help
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#inertiajs/inertia": "^0.9.1",
"#inertiajs/inertia-vue3": "^0.4.2",
"#inertiajs/progress": "^0.2.5",
"#tailwindcss/forms": "^0.2.1",
"#tailwindcss/typography": "^0.3.0",
"#vue/compiler-sfc": "^3.0.5",
"axios": "^0.21.1",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.2.4",
"vue": "^3.1.5",
"vue-loader": "^16.1.2"
},
"dependencies": {
"bootstrap": "^5.0.2",
"bootstrap-icons": "^1.5.0",
"bootstrap-vue": "^2.21.2",
"vform": "^2.1.0",
"vue-i18n": "^8.24.5"
}
}
this is my package.json
But I have this in my dependencies :
My app.js is now like that :

I think you use Vue 3, not Vue 2. Because of that you should assign createApp(...) to a variable
let app = createApp(...)
Also you need to do:
import {createRouter} from 'vue-router'
and setup:
const router = createRouter(...)
Then you do
app.use(router)
See how it looks like in docs:
https://next.router.vuejs.org/guide/#javascript

Vue-router only loading the base path in an application created without using vue cli [duplicate]

This question already has answers here:
Vue Router return 404 when revisit to the url
(20 answers)
Closed 2 years ago.
I am creating a vue application from scratch without using vue cli. Problem is I'm unable to load any other route aside from the base '/' route. Please inspect the code and help where it might have gone wrong.
routes.js file
import Vue from 'vue'
import Router from 'vue-router'
import Home from './HomePage.vue'
import ErrorPageComponent from './ErrorPage.vue'
import AccountsPage from './AccountsPage.vue'
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/accounts',
name: 'accounts',
component: AccountsPage,
},
{
path: '/error',
name: 'error',
component: ErrorPageComponent,
},
{
path: '*',
redirect: '/error'
}
]
})
App.vue file.
<template>
<div id="app">
<router-view />
</div>
</template>
main.js file code.
import Vue from 'vue'
import App from './App.vue'
import router from './pages/routes'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
Code for package.json
{
"name": "vue_without_cli",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rimraf dist",
"build": "npm run clean && webpack --mode production",
"serve": "webpack-dev-server --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"file-loader": "^6.0.0",
"i": "^0.3.6",
"style-loader": "^1.2.1"
},
"devDependencies": {
"#babel/core": "^7.11.1",
"#babel/preset-env": "^7.11.0",
"animate": "^1.0.0",
"axios": "^0.19.2",
"babel-loader": "^8.1.0",
"bootstrap": "^4.5.2",
"css-loader": "^4.2.1",
"html-webpack-plugin": "^4.3.0",
"rimraf": "^3.0.2",
"vue": "^2.6.11",
"vue-loader": "^15.9.3",
"vue-router": "^3.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"vuex": "^3.5.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
Webpack config file.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new VueLoaderPlugin(),
]
};
Babel.config.js
module.exports = {
presets: ['#babel/preset-env'],
}
Same routing configuration in my other Vue projects which I created using vue-cli seem to work with ease.
I reckon I might have missed something related to routing while setting up my project from scratch instead of using vue-cli. Please help me with this.

In comment, I notice that you are already find a solution which are remove the history mode.
Anthor solution is add a simple catch-all fallback route to your server.For example, both of http://example.com and http://example.com/accounts and the all of route path should return the same index.html page.I think the HTML5 History Mode chapter of offical document will help you to config server properly.

import undefined when bundling ui library with rollup using yarn workspaces

For a new project, I started using rollup to bundle a UI library and consume that library in a react application. I'm also using yarn workspaces for the internal dependency management between the UI library and the web app.
When I try to use the UI library in my web app, the import returns undefined and throws the "cannot get from undefined" error.
TypeError: Cannot read property 'NavBar' of undefined
[0] at App (C:/Users/user/dev/project/packages/project-web/src/pages/App.jsx:9:6)
The webapp code:
import React from 'react';
import {NavBar} from 'project-ui';
const App = () => (
<div>
<NavBar/>
<div>App component!x</div>
</div>
);
root package.json:
{
"name": "project",
"version": "1.0.0",
"private": true,
"workspaces": [
"packages/*"
]
}
UI package.json:
{
"name": "project-ui",
"version": "1.0.0",
"main": "dist/project-ui.cjs.js",
"jsnext:main": "dist/project-ui.es.js",
"module": "dist/project-ui.es.js",
"files": ["dist"],
"scripts": {
"build": "rollup -c"
},
"peerDependencies": {
"react": "16.3.2",
"react-dom": "16.3.2"
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-plugin-external-helpers": "6.22.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-2": "6.24.1",
"rollup": "0.60.0",
"rollup-plugin-babel": "3.0.4",
"rollup-plugin-commonjs": "9.1.3",
"rollup-plugin-node-resolve": "3.0.0",
"rollup-plugin-replace": "2.0.0",
"rollup-plugin-uglify": "4.0.0"
}
}
web app package.json:
{
"name": "project-web",
"version": "1.0.0",
"scripts": {
"build": "webpack --colors --display-error-details --config=webpack/webpack.dev.js",
"dev": "concurrently --kill-others \"npm run dev:start\"",
"dev:start": "node ./server/index.js"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"express": "^4.16.3",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"project-ui": "1.0.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"concurrently": "^3.5.1",
"eslint": "^4.19.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-react": "^7.7.0",
"piping": "^1.0.0-rc.4",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.3",
"webpack-hot-middleware": "^2.22.1",
"webpack-node-externals": "^1.7.2"
}
}
rollup config:
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import replace from 'rollup-plugin-replace';
import { uglify } from 'rollup-plugin-uglify';
import pkg from './package.json'
const FORMATS = {
UMD: 'umd',
ES: 'es',
CJS: 'cjs'
};
const allowedFormats = [FORMATS.UMD, FORMATS.ES, FORMATS.CJS];
const bundle = (fileFormat, {format, minify}) => {
if (!allowedFormats.includes(format)) {
throw new Error(`Invalid format given: ${format}`);
}
const shouldMinify = minify && format === FORMATS.UMD;
const externals = format === FORMATS.UMD
? Object.keys(pkg.peerDependencies || {})
: [
...Object.keys(pkg.dependencies || {}),
...Object.keys(pkg.peerDependencies || {})
];
return {
input: 'src/index.js',
output: {
file: fileFormat.replace('{format}', shouldMinify ? `${format}.min` : format),
format,
name: 'project-ui',
exports: 'named',
globals: {
react: 'React',
'prop-types': 'PropTypes'
}
},
external: externals,
plugins: [
resolve({ jsnext: true, main: true }),
commonjs({ include: 'node_modules/**' }),
babel({
exclude: 'node_modules/**',
}),
format === FORMATS.UMD
? replace({'process.env.NODE_ENV': JSON.stringify(shouldMinify ? 'production' : 'development')})
: null,
shouldMinify ? uglify() : null
].filter(Boolean)
};
};
export default [
bundle('dist/project-ui.{format}.js', {format: FORMATS.UMD, minify: true}),
bundle('dist/project-ui.{format}.js', {format: FORMATS.CJS}),
bundle('dist/project-ui.{format}.js', {format: FORMATS.ES})
];
the actual generated code from rollup:
import React from 'react';
var NavBar = function NavBar() {
return React.createElement(
'header',
null,
'nav bar'
);
};
module.exports = exports['default'];
export { NavBar };
The original navbar:
import React from 'react';
const NavBar = () => (
<header>
nav bar
</header>
);
export default NavBar;
index.js:
export { default as NavBar} from './NavBar/NavBar';
.babelrc:
{
"presets": [
["env", {
"loose": true,
"modules": false,
"targets": {
"browsers": ["last 2 versions"]
}
}],
"react",
"stage-2"
],
"plugins": [
"transform-runtime",
"add-module-exports",
"external-helpers"
]
}
The generated rollup code looks to be ok, so I'm thinking this is a yarn issue, but I'm not sure. Any help would be appreciated!
Regards
Cornel

The problem must be in the way you are transpilling the code with babel/rollup. I have a live example in how your code should look in an online babel:
The generated code for me is:
import React from 'react';
const NavBar = () => React.createElement(
'header',
null,
'nav bar'
);
export default NavBar; // first define default and then we assign export['default']
module.exports = exports['default'];
Observe that in this code we first assign export default to the desired value and then we assign export['defaults'] (when I debug your example I get that export['default'] is undefined, hence you get the error Cannot read property 'NavBar' of undefined [0], since you are passing undefined to exports.
This is done by the plugin 'add-module-exports', that is kind of necessary if you really need module.exports (that shouldnt be needed unless NodeJS or some RequireJS is present).
In order to make it work, just remove "add-module-exports" from your plugins in the project-ui .babelrc.

Provider from react - redux unexpected token

Working with 'react-redux' I get this error :
ERROR in ./client/index.js
Module parse failed: /Users/flystyle/WebstormProjects/peredovaya-game-beg/client/index.js Unexpected token (14:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (14:2)
at Parser.pp$4.raise (/Users/flystyle/WebstormProjects/peredovaya-game-beg/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/Users/flystyle/WebstormProjects/peredovaya-game-beg/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/Users/flystyle/WebstormProjects/peredovaya-game-beg/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/Users/flystyle/WebstormProjects/peredovaya-game-beg/node_modules/acorn/dist/acorn.js:1715:21
)
at Parser.pp$3.parseMaybeUnary (/Users/flystyle/WebstormProjects/peredovaya-game-beg/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/Users/flystyle/WebstormProjects/peredovaya-game-beg/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/Users/flystyle/WebstormProjects/peredovaya-game-beg/node_modules/acorn/dist/acorn.js:1620:
21)
at Parser.pp$3.parseMaybeAssign (/Users/flystyle/WebstormProjects/peredovaya-game-beg/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExprList (/Users/flystyle/WebstormProjects/peredovaya-game-beg/node_modules/acorn/dist/acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (/Users/flystyle/WebstormProjects/peredovaya-game-beg/node_modules/acorn/dist/acorn.js:1741:35)
# multi main
when I launch it by npm run server .
How can I fix it? I am newbie in JS.
Content of /client/index.js :
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import routes from './routes';
const store = createStore(
(state = {}) => state, applyMiddleware(thunk));
render(
<Provider store={store}> /// <--- this row.
<Router history={browserHistory} routes={routes} />
</Provider>, document.getElementById('game'));
Content of /client/routes.js :
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Game from './components/game';
import Greetings from './components/Greetings';
import SignupPage from './components/signup/SignUpPage';
export default (
<Route path="/" component={Game}>
<IndexRoute component={Greetings} />
<Route path="signup" component={SignupPage} />
</Route>
)
Content of package.json :
{
"name": "peredovaya-game-beg",
"version": "0.0.1-dev",
"description": "Peredovaya game clone",
"main": "app.js",
"scripts": {
"server": "nodemon --watch server --exec babel-node -- ./server/app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"peredovaya"
],
"author": "Fly-Style",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
"react-hot-loader": "^1.3.0",
"underscore": "^1.8.3",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.2"
},
"dependencies": {
"axios": "^0.13.1",
"bcrypt": "^0.8.7",
"bluebird": "^3.4.1",
"body-parser": "^1.15.2",
"bootstrap": "^3.3.7",
"classnames": "^2.2.5",
"express": "^4.14.0",
"jquery": "^3.1.0",
"jsonwebtoken": "^7.1.7",
"jwt-decode": "^2.1.0",
"knex": "^0.11.7",
"lodash": "^4.13.1",
"mongodb": "^2.2.5",
"pg": "^6.0.2",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"react-redux": "^4.4.5",
"react-router": "^2.5.0",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",
"request": "^2.74.0",
"shortid": "^2.2.6",
"socket.io": "^1.4.8",
"validator": "^5.4.0"
}
}
Content of /webpack.config.dev.js :
import path from 'path';
import webpack from 'webpack';
export default {
devtools: 'eval-source-map',
entry: [
'webpack-hot-middleware/client',
path.join(__dirname, '/client/index.js')
],
output: {
path: '/',
publicPath: '/'
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
test: /\.css$/, loader: "style-loader!css-loader",
include: [
path.join(__dirname, 'client'),
path.join(__dirname, 'server/shared')
],
loaders: [ 'react-hot', 'babel' ]
}
]
},
resolve: {
extentions: [ '', '.js' ]
}
}
Content of '.babelrc' :
{
"presets" : ["es2015", "react"]
}