We Keep Coding

when using amcharts4 in webpack - module has no exports error

I am using the webpack and installed amchart with
yarn add #amcharts/amcharts4
my package.json is like this below
{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack-dev-server --mode=development"
},
"dependencies": {
"#amcharts/amcharts4": "^4.10.28",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"jquery": "^3.6.1",
"jquery-easing": "^0.0.1",
"mini-css-extract-plugin": "^2.6.1",
"rimraf": "^3.0.2",
"sass": "^1.54.9",
"sass-loader": "^13.0.2",
"slick-carousel": "^1.8.1",
"slickgrid-es6": "^3.0.3",
"style-loader": "^3.3.1",
"stylelint-webpack-plugin": "^3.3.0",
"webpack": "^5.74.0",
"webpack-bundle-tracker": "^1.6.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0"
}
}
Then I have this code in my script
import * as am4charts from "#amcharts/amcharts4/charts";
this.valueAxis2 = this.chart.yAxes.push(new am4charts.ValueAxis());
However it shows this error.
WARNING in ./static/entries/BalanceChart.js 16:52-71
export 'ValueAxis' (imported as 'am4charts') was not found in '#amcharts/amcharts4/charts' (module has no exports)
I guess there is something wrong with importing amchart library.
What does module has no exports mean in this case?

It has been fixed for me by restarting react application.

Aframe JS Error Could not load module '../GetIntrinsic'

After running npm start I receive the following error:
error: Processing of node_modules/aframe/dist/aframe-master.js failed. Error: Could not load module '../GetIntrinsic' from '/root/immerso-experience/node_modules/aframe/dist'. Make sure the file actually exists.
Here is the package.json
{
"name": "experience-engine",
"description": "Immerso Experience Engine",
"private": true,
"author": "Immerso",
"homepage": "https://immerso.io",
"version": "1.3.0",
"scripts": {
"start": "export DEVELOPMENT=true && brunch w -n -s -P 3000",
"build": "rm -rf public/ && brunch build --production && node -e 'require(\"./post-build.js\").readWriteSync()'",
"preinstall": "npx npm-force-resolutions || echo"
},
"jest": {
"globals": {
"$PROCESS_ENV_API_URL": "https://api.immersotours.com",
"$PROCESS_ENV_WS_API_URL": null,
"$PROCESS_ENV_RECAPTCHA_KEY": null,
"$PROCESS_ENV_PAYPAL_CLIENT_ID": "ARbzpX1BmPBEJ37OXso7sdXACVyufeAZ4ovJLziEILohedwfwNNvXIpelUJSG64U65QjDn_lfXHa4P3E",
"$PROCESS_ENV_AES_KEY": "secret-key",
"$PROCESS_ENV_DEVELOPMENT": true
}
},
"dependencies": {
"aframe": "^1.3.0",
"aframe-event-set-component": "^3.0.3",
"aframe-fit-texture-component": "^0.2.5",
"aframe-look-at-component": "1.0.0",
"aframe-particle-system-component": "^1.1.3",
"aframe-react": "^4.4.0",
"aframe-scene-look-controls": "^1.0.5",
"aframe-video-controls": "^0.3.0",
"animate.css": "^4.1.1",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"braces": "^2.3.1",
"brunch": "^3.0.0",
"crypto-js": "^4.0.0",
"dotenv": "^8.2.0",
"howler": "^2.2.0",
"json": "^11.0.0",
"kill-port-process": "^2.3.0",
"prerender-node": "^3.2.5",
"process-env-brunch": "^1.4.6",
"prop-types": "^15.8.1",
"react": "^16.13.1",
"react-async-script-loader": "^0.3.0",
"react-bootstrap": "^1.4.3",
"react-device-detect": "^1.17.0",
"react-dom": "^16.14.0",
"react-ga": "^3.3.0",
"react-google-invisible-recaptcha": "^0.2.11",
"react-google-login": "^5.2.2",
"react-helmet": "^6.1.0",
"react-i18next": "^9.0.10",
"react-intl": "^5.12.1",
"react-modal": "^3.12.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0",
"react-share": "^4.4.0",
"react-tooltip": "^4.2.13",
"sass-brunch": "^3.0.0",
"socket.io": "^3.1.1",
"ssri": "^8.0.1",
"use-strict": "^1.0.1",
"websocket": "^1.0.31"
},
"devDependencies": {
"#babel/core": "^7.12.13",
"#babel/plugin-transform-runtime": "^7.12.15",
"#babel/plugin-transform-strict-mode": "^7.12.13",
"#babel/preset-env": "^7.12.13",
"#babel/preset-react": "^7.12.13",
"#babel/register": "^7.12.13",
"#babel/runtime-corejs2": "^7.12.13",
"auto-reload-brunch": "^2.7.1",
"babel-brunch": "^7.0.1",
"babel-jest": "^26.6.3",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-css-brunch": "^3.0.0",
"esm": "^3.2.25",
"express": "^4.17.1",
"fingerprint-brunch": "^2.0.7",
"fs": "0.0.1-security",
"npm-force-resolutions": "0.0.3",
"react-addons-test-utils": "^15.6.2",
"react-notifications-component": "^3.0.3",
"riteway": "^6.2.1",
"uglify-es-brunch": "^1.0.5"
},
"main": ".eslintrc.js",
"repository": {
"type": "git",
"url": "git+https://ImmersoTech#bitbucket.org/ImmersoTech/immerso-experience.git"
},
"license": "ISC"
}
NPM version 7.19.1
Node version 16.5.0
Note: I am using a deprecated library called react-aframe which may or may not affect it. I imagine it might since it is so old. I have tried looking in github and stackoverflow for similar issues but could not find it
I ran this command
grep GetIntrinsic node_modules/aframe/dist/aframe-master.js
to see where GetIntrinsic is used and it is imported a couple of times with require(). From looking at the function itself it seems to just get a value based off of a key from the INTRINSINCS object.

