Error: "createRequire is not a function Referenced from: BaseConfig" - reactjs

I have a freshly cloned repo created from the create-react-app template. I npm install to install the packages and then npm start to serve the files on localhost:3000. My coworker (the repo creator) is not having any issues.
However, I see the page flash for a second and then I get the following error:
Failed to compile
createRequire is not a function
Referenced from: BaseConfig
The error message doesn't provide any other information to help trace which file it could be coming from.
I've tried the following to troubleshoot:
Deleting node_modules and package-lock.json and re-installing
Deleting the entire repo and re-cloning
Searching for 'createRequire' or 'BaseConfig' in project files found no results
Searching online for similar issues. None seem to have the same error I'm encountering.
Other details:
npm version 6.14.8
react version 17.0.1
Any idea where this error could be coming from or what steps I can do to trace it?

TL;DR Needed to upgrade node version
I tried npx create-react-app to confirm if the issue was with the template or with the project code. While doing that, I got a message that my package dependencies required a higher version of node (I was on v.10.4, the latest is v15.2.0).
Doing brew upgrade installed the latest version but didn't change the default node version across the system (ie: node -v still showed v10.4) but
doing nvm install --lts then nvm alias-default [latest-version] fixed my issue!

Some solutions are not worked for me. I uninstalled node.js and installed latest version. It worked!

