Module parse failed: Unexpected token in a react with redux toolkit node module - react-redux

I'm trying to work out how to create a react + redux node module for my react + redux toolkit sites. I've got multiple sites with common components and I'd like to share them using a module.
I have managed to create, publish (using npm publish), and install my node module on to my site, but whenever I try and run with it installed I get the below error for any component I make in the module.
This is the package.json on my node module. I've made sure that any dependencies match the version I use on my sites.
`
{
"name": "cpl-react-test",
"version": "3.0.4",
"peerDependencies": {
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "27.4.1",
"#types/node": "16.11.27",
"#types/react": "18.0.6",
"#types/react-dom": "18.0.2",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-redux": "8.0.2",
"react-scripts": "5.0.1",
"typescript": "^4.6.3",
"web-vitals": "^3.0.1"
},
"devDependencies": {
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "27.4.1",
"#types/node": "16.11.27",
"#types/react": "18.0.6",
"#types/react-dom": "18.0.2",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-redux": "8.0.2",
"react-scripts": "5.0.1",
"typescript": "^4.6.3",
"web-vitals": "^3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) TS template.",
"main": "index.tsx",
"author": "",
"license": "ISC"
}
`
I have researched this a bit, but I'm struggling to find the solution, I think because I don't really understand the problem, or whether I'm going about this the right way at all. Any insight on what I should be looking for or doing would be greatly appreciated.

Related

Webpack not found when deploying using heroku

I'm trying to deploy an app on heroku, but I'm getting an error when it tried to build the app with the webpack command. I have tried a number of fixes but can't seem to get it to work. I tried running the webpack.js file from node_modules like this node node_modules/webpack/bin/webpack.js but that didn't work either. Any ideas would be greatly appreciated! Here is my package.json file:
{
"name": "waste-not-client",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "concurrently npm:watch:*",
"build": "webpack --mode production",
"watch:compile": "webpack --mode development --watch",
"watch:serve": "nodemon server/server.js",
"heroku-postbuild": "npm install && npm run build && node server/server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Blue-ocean-HR/blueocean-client.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Blue-ocean-HR/blueocean-client/issues"
},
"homepage": "/",
"dependencies": {
"#auth0/auth0-react": "^1.12.0",
"axios": "^1.1.3",
"compression": "^1.7.4",
"concurrently": "^7.6.0",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"framer-motion": "^7.6.7",
"nodemon": "^2.0.20",
"path": "^0.12.7",
"react": "^18.2.0",
"react-autocomplete-input": "^1.0.19",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"webpack-bundle-analyzer": "^4.7.0"
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"autoprefixer": "^10.4.13",
"babel-jest": "^29.1.2",
"babel-loader": "^8.2.1",
"compression-webpack-plugin": "^10.0.0",
"css-loader": "^6.7.1",
"dotenv-webpack": "^8.0.1",
"postcss": "^8.4.19",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.8.3",
"style-loader": "^3.3.1",
"tailwindcss": "^3.2.4",
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"engines": {
"node": "v16.16.0"
}
}
The error when I try to deploy on heroku:
sh: 1: webpack: not found
Your start script looks like it's designed for development work with live reloading. That's not what you want on Heroku.
You could rewrite your package.json scripts, but the easiest solution is probably to add a Procfile that Heroku will use in preference to your start script, e.g.
web: node server/server.js
You'll also want to remove your heroku-postbuild script entirely. It just repeats two things that Heroku does automatically (installing dependencies and running your build), and it also includes the runtime command that we now have in our Procfile.

There is uniswap error I can't able to reasole it