NextJS redux-saga sample code doesn't work with redux-saga ^1.0.0?

I'm working on connecting Next.js and redux-saga in a large existing React project. I am following the Next.js sample code for this. The sample code works fine, but when I tried to move the Next.js redux-saga sample code -- https://github.com/zeit/next.js/tree/master/examples/with-redux-saga --, my data wasn't getting stored in the store. I'm not sure if my action to store it is being called, or if it's being called late, but I end up with an empty store.
I was tracing through the output and saw that the redux-saga task seems to have a done field with the sample code, but with my code it has a toPromise field.
The only obvious difference I could see between the two projects was that the sample code uses redux-saga 0.16.0 and my project uses ^1.0.0.
When I switched my project to use redux-saga 0.16.0 it works fine.
Perhaps next-redux-saga, on which both of these projects depends, is looking for the done field? Could it be something else? I attach the two package.json fields, in case you spot something I didn't. Thanks for any help!
Sample code package.json
{
"name": "with-redux-saga",
"version": "1.0.0",
"license": "ISC",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"es6-promise": "4.1.1",
"isomorphic-unfetch": "2.0.0",
"next": "^7.0.2",
"next-redux-saga": "3.0.0",
"next-redux-wrapper": "2.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "5.0.7",
"redux": "4.0.0",
"redux-saga": "^1.0.0"
},
"devDependencies": {
"redux-devtools-extension": "2.13.2"
}
}
My package.json
{
"name": "PAW-React",
"version": "1.0.0",
"main": "index.js",
"repository": "https://github.com/InterficieIS/PAW-React.git",
"author": "Javier1177 <javierlopezblasco#gmail.com>",
"license": "MIT",
"dependencies": {
"#date-io/date-fns": "^1.0.1",
"#material-ui/core": "^3.8.3",
"autoprefixer": "7.1.5",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-wrap-in-js": "^1.1.0",
"bulma": "^0.6.2",
"date-fns": "^2.0.0-alpha.27",
"dotenv": "^4.0.0",
"eslint-config-airbnb": "^17.1.0",
"express": "^4.16.4",
"glob": "^7.1.2",
"isomorphic-unfetch": "^3.0.0",
"jss": "^9.8.7",
"material-ui-pickers": "^2.1.1",
"next": "^7.0.2",
"next-fonts": "^0.16.0",
"next-redux-saga": "^3.0.0",
"next-redux-wrapper": "^2.1.0",
"node-sass": "^4.4.0",
"normalize.css": "^7.0.0",
"prop-types": "^15.6.2",
"raw-loader": "^0.5.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-jss": "^8.6.1",
"react-redux": "^6.0.0",
"react-slick": "^0.23.2",
"redux": "^4.0.1",
"redux-saga": "^1.0.0",
"sass-loader": "^6.0.6",
"slick-carousel": "^1.8.1"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"command-line-args": "^4.0.7",
"cross-env": "^5.1.3",
"eslint": "^5.12.0",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.41.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.5.1",
"file-loader": "^3.0.1",
"url-loader": "^1.1.2",
"redux-devtools-extension": "^2.13.7"
},
"scripts": {
"dev": "PORT=3001 node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js",
"export": "next export",
"eslint": "eslint . --ext=\"js,jsx\""
}
}