It could be connected with eslint in create-react-app
try to reinstall 'eslint' or 'eslint-config-react-app'
https://github.com/AtomLinter/linter-eslint/issues/1351
BaseConfig is a variable of the create-react-app react-scripts module
in node_modules/react-scripts/config/webpack.config.js
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
// #remove-on-eject-begin
ignore: isExtendingEslintConfig,
baseConfig: isExtendingEslintConfig
? undefined
: {
extends: [require.resolve('eslint-config-react-app')],

For me, downgrade the react-scripts to latest 3.x version solved my problem. I could not update the NodeJS version, as I didn't have access to NodeJS server instance. Seems it fits better with React 16.x.
I'm running and building the app at NodeJS V10.0.0.

I am a noob, but I just came across this very same error message in picking up where I previously had left off following a MERN stack tutorial. During the break, I must have switched nvm versions, and thanks to this thread I was able to correct this. From the terminal, I simply ran nvm list. From the result, I could see that I was running an older version (10.9.0) but had a newer one (10.12.0) available to me, which I switched to by running nvm use 10.12.0. This resolved my issue.

Related

Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint/use-at-your-own-risk'

I created a new React project with create-react-app.
In the terminal npm start.
Instantly get this error
Failed to load plugin 'flowtype' declared in 'package.json »
eslint-config-react-app': Cannot find module
'eslint/use-at-your-own-risk'
How do I fix this?
Not this project specifically, but how do I get create-react-app to create without errors?
I fix this just deleting:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
on package.json
what's happening is that when you run npm start it's probably doing some checks with eslint, from what I remember create-react-app has some checks that break your build if you have eslint errors so makes sense that they're associated.
The error you're getting here is related to a node feature that eslint is using called subpath exports but it's support is hit or miss depending on how the library is consumed. This has been highlighted to cause issues when used with jest for example.
For the flowtype eslint plugin this is the exact line of code that's causing you issues.
You can also read about a similar issue reported regarding the typescript eslint plugin.
The solution and the reason I'm even able to understand what's causing this problem is that I made a fix to this yesterday in a clone of the eslint-plugin-flowtype (given that the original plugin had a lack of maintenance) here https://github.com/flow-typed/eslint-plugin-ft-flow/pull/23.
I'll raise an issue with create-react-app and see if they're willing to swap out the plugin with the new one which would have more maintenance and solve issues that you're experiencing.
i also had same problem. so In my case, I found my node version was v12. so i got to know CRA v5.x which should be with >= node v14.
so I switched to Node v16.10.0 and solved it.
I also found that I could resolve this issue by switching my node version to the LTS version.
I experienced this issue when running node version 12.13.0
Switching to version 16.14.2 resolves the issue for me.
I experienced the same problem in webstorm with react. My solution after reading some other peoples comments was to use Eslint version 7.32.0 i was originally using 6.8 which was causing the problems and now it works. I also read that version 8 or higher is not supported
If anyone is still having this problem currently I managed to solve this error for myself by deleting the node-modules folder and the package-lock.json file. and then running npm install. This is also with Node and create-react-app #latest version.
DISABLE_ESLINT_PLUGIN=true react-app-rewired start can avoid this error, and no need of ">= node v14" (even node10 can work), for only eslint#8 is using Module.createRequire, ref to doc Upgrade to react-scripts#5 and Add Web Workers support and APP PixelShapeRN commit Add Web Workers support for CRA v5 (and Webpack 5)
for me, upgrading my node version from 12.12.0 to 16.0.0 helped. old node version create this problem mostly.
Updating node version to v16 will resolve this issue.
Use nvm command or download latest version of node to install update node version.
Here is step if you want to use nvm
nvm install 16.16.0
This will install and update running node version
use this to switch back to any node version present in your system
nvm use v14.14.0
Note: You can follow steps given below to install NVM in you system.
For MAC: https://tecadmin.net/install-nvm-macos-with-homebrew/
For Windows: https://tecadmin.net/install-nodejs-with-nvm-on-windows/
try using newer version of node to run your app. I had 12 and tried 16 and it fixed the issue.

should NOT have additional property 'nodeModulesPath'(Expo React Native)

How can I resolve this issue. I am getting this error after I upgraded my expo application on my phone:
Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/
• should NOT have additional property 'nodeModulesPath'.
Yes, I faced the same issue.
So I upgraded the expo-cli using
npm install -g expo-cli
My expo-cli version is 4.4.4 and I can't see the error anymore.
Thank you, Sardorek Aminjonov
#Sardorek, ran into the same problem, spent more than an hour, and finally figured it out.
The solution is to add the Expo SDK version in the app.json file. My version is 40.0.1. You can see it in package.json.
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz"
Upgrading to version 40 has removed it from the app.json file.
Now, add the major.minor.0 version in the app.json file like:
"sdkVersion": "40.0.0"
Looks like you cannot include the maintenance version number. If you do, you will get this error.
Error: Invalid sdkVersion. Valid options are 7.0.0, 8.0.0, 9.0.0, 10.0.0, 11.0.0, 12.0.0, 13.0.0, 14.0.0, 15.0.0, 16.0.0, 17.0.0, 18.0.0, 19.0.0, 20.0.0, 21.0.0, 22.0.0, 23.0.0, 24.0.0, 25.0.0, 26.0.0, 27.0.0, 28.0.0, 29.0.0, 30.0.0, 31.0.0, 32.0.0, 33.0.0, 34.0.0, 35.0.0, 36.0.0, 37.0.0, 38.0.0, 39.0.0, 40.0.0, 41.0.0
Couldn't publish because errors were found. (See logs above.) Please fix the errors and try again.
Now, run expo start, and voila it works! Hope this helps.
I am using 'yarn start' to launch expo. It looked like libragopi's solution fixed my issue, but after doing a hot refresh the warning was back. I found another possible solution, which may be related to the way you're launching expo (as in my case with yarn)
yarn global add expo-cli
from this forum post https://forums.expo.io/t/having-issue-with-app-json-after-upgrading-expo-app-in-android/51194/4
I landed on the same issue on a different context.
I am releasing my app with expo-github-action.
My problem was during the build expo publish --clear --release-channel staging
[08:52:02] - Expo SDK: 41.0.0
[08:52:02] - Release channel: staging
[08:52:02] - Workflow: Managed
[08:52:03] Building optimized bundles and generating sourcemaps...
[08:52:03] Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/
[08:52:03] • should NOT have additional property 'nodeModulesPath'.
Solved with updating node-version
// .github/workflows/staging.yml
...
steps:
- uses: actions/checkout#v2
- uses: actions/setup-node#v1
with:
node-version: 14.x <------- update here
- uses: expo/expo-github-action#v5
with:
expo-version: 4.x <------- update here
expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
expo-cache: true
For Expo SDK42 is not needed to add "sdkVersion": "42.0.0", it's deprecated and will not work.
The solution is to update expo-cli to version 4.9.0 - npm i expo-cli#4.9.0
NOTE: be careful because with v4.9.1 it still appears :/
Error? its an expo related breakage
solution? simply go to your app.json file, add an expo property like so
{
"expo":{
"appKey":"NodeModulesPath",
},
"name": "NodeModulesPath",
}
ps: you can replace the "nodeModulesPath" with your particular property that is throwing the error
I had that problem so I updated the expo go (the app to run the application) and it fixed

command "npx create-react-app project" not generating project

All of a sudden I started getting this error when I type
npx create-react-app project
The error is :
Invalid "exports" main target "index.js" defined in the package config /home/swaraj/.npm/_npx/8451/lib/node_modules/create-react-app/node_modules/is-promise/package.json
Can anybody tell me what's this error and how to resolve it
This must mean that your package.json is broken.
I just had the same problem, and it fixed for me when I recreated/edited the package.json it is trying to access.
Type yarn init -y and read the package.json
Add the following lines:
"resolutions": {
"is-promse": "2.1.0",
"run-async/is-promise": "2.1.0"
}
Afterwards do yarn add --dev create-react-app and then try to compile your reactjs application using:
yarn create-react-app <PATH/APP-NAME>
I would also recommend trying to manually remove is-promise property. I think the command for that was called npm remove is-promise, but I am not sure.
But I am pretty sure that your package.json needs a fix :)
Reply if it didn't work, I'll try to find a different way-around then.
If that solution doesn't work try installing node version 12.12.0 and running create-react-app again.
There are issues with the promise dependency being worked on at the moment. Issue
Do not downgrade your node version. Downgrading was a temporary solution, as for now, this issue is fixed with 2.2.2 version of is-promise package. If you still experience problems creating new CRA, consider npm install -g --force create-react-app
If even then bug is still present, please comment your issue to this github issue