I am using Uniswap SDK for swapping the tokens I was working fine but now it is throwing an error, but I don't know why. I also install npm #uniswap/v3-periphery but it can't work for me.
Here is the error:
./node_modules/#uniswap/v3-sdk/dist/v3-sdk.esm.js:7:0
Module not found: Can't resolve '#uniswap/v3-periphery/artifacts/contracts/interfaces/IMulticall.sol/IMulticall.json'
Import trace for requested module:
./node_modules/#uniswap/smart-order-router/build/module/providers/on-chain-quote-provider.js
./node_modules/#uniswap/smart-order-router/build/module/providers/index.js
./node_modules/#uniswap/smart-order-router/build/module/index.js
./components/app/Swapping.jsx
./pages/swap/index.tsx
https://nextjs.org/docs/messages/module-not-found
And here is the package.json file:
{
"name": "helpi-finance",
"private": true,
"version": "0.1.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#headlessui/react": "^1.7.0",
"#rainbow-me/rainbowkit": "^0.5.1",
"#uniswap/sdk": "^3.0.3",
"#uniswap/sdk-core": "^3.0.1",
"#uniswap/smart-order-router": "^2.5.30",
"#uniswap/v3-sdk": "^3.8.2",
"ethers": "^5.0.0",
"jsbi": "3.2.5",
"next": "^12.1.6",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons": "^4.4.0",
"react-spinners": "^0.13.4",
"react-toastify": "^9.0.8",
"wagmi": "^0.6.0"
},
"devDependencies": {
"#types/node": "^17.0.35",
"#types/react": "^18.0.9",
"autoprefixer": "^10.4.8",
"eslint": "^8.15.0",
"eslint-config-next": "^12.1.6",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"typescript": "^4.7.2"
}
}
After Stuck 3 to 4 Days If find out, By installing a specific version of #uniswap/v3-periphery#1.4.1 resolves this issue.
npm i #uniswap/v3-periphery#1.4.1
/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/logger/src.ts/index.ts:269
const error: any = new Error(message);
^
Error: could not detect network (event="noNetwork", code=NETWORK_ERROR, version=providers/5.7.1)
at Logger.makeError (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/logger/src.ts/index.ts:269:28)
at Logger.throwError (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/logger/src.ts/index.ts:281:20)
at JsonRpcProvider.<anonymous> (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/providers/src.ts/json-rpc-provider.ts:483:23)
at step (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/providers/lib/json-rpc-provider.js:48:23)
at Object.throw (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/providers/lib/json-rpc-provider.js:29:53)
at rejected (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/providers/lib/json-rpc-provider.js:21:65)
at runNextTicks (node:internal/process/task_queues:61:5)
at listOnTimeout (node:internal/timers:528:9)
at processTimers (node:internal/timers:502:7) {
reason: 'could not detect network',
code: 'NETWORK_ERROR',
event: 'noNetwork'
}
After I run follow your instruction, I got this problem instead? Do you counter the same problem?

VS 2022 w/Resharper not recognizing syntax in React Scripts

I'm installing some demo React JS applications. Some of them don't show syntax errors while others do. Am I missing a package in my solution? Or is there a setting in my VS Project that needs set/changed?
Here's a screenshot. The project's package.json is below. The code builds and runs fine with the exception of deprecation warnings, etc. (not important at this point).
{
"name": "conversations-demo-sdk-update",
"version": "1.2.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"#twilio/conversations": "1.2.0",
"antd": "^3.26.20",
"dotenv": "^10.0.0",
"ngrok": "^3.4.0",
"node-sass": "^6.0.1",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-dropzone": "^10.2.2",
"react-router-dom": "^4.3.1",
"react-scripts": "4.0.1",
"request-promise": "^4.2.6",
"twilio": "~3.6.6"
},
"devDependencies": {
"concurrently": "^3.6.1",
"react-app-rewired": "^2.2.1"
},
"scripts": {
"start": "concurrently \"react-scripts start\" \"node index.js\"",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"keywords": [],
"description": ""
}
The problem ended up being JSX code in JS files. The fix is to enable Resharper's option to allow JSX in JS files.
Solution found here

undefined is not a function (near '...reactDevTools.connectToDevTools...')