The react-redux release 1.0.0 brings along API breaking changes which aren't yet implemented in those project. Please keep track of the following issues and pull-requests to know more:
https://github.com/zeit/next.js/pull/6109
https://github.com/bmealhouse/next-redux-saga/issues/27
https://github.com/bmealhouse/next-redux-saga/pull/29
Best Regards

Transform error:unknown plugin "transform-decorators" specified in react native

I am getting this after installing jest, and transform-decorators-legacy.
But jest is running successfully and passing tests for each screen.
I am using MOBX for stores.
bablerc file :
{
"presets": ["react-native","babel-preset-expo","react-native-
stage-0/decorator-support"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source","transform-decorators
-legacy"]
}
}
}
package.json
"scripts": {
"test": "node_modules/.bin/jest"
},
"jest": {
"preset": "jest-expo"
},
"author": null,
"private": true,
"main": "node_modules/expo/AppEntry.js",
"dependencies": {
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"expo": "^21.0.0",
"mobx": "^3.3.1",
"mobx-react": "^4.3.3",
"native-base": "^2.3.3",
"react": "16.0.0-alpha.12",
"react-native": "https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz",
"react-native-admob": "^2.0.0-beta.2",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-modal": "^4.1.0",
"react-native-prompt": "^1.0.0",
"react-navigation": "^1.0.0-beta.15"
},
"devDependencies": {
"babel-jest": "^21.2.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-react-native": "^4.0.0",
"cavy": "^0.4.1",
"jest": "^21.2.1",
"jest-expo": "^22.0.1-SNAPSHOT.2017.11.1",
"react-dom": "^16.0.0",
"react-test-renderer": "^16.0.0",
"regenerator-runtime": "^0.11.0"
}
}

Why is crashReporter undefined in Electron?

I recently upgraded to Electron version 1.6.11 and now when I run my npm start command, I get the following error:
The top of my main.js file looks like this:
const {app, BrowserWindow, ipcMain, crashReporter} = require('electron');
const path = require('path');
crashReporter.start({
productName: 'MyCo',
companyName: 'MyCo, Inc.',
submitURL: 'https://myco.co/fake-url-to-submit',
uploadToServer: true
});
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
Here are the contents of my package.json file:
{
"name": "MyApp",
"productName": "MyApp",
"version": "0.0.1",
"main": "main.js",
"repository": "https://github.com/zackshapiro/myApp",
"devDependencies": {
"babel-core": "^6.7.2",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-3": "^6.17.0",
"css-loader": "^0.23.1",
"electron": "^1.6.11",
"electron-packager": "^8.7.1",
"electron-rebuild": "^1.1.3",
"eslint": "^3.13.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-react": "^6.9.0",
"file-loader": "^0.10.1",
"node-libs-browser": "^1.0.0",
"node-sass": "^4.2.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.0",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.4"
},
"scripts": {
"start": "./node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron .",
"watch": "./node_modules/.bin/webpack-dev-server",
"electron-rebuild": "./node_modules/.bin/electron-rebuild"
},
"dependencies": {
"babel-polyfill": "^6.22.0",
"electron-context-menu": "^0.8.0",
"electron-prebuilt": "^0.37.2",
"gl-react": "^2.2.9",
"gl-react-hue-rotate": "^1.1.0",
"isomorphic-fetch": "^2.2.1",
"rc-slider": "^6.1.0",
"react": "15.4.2",
"react-dnd": "^2.2.4",
"react-dnd-html5-backend": "^2.2.4",
"react-dom": "15.4.2",
"react-redux": "^5.0.2",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.6.0",
"redux-saga": "^0.14.3",
"tinycolor2": "^1.4.1"
}
}
How do I fix this and get crashReporter working?

Your start script is wrong -- you're trying to use electron-prebuilt which is outdated, but you probably forgot to uninstall it from your computer so it still works. It's currently in your devDependencies but it's been deprecated and hasn't been supported since 2016. Remove it with:
npm uninstall --save-dev electron-prebuilt
electron-prebuilt does not come with crashReporter thus it is undefined when you try to import it.
You should be using the latest electron you've installed which comes with crashReporter. To do this, change the script to (if you've installed it locally):
"start": "./node_modules/.bin/electron ."
This will use electron instead of electron-prebuilt and it should work fine.