We Keep Coding

How to solve [ERROR] TypeError: dep.getModuleEvaluationSideEffectsState is not a function?

I have created a docusaurus project. It was working fine. I added material ui search bar in the landing page. I am using github actions to deploy the project(CI/CD). Now when i push the code, iam getting this error.
[ERROR] TypeError: dep.getModuleEvaluationSideEffectsState is not a function
at NormalModule.getSideEffectsConnectionState (/github/workspace/website/node_modules/webpack/lib/NormalModule.js:1126:23)
at /github/workspace/website/node_modules/webpack/lib/optimize/SideEffectsFlagPlugin.js:244:19
at Hook.eval [as call] (eval at create (/github/workspace/website/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:12:16)
at Hook.CALL_DELEGATE [as _call] (/github/workspace/website/node_modules/tapable/lib/Hook.js:14:14)
at Compilation.seal (/github/workspace/website/node_modules/webpack/lib/Compilation.js:2804:42)
at /github/workspace/website/node_modules/webpack/lib/Compiler.js:1187:20
at /github/workspace/website/node_modules/webpack/lib/Compilation.js:2757:4
at _next2 (eval at create (/github/workspace/website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:35:1)
at eval (eval at create (/github/workspace/website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:71:1)
at /github/workspace/website/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:385:11
I am not sure how to solve this. I have also attached package.json file.
{
"scripts": {
"examples": "docusaurus-examples",
"start": "docusaurus start",
"build": "docusaurus build",
"serve": "docusaurus serve",
"publish-gh-pages": "docusaurus-publish",
"write-translations": "docusaurus-write-translations",
"version": "docusaurus-version",
"rename-version": "docusaurus-rename-version",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"docusaurus": "docusaurus"
},
"engines": {
"node": ">=16.14.0"
},
"dependencies": {
"#azure/msal-browser": "^2.28.0",
"#azure/msal-react": "^1.4.4",
"#docusaurus/core": "^2.0.0-rc.1",
"#docusaurus/plugin-client-redirects": "^2.1.0",
"#docusaurus/plugin-content-docs": "^2.0.0-rc.1",
"#docusaurus/preset-classic": "^2.0.0-rc.1",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fortawesome/react-fontawesome": "^0.1.18",
"#material-ui/core": "^4.12.4",
"#mui/material": "^5.10.8",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"chart.js": "^3.8.0",
"clsx": "^1.1.1",
"docker": "^1.0.0",
"docusaurus": "^1.14.7",
"docusaurus-lunr-search": "^2.1.15",
"docusaurus-pdf": "^1.2.0",
"docusaurus2-dotenv": "^1.4.0",
"env-cmd": "^10.1.0",
"jquery": "^3.6.0",
"moment": "^2.29.4",
"react": "^17.0.2",
"react-bootstrap": "^2.4.0",
"react-chartjs-2": "^4.3.1",
"react-dom": "^17.0.2",
"react-icons": "^4.4.0",
"react-markdown-editor-lite": "^1.3.2",
"react-paginate": "^8.1.3",
"react-player": "^2.10.1",
"react-scripts": "^5.0.1"
}
}
Can someone help me with this?

Are you using the plugin docusaurus2-dotenv?
We found the same problem here, and the root cause is this plugin. We remove this plugin from the package.json and from the docusaurus.config.js. We replaced it inside the docusaurus.config.js with the plugin docusaurus-plugin-dotenv, like this:
// Before
plugins:
[
// Other plugins
['docusaurus2-dotenv', { systemvars: true }],
]
// After
plugins:
[
// Other plugins
[
'docusaurus-plugin-dotenv',
{
path: "./.env",
systemvars: true,
}
]
]
This error occurs because the plugin 'docusaurus2-dotenv' is depreciated, although the docusaurus documentation itself recommends using it.
After removing it from our project, we noticed that even some vulnerabilities have gone away.
Here's the link of the new plugin: docusaurus-plugin-dotenv

Invalid Podfile file: "react-native-community/cli" type of error

I am failing to install iOS dependencies using pod install annd after pressing enter button to run pod install.
Node Version: v16.16.0
NPM Version: 8.11.0
Working Process which I followed:
First way to install pod: Firstly install npm then install pod
Second way to install pod: after deleting node_modules then run pod install
Failed to install to follow the both of rules as mentioned before and to check the error, please check the attached file.
The dependencies are install in our projects as given below as package.json file.
{
"name": "shohan",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.16.2",
"#react-native-community/blur": "^3.6.0",
"#react-native-community/cli-platform-ios": "^8.0.6",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/datetimepicker": "^6.1.2",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-native-picker/picker": "^2.4.2",
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/material-top-tabs": "^6.2.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.5.0",
"#rneui/base": "^0.0.0-edge.2",
"#rneui/themed": "^0.0.0-edge.2",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"axios": "^0.26.1",
"moment": "^2.29.2",
"radio-buttons-react-native": "^1.0.4",
"react": "17.0.2",
"react-hook-form": "^7.28.1",
"react-native": "0.67.3",
"react-native-animatable": "^1.3.3",
"react-native-audio-record": "^0.2.2",
"react-native-bar-chart": "^0.1.0",
"react-native-countdown-component": "^2.7.1",
"react-native-date-picker": "^4.2.0",
"react-native-datepicker": "^1.7.2",
"react-native-dropdown-picker": "^5.3.0",
"react-native-elevation": "^1.0.0",
"react-native-emoji-selector": "^0.2.0",
"react-native-fs": "^2.20.0",
"react-native-image-picker": "^4.8.4",
"react-native-infinite-scrolling": "^2.0.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-linear-gradient": "^2.5.6",
"react-native-loading-spinner-overlay": "^3.0.0",
"react-native-pager-view": "^5.4.15",
"react-native-paper": "^4.12.1",
"react-native-picker-select": "^8.0.4",
"react-native-pure-chart": "^0.0.24",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "^4.1.2",
"react-native-screens": "^3.13.1",
"react-native-skeleton-placeholder": "^5.0.0",
"react-native-snap-carousel": "^3.9.1",
"react-native-sound": "^0.11.2",
"react-native-step-indicator": "^1.0.3",
"react-native-super-grid": "^4.4.0",
"react-native-svg": "^12.4.0",
"react-native-swiper-flatlist": "^3.0.16",
"react-native-tab-view": "^3.1.1",
"react-native-text-gradient": "^0.1.7",
"react-native-vector-icons": "^9.1.0",
"react-native-video": "^2.3.1",
"react-native-video-player": "^0.12.0",
"react-native-webview": "^11.18.1",
"react-native-youtube-iframe": "^2.2.2",
"socket.io-client": "^4.5.1"
},
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/runtime": "^7.17.2",
"#react-native-community/eslint-config": "^3.0.1",
"babel-jest": "^27.5.1",
"eslint": "^8.11.0",
"jest": "^27.5.1",
"metro-react-native-babel-preset": "^0.69.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
Here is the Podfile's code is given below,
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/#react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
target 'shohan' do
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
target 'shohanTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
The occurred error is given in the attached file please check it and help me.

React native project on android crashes as soon as you open the apk file

So I've been working on a React Native project, I'm on a Mac and when I run my apk file generated by the command ./gradlew assembleRelease and install it on my Google Pixel 4a I try to open the app and it instantly crashes and closes. However, when I run it in the emulator via command react-native run-android it works as expected. During the build, installation and even opening the app on my actual device it never gives a single error. Nothing has changed to my knowledge since the last time I ran the build command and it was working before so I'm lost and confused as to why this is happening. This also my first react-native project so maybe being a noob I'm missing something very obvious. Also iOS has absolutely no issues, any feedback or tips would be greatly appreciated. Thanks
My build.gradle file:
buildscript {
ext {
googlePlayServicesLocationVersion = "17.0.0" // Or higher.
buildToolsVersion = "29.0.3"
minSdkVersion = 21
compileSdkVersion = 30
targetSdkVersion = 30
ndkVersion = "20.1.5948944"
appCompatVersion = "1.1.0"
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:4.1.0")
classpath 'com.google.gms:google-services:4.3.4'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
maven {
// react-native-background-fetch
url("${project(':react-native-background-fetch').projectDir}/libs")
}
maven {
// Required for react-native-background-geolocation
url("${project(':react-native-background-geolocation').projectDir}/libs")
}
maven {
// Required for zoho chat widget
url("https://maven.zohodl.com/")
}
maven {
// Required for react-native-background-fetch
url("${project(':react-native-background-fetch').projectDir}/libs")
}
maven {
url 'https://api.mapbox.com/downloads/v2/releases/maven'
authentication {
basic(BasicAuthentication)
}
credentials {
// Do not change the username below.
// This should always be `mapbox` (not your username).
username = "mapbox"
// Use the secret token you stored in gradle.properties as the password
password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
}
}
google()
jcenter()
maven { url 'https://www.jitpack.io' }
}
}
package.json
{
"name": "NAME",
"version": "1.2.8",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
},
"dependencies": {
"#homee/react-native-mapbox-navigation": "^1.0.5",
"#react-native-async-storage/async-storage": "^1.15.5",
"#react-native-community/checkbox": "^0.5.8",
"#react-native-firebase/app": "11.5.0",
"#react-native-firebase/auth": "11.5.0",
"#react-native-firebase/firestore": "^11.5.0",
"#react-native-picker/picker": "^1.9.12",
"#react-navigation/bottom-tabs": "^6.0.0-next.2",
"#react-navigation/drawer": "^6.0.0-next.2",
"#react-navigation/native": "^6.0.0-next.1",
"#react-navigation/stack": "^6.0.0-next.6",
"axios": "^0.21.1",
"expo-web-browser": "^9.0.0",
"firebase": "^7.24.0",
"firebase-tools": "^8.16.2",
"mobx": "^6.1.8",
"mobx-react-lite": "^3.2.0",
"mobx-state-tree": "^5.0.1",
"moment": "^2.29.1",
"mst-persist": "^0.1.3",
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-background-fetch": "^4.0.1",
"react-native-background-geolocation": "^4.0.1",
"react-native-datepicker": "^1.7.2",
"react-native-dropdown-picker": "^4.0.2",
"react-native-gesture-handler": "^1.10.3",
"react-native-modalize": "^2.0.8",
"react-native-paper": "^4.7.2",
"react-native-portalize": "^1.0.7",
"react-native-reanimated": "^2.0.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^2.18.1",
"react-native-unimodules": "^0.12.0",
"react-native-vector-icons": "^8.1.0",
"react-native-webview": "^11.3.1",
"react-native-zohosalesiq-mobilisten": "^2.0.0",
"styled-components": "^5.2.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.14.0",
"#react-native-community/eslint-config": "^2.0.0",
"#types/jest": "^26.0.20",
"#types/react": "^17.0.3",
"#types/react-native": "^0.63.51",
"#types/react-test-renderer": "^17.0.1",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"mobx-flipper": "^1.1.2",
"react-native-flipper": "^0.81.0",
"react-test-renderer": "17.0.1",
"typescript": "^4.2.3"
},
"jest": {
"preset": "react-native"
},
"prettier": {
"arrowParens": "always",
"printWidth": 100,
"semi": true,
"singleQuote": true,
"trailingComma": "all"
}
}

Vue - failed to compile tiptap.esm.js

I'm new to npm and I'm trying to use tiptap in my project. The problem is that after I try to import tiptap, it raises error. This is what I did:
sudo npm install -g vue-cli
vue init webpack frontend
vue add vuetify - didn't do nothing so I did
npm add vuetify
Then I added this to main.js
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
npm install tiptap
Then I added import { Editor, EditorContent } from 'tiptap' to App.vue and it started raising error:
<template>
<div> ... SOME CODE ...
</div>
</template>
<script>
import { Editor, EditorContent } from 'tiptap'
export default {
name: 'App'
}
</script>
ERROR
Failed to compile.
./node_modules/tiptap/dist/tiptap.esm.js
Module parse failed: Unexpected token (126:23)
You may need an appropriate loader to handle this file type.
| } = this.node;
| const pos = this.getPos();
| const newAttrs = { ...this.node.attrs,
| ...attrs
| };
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 46:0-47
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Do you know what to do?
EDIT - package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "xxx",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"ajv": "^6.0.1",
"tiptap": "^1.32.1",
"vue": "^2.5.2",
"vuetify": "^2.4.7"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

To work with webpack you need to provide more configurations, vue create project-name scaffolds new project to which you could add vuetify using
vue add vuetify
then install tiptap :
npm i tiptap
and use as explained in official docs

RollupJS library React Hook Error useState

I'm bulding a lib that allow to export react components to a nextjs application, at first time it works very well but when I started to check react hooks on that library it trigger a invalid hook error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
In order to solve issues like that on webpack and microbundle, I was using npm link for development, cause this error happen on production build, that was my reference https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
This strategy don't work on rollup stack, I tried to link react and do some configs and nothing is working
that's my rollup.config.js
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import external from 'rollup-plugin-peer-deps-external'
import { terser } from 'rollup-plugin-terser'
import styles from "rollup-plugin-styles";
const input = 'src/index.js'
const output = 'dist/index'
export default [
{
input: input,
external: ['react', 'react-dom'],
output: {
file: `${output}.modern.js`,
format: 'es',
},
plugins: [
external('./package.json'),
resolve(),
commonjs({
include: ['node_modules/**'],
}),
babel({
exclude: 'node_modules/**'
}),
styles(),
terser()
],
},
]
An that's my package.json
{
"name": "project",
"version": "0.0.17",
"description": "",
"private": true,
"main": "dist/index.js",
"module": "dist/index.modern.js",
"umd:main": "dist/index.umd.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"prebuild": "rimraf dist",
"build": "rollup -c --environment BUILD:production",
"watch": "rollup -c --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"#webpack-cli/init": "^1.0.2",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"microbundle-crl": "^0.13.11",
"mini-css-extract-plugin": "^1.2.1",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rimraf": "^3.0.2",
"rollup": "^2.32.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-sass": "^1.2.2",
"rollup-plugin-scss": "^2.6.1",
"rollup-plugin-styles": "^3.11.0",
"rollup-plugin-terser": "^6.1.0",
"rollup-plugin-uglify": "^6.0.4",
"sass-loader": "^10.0.4",
"source-map-loader": "^1.1.1",
"static-site-generator-webpack-plugin": "^3.4.2",
"style-loader": "^2.0.0"
},
"peerDependencies": {
"react": "17.0.1",
"prop-types": "15.7.2",
"react-dom": "17.0.1"
},
"dependencies": {
"file-loader": "^6.2.0"
}
}
When I change my nextjs application on dev mode removing a test useState component it works, but if I reload the page or load directly with a useState component rendered it will trigger a react hook error :(

I found the reason for my case.
It's necessary peerDependencies setting on the package.json file.
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
So you try dependencies to peerDependencies.
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"file-loader": "^6.2.0"
},
Hope this helps. :)