React-boilerplate Package versioning mismatch error even though Package updated to required version

I am using react-boilerplate [3.5.0] and trying to install react-toolbox. After installation we are supposed to run command npm run build:dll and now it gives error =>
Building the Webpack DLL...
Your current PostCSS version is 5.2.18, but postcss-modules-scope uses
6.0.17. Perhaps this is the source of the error below.
Hash: dc615358062d53518c9f
Version: webpack 3.5.5
Time: 24479ms
After that I have even installed the required version [6.0.17] of postcss but still it's giving this error. Here's the log file if it helps.
https://drive.google.com/file/d/1f7qbz4pHCuZC9b6s8NqzZHpFAIMloqLZ/view?usp=sharing
For anyone looking for an answer, it's been told that React boilerplate has no support for Postcss (for now).
But there is a tried and tested solution by julienben and you can find it on this thread https://github.com/react-boilerplate/react-boilerplate/issues/2142 .

React Native "The expo SDK requires Expo to run. .... this code is not running on Expo."

I am coding with React Native. I don't see that when I first create react-native app for check running. When I implements my code see that. My purpose is generate apk.
app.json
build.gradle
index.js (index.android.json)
App package.json
Solved
Result: I solved my problem with npm install. I would like say many month after.
If anyone's getting this error after upgrading Expo, try restarting your simulator - that fixed it for me.
Here is my experience if someone using expo sees those error message.
I accidentally installed expo manually in my project which was version 29.0.0.
I was using version 28.0.0 of expo sdk, so it may have crashed inside.
What I did:
manually upgrade sdkVersion of app.json to 29.0.0.
change sdk version to 29.0.0 for react-native.
Had exactly the same error - fresh machine, fresh npm, only one version of expo installed.
Turns out, expo requires you to build it as an app before it can send it to the expo app properly (at least on Android). This is easiest done by:
Adding an "android" section to app.json, with the contents "package": "uk.co.yourcompany.yourpackagename" (this is required by android packages. It can be complete garbage, but should follow that format - a backwards domain name)
running expo build:android and following the instructions to sign up to expo's servers and build the app
then restarting expo start
Not sure if this is documented anywhere though, so may be a new thing?
Another thing to try is to move your node_modules folder away (or maybe delete it, up to you) and re-run npm install
According to the official tutorial: https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html
If you want to use expo in your application, you must create it in the following way
npm i -g create-react-native-app
create-react-native-app my-project
cd my-project
npm start
This will start the React Native packager and print a QR code. Open it in the Expo app to load your JavaScript.
as I see your code has files that are not necessary, such as build.gradle and index.js, the structure that create-react-native-app creates is different and easier to use
I was getting the same error after updating the expo-cli to version 3.0.6.
By looking at my package.json I noticed the expo-cli version installed on my computer is not the same as package.json. so I changed it to "expo-cli": "^3.0.6" and ran npm install || yarn, then the error disappeared!

Resources