I have spent over a day trying to get map view to work and along the way I picked up this error that I can't find anywhere at all on the internet. The error code shows up on iOS simulator with a red screen as is typical for react native.
I tried reinstalling the Dev Tools and that didn't work.
Here is my package.json
{
"name":"P77",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.7.0",
"react-native": "0.57.8",
"react-native-elements": "^0.19.1",
"react-native-maps": "^0.22.1",
"react-native-vector-icons": "^6.1.0",
"react-navigation": "git+https://github.com/react-community/react-navigation.git"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.51.1",
"react-devtools": "^3.4.3",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
please help
I found out an answer that works for me, but I'm not sure. Maybe this can help people in the future. I ran:
"yarn add eslint-config-rallycoding --dev"
"npm start"
(in project directory)

CFBundleIdentifier Collision while uploading a macOS app developed with Electron and built with electron-builder

I am currently developing an Electron app and I am able to generate the .app and .pkg for the macOS operating systems. Although I can run it from the .app generated, when I try to upload the .pkg (mas) I get the following error on AppStore Connect:
CFBundleIdentifier Collision -
The Info.plist CFBundleIdentifier value 'org.phantomjs' of 'phantomjs'
is already in use by another application.
I have tried updating Electron to the latest stable version (2.0.9), and updating electron-builder to the latest version (20.28.4). I've tried searching for the org.phantomjs string in the resulting .app and I am unable to find a Info.plist with that Bundle Identifier
Here I attach my package.json in case it is useful:
{
"name": "myAppName",
"version": "0.0.1",
"author": "Me <me#mymail.com>",
"description": "My Description",
"license": "MIT",
"main": "./dist/electron/main.js",
"repository": {
"type": "git",
"url": "git+https://github.com/****.git"
},
"scripts": {
"build": "node .electron-vue/build.js && electron-builder",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": "npm run lint:fix"
},
"build": {
"productName": "myAppName",
"appId": "this.is.a.real.appid",
"buildVersion": "5",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns",
"category": "public.app-category.developer-tools",
"target": [
{
"target": "mas"
}
]
},
"mas": {
"entitlements": "build/entitlements.mas.plist",
"entitlementsInherit": "build/entitlements.mas.inherit.plist",
"icon": "build/icons/icon.icns",
"category": "public.app-category.developer-tools"
},
"win": {
"icon": "build/icons/icon.ico",
"target": [
{
"target": "nsis"
},
{
"target": "appx"
}
]
},
"linux": {
"icon": "build/icons"
},
"fileAssociations": [
{
"ext": "myExtension",
"name": "My Project",
"description": "File containing a My Project.",
"icon": "build/icons/Project.icns",
"role": "Editor",
"isPackage": true
}
],
"copyright": "Copyright © 2018 Me"
},
"dependencies": {
"#appshuttle.io/bell": "0.0.12",
"#appshuttle.io/pollock": "0.0.28",
"#appshuttle.io/turing": "0.0.16",
"#fortawesome/fontawesome-svg-core": "^1.2.2",
"#fortawesome/free-brands-svg-icons": "^5.0.13",
"#fortawesome/free-regular-svg-icons": "^5.0.13",
"#fortawesome/free-solid-svg-icons": "^5.0.13",
"#fortawesome/vue-fontawesome": "0.1.1",
"axios": "^0.16.1",
"electron-updater": "^3.0.3",
"email-validator": "^2.0.4",
"grunt": "^1.0.3",
"nedb": "^1.8.0",
"p5": "^0.6.1",
"path": "^0.12.7",
"spectre.css": "^0.5.3",
"vue": "^2.3.3",
"vue-color": "^2.4.6",
"vue-electron": "^1.0.6",
"vue-router": "^2.5.3",
"vuedraggable": "^2.16.0",
"vuex": "^2.3.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"babili-webpack-plugin": "^0.1.2",
"cfonts": "^1.2.0",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.2.0",
"css-loader": "^0.28.11",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^2.0.0",
"electron-builder": "20.28.4",
"electron-debug": "^2.0.0",
"electron-devtools-installer": "^2.2.4",
"eslint": "^4.19.1",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.1.1",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"mini-css-extract-plugin": "^0.4.1",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"node-sass": "^4.9.2",
"sass-loader": "^6.0.7",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.7.1",
"webpack-hot-middleware": "^2.22.3"
}
}
Thanks so much in advance!
Found a solution (As mentioned by #countravioli in this Github Issue):
I found that there was a file called app.asar.unpacked that contained multiple Bundle Identifiers once the .pkg was created and signed. Deleting this file in the .app and then creating a .pkg didn't work for me so I used a Build Hook as proposed in the Github Issue. To prevent the file to being inserted to the .pkg file. To do this, I added a hook to the build section of my package.json at the end of the rest of its contents:
package.json
{ //package.json Root ...
build: {
// build content ...
"afterPack": "./afterPack.js"
}
}
An then created a file called afterPack.js in the folder where my package.json is located with the following contents:
const fs = require('fs');
const fse = require('fs-extra');
const path = require('path');
module.exports = function (params) {
const unpackFile = path.join(params.appOutDir, 'YOUR_APP_NAME.app/Contents/Resources/app.asar.unpacked');
console.log('EXISTS?', fs.existsSync(unpackFile));
console.log("REMOVE", unpackFile);
fse.removeSync(unpackFile);
};
I was able to upload the package to AppStore Connect without any issue.

Resources