Cant resolve module 'babel' when running dist - reactjs

I´ve built my project upon the generator-react-webpack. Now I am trying to deploy my react app to Heroku. In the process of Building dependencies I get an error:
npm run copy & webpack --env=dist
remote:
remote: Hash: 82c8f499a3f6822a3522
remote: Version: webpack 1.13.3
remote: Time: 73ms
remote:
remote: ERROR in Entry module not found: Error: Cannot resolve module 'babel' in /tmp/build_a9e8f64bdab19b2486d922d4ba0f3d83
There seems to be something weird with the loader. I´ve tried to include 'babel' in dependencies, and also tried to replace it with 'babel-core' and it did not work.
I´m super frustrated with this problem and would appreciate it alot if someone could help me. Thanks!
package.json
{
"name": "templateApp",
"private": true,
"version": "0.0.1",
"description": "Template application for future builds",
"main": "",
"engines": {
"node": "6.2.2"
},
"scripts": {
"clean": "rimraf dist/*",
"copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
"dist": "npm run copy & webpack --env=dist",
"lint": "eslint ./src",
"posttest": "npm run lint",
"release:major": "npm version major && npm publish && git push --follow-tags",
"release:minor": "npm version minor && npm publish && git push --follow-tags",
"release:patch": "npm version patch && npm publish && git push --follow-tags",
"serve": "node server.js --env=dev",
"serve:dist": "node server.js --env=dist",
"dev": "node server.js --env=dev",
"start": "node server.js --env=dev",
"test": "karma start",
"test:watch": "karma start --autoWatch=true --singleRun=false",
"postinstall": "npm run dist && npm run start"
},
"repository": "",
"keywords": [],
"author": "Alfred Ödling",
"devDependencies": {
"babel-core": "^6.0.0",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.5.0",
"bower-webpack-plugin": "^0.1.9",
"chai": "^3.2.0",
"copyfiles": "^0.2.1",
"css-loader": "^0.23.0",
"eslint": "^2.2.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^5.0.0",
"file-loader": "^0.8.4",
"glob": "^7.0.0",
"isparta-instrumenter-loader": "^1.0.0",
"karma": "^0.13.9",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.0.0",
"karma-mocha": "^1.0.0",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"lost": "^7.0.3",
"minimist": "^1.2.0",
"mocha": "^2.2.5",
"node-sass": "^3.4.2",
"null-loader": "^0.1.1",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.0.0",
"postcss": "^5.0.11",
"postcss-loader": "^0.8.0",
"react-addons-test-utils": "^15.0.0",
"react-hot-loader": "^1.2.9",
"rimraf": "^2.4.3",
"rucksack-css": "^0.8.6",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.12.0"
},
"dependencies": {
"autoprefixer": "^6.3.7",
"axios": "^0.13.1",
"classnames": "^2.2.5",
"clipboard": "^1.5.12",
"core-js": "^2.0.0",
"firebase": "^3.4.1",
"fixed-data-table": "^0.6.3",
"flat": "^2.0.1",
"history": "^3.0.0",
"lodash": "^4.15.0",
"lost": "^7.0.3",
"normalize.css": "^4.0.0",
"postcss": "^5.1.1",
"postcss-cli": "^2.5.2",
"postcss-cssnext": "^2.8.0",
"postcss-import": "^8.1.2",
"postcss-loader": "^0.8.2",
"react": "^15.0.0",
"react-addons-css-transition-group": "^15.3.0",
"react-cookie": "^0.4.8",
"react-datagrid": "^2.1.1",
"react-dom": "^15.3.1",
"react-redux": "^4.4.5",
"react-router": "^2.6.1",
"react-tooltip": "^3.2.1",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",
"rucksack-css": "^0.8.6",
"seamless-immutable": "^6.1.1"
}
}
dist.js
'use strict';
let path = require('path');
let webpack = require('webpack');
let baseConfig = require('./base');
let defaultSettings = require('./defaults');
// Add needed plugins here
let BowerWebpackPlugin = require('bower-webpack-plugin');
let config = Object.assign({}, baseConfig, {
entry: path.join(__dirname, '../src/index'),
cache: false,
devtool: 'sourcemap',
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new BowerWebpackPlugin({
searchResolveModulesDirectories: false
}),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.NoErrorsPlugin()
],
module: defaultSettings.getDefaultModules()
});
// Add needed loaders to the defaults here
config.module.loaders.push({
test: /\.(js|jsx)$/,
loader: 'babel',
include: [].concat(
config.additionalPaths,
[ path.join(__dirname, '/../src') ]
)
});
module.exports = config;

From https://github.com/mxstbr/react-boilerplate/issues/914
"Make sure you set NPM_CONFIG_PRODUCTION=false on heroku. Without this devDependencies won't be installed. Which are needed for this boilerplate to build.
If you have heroku cli installed you can
heroku config:set NPM_CONFIG_PRODUCTION=false --app your-app-name
else go to the settings tab on your app and add in Config Variables"
This fixed it!

Can you change your entry from your dist.js file to this:
entry: [
'babel-polyfill',
path.join(__dirname, '../src/index')
],

Related

Duplicated React/Redux project resulting "async_hooks" not found

First of all, thank you all for your attention. I'm new about react/redux code, and I have an old project that already existed and I only need to duplicate it because they need the same version with some different parameters.
So, I duplicated the old project, created a new gitlab project for it, changed what I needed(practically only text) on the duplicated project, then how it was showing many errors after "npm run build", I did:
Inside the package.json file I changed "node-sass" to use the version 4.11.0 because the old one was generating some "Module not found: Error: Cannot resolve module" kind of errors(as I said, this was a duplication from a old project that even is still running on production has many deprecated dependencies).
I deleted the package-lock.json file.
I deleted also the node_modules folder.
I did "npm install" already on the master branch of the folder to create again the node_modules.
As you can see, I just tried to delete the package-lock.json file then I deleted the node_modules folder, and finally I did "npm install", but when I tried "npm run build", the async_hooks error showed up... I'm stuck in this part.
After these basic steps, the error happened: Cannot resolve module 'async_hooks'. I tried to "npm install async_hooks" but it didn't work, I also tried to put the "async-hooks" on the package.json file but it didn't work, and finally I also tried put a new version from bluebird there but didn't work too.
How to install this "async_hooks"? Because even after doing "npm install async_hooks" it didn't work yet. I run "npm run build" but the same error happened.
See below the full result:
Module not found: Error: Cannot resolve module 'async_hooks' in C:\xampp\htdocs\careers\node_modules\bluebird\js\release
# ./~/bluebird/js/release/util.js 410:18-40
ERROR in ./~/bluebird/js/release/promise.js
Module not found: Error: Cannot resolve module 'async_hooks' in C:\xampp\htdocs\careers\node_modules\bluebird\js\release
# ./~/bluebird/js/release/promise.js 34:4-26
. Here is my package.json file:
"main": "index.js",
"repository": "git#github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"build": "node ./node_modules/webpack/bin/webpack.js ",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"license": "ISC",
"engines": {
"node": "^v8.9.4"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-react-constant-elements": "^6.3.13",
"babel-plugin-transform-react-inline-elements": "^6.3.13",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.1.18",
"babel-preset-es2015-node5": "^1.2.0",
"babel-preset-react": "^6.1.18",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-1": "^6.1.18",
"babel-register": "^6.11.6",
"babel-runtime": "^6.11.6",
"bootstrap-loader": "^1.1.0-beta.1",
"bootstrap-sass": "^3.3.7",
"chai": "~3.5.0",
"chai-jquery": "~2.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"jquery": "~2.2.1",
"jsdom": "~8.1.0",
"mocha": "~2.4.5",
"node-sass": "^4.11.0",
"postcss-loader": "^0.9.1",
"react-addons-test-utils": "~0.14.7",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "~1.12.9",
"webpack-dev-server": "~1.14.0"
},
"dependencies": {
"axios": "~0.13.1",
"bluebird": "^3.4.1",
"css-loader": "^0.23.1",
"griddle-react": "~0.6.0",
"immutable": "^3.8.1",
"jwt-decode": "^2.2.0",
"lodash": "~3.10.1",
"moment": "^2.19.1",
"nested-property": "^0.0.7",
"numeral": "^2.0.6",
"react": "^0.14.3",
"react-datetime": "^2.10.3",
"react-dom": "^0.14.3",
"react-ga": "^2.3.5",
"react-redux": "~4.3.0",
"react-router": "~2.0.1",
"redux": "~3.1.7",
"redux-form": "^6.1.1",
"redux-logger": "^3.0.1",
"redux-thunk": "^2.2.0"
}
}
. and here is my webpack.config.js file:
var path = require('path');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: path.join(__dirname,'./js/'),
publicPath: '/js/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
Any ideas?

npm run build error: Linting and checking validity of types ...Error: Cannot find module 'escope'

Upgraded my project's package.json & did some audit fixes. But now not able to run the build. Tried all the solutions from stackoverflow and other forums, none of them worked.
Here is my package.json
{
"name": "my-admin-frontend",
"version": "0.0.1",
"author": "",
"license": "ISC",
"scripts": {
"dev": "node server.js",
"build": "next build ./src",
"preinstall": "npx npm-force-resolutions",
"start": "npm run build && node server.js",
"coverage": "jest",
"lint": "npm run lint:js && npm run lint:styles",
"lint:js": "eslint \"./src/pages/*.js\" \"./src/components/**/*.js\" \"./src/adapters/**/*.js\" --fix",
"lint:styles": "stylelint \"./src/pages/*.js\" \"./src/components/**/*.styles.js\" \"./src/components/**/*.css\"",
"check-audit": "npm audit",
"check-quality": "npm run lint",
"eslint-report": "eslint --ext .jsx,.js -c .eslintrc.yml -o report.json ./src/components -f json",
"test": "npm run coverage -- --coverage --watchAll=false"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#date-io/date-fns": "^2.16.0",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.2.10",
"#microsoft/applicationinsights-web": "^2.8.9",
"#microsoft/microsoft-graph-client": "^3.0.4",
"applicationinsights": "^2.3.6",
"axios": "^1.2.1",
"body-parser": "^1.20.1",
"cookie": "^0.5.0",
"cookie-parser": "^1.4.6",
"date-fns": "^2.29.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.7",
"eslint-config-next": "^13.0.6",
"express": "^4.18.2",
"express-session": "^1.17.3",
"grapesjs": "^0.20.1",
"grapesjs-preset-webpage": "^1.0.2",
"helmet": "^6.0.1",
"hpp": "^0.2.3",
"identity-obj-proxy": "^3.0.0",
"jquery": "^3.6.1",
"js-cookie": "^3.0.1",
"jwt-decode": "^3.1.2",
"mobx": "^6.7.0",
"mobx-react": "^7.6.0",
"mobx-react-lite": "^3.4.0",
"next": "^13.0.6",
"next-images": "^1.8.4",
"node-fetch": "^3.3.0",
"passport": "^0.6.0",
"passport-azure-ad": "^4.3.4",
"postcss": "^8.4.19",
"prop-types": "^15.8.1",
"qrcode.react": "^3.1.0",
"react": "^18.2.0",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"react-idle-timer": "^5.4.2",
"react-player": "^2.11.0",
"react-responsive-carousel": "^3.2.23",
"react-screen-orientation": "0.0.4",
"react-test-renderer": "^18.2.0",
"styled-components": "^5.3.6"
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.20.5",
"#babel/plugin-proposal-optional-chaining": "^7.18.9",
"#jest/fake-timers": "29.3.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"autoprefixer": "^10.4.13",
"babel-eslint": "^7.2.3",
"babel-plugin-styled-components": "^2.0.7",
"contentful-management": "^10.22.0",
"dotenv": "^16.0.3",
"eslint": "^8.29.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.2",
"jest": "^29.3.1",
"jest-enzyme": "^4.2.0",
"jest-puppeteer": "^6.1.1",
"junit-report-builder": "^3.0.1",
"pa11y-ci": "^3.0.1",
"puppeteer": "^19.4.0",
"stylelint": "^14.16.0",
"stylelint-config-recommended": "9.0.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.10.0",
"tailwindcss": "^3.2.4"
},
"resolutions": {
"node-fetch": "2.6.7",
"object-path": "0.11.5",
"glob-parent": "5.1.2",
"set-value": "4.0.1",
"underscore": "1.13.2",
"ws": "7.4.6",
"jest-environment-jsdom": "27.4.6"
},
"husky": {
"hooks": {
"pre-push": "npm run check-quality"
}
},
"robots": {
"prod": {
"userAgent": [
"*"
],
"allow": [
"/"
]
},
"dev": {
"userAgent": [
"*"
],
"disallow": [
"*"
],
"noindex": [
"*"
]
}
}
}
My .eslintrc.yml
env:
browser: true
node: true
commonjs: true
es6: true
jest: true
extends:
- eslint:recommended
- plugin:react/recommended
- plugin:jsx-a11y/recommended
- next/core-web-vitals
parser: babel-eslint
parserOptions:
ecmaFeatures:
jsx: true
ecmaVersion: 2018
sourceType: module
plugins:
- react
- jsx-a11y
- react-hooks
rules:
react-hooks/rules-of-hooks:
- error
react-hooks/exhaustive-deps:
- warn
indent:
- error
- 4
semi:
- error
- never
no-console:
- error
- allow:
- error
- warn
- info
object-curly-spacing:
- error
- always
array-bracket-spacing:
- error
- never
jsx-quotes:
- error
- prefer-single
lines-between-class-members:
- error
- always
no-multiple-empty-lines:
- error
- max: 1
react/display-name:
- off
settings:
react:
version: detect
My .eslintignore
out/*
.next/*
Error I am getting is :
Linting and checking validity of types ...Error: Cannot find module 'escope'
Require stack:
C:\project test\MT-MyProject\node_modules\eslint\lib\api.js
I tried multiple changes in package.json but none worked.
I tried cleaning cache and installing all again but no luck.
have You tried to uninstall eslint library and then to try with npm i and then build

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch on HEROKU with React

I get this error in 9 of 10 attempts of deploy, and I don't know what is the cause of it. I've tried every recommendation I found on StackOverflow, but non of them works stable. I have no ideas why it is going on, and will preciate any help, guys!
Procfile
web: npm start
initializers/server/index.js
import Express from 'express';
import handleRender from './handleRender';
const app = Express();
const port = process.env.PORT || 3000;
// Serve static files
app.use('/assets', Express.static('./dist/assets/'));
// This is fired every time the server side receives a request
app.use(handleRender);
// We are going to fill these out in the sections to follow
/* eslint no-console: 0 */
app.listen(port, () => console.log('App is listening on', port));
package.json
{
"name": "planner",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fullhuman/postcss-purgecss": "^3.1.3",
"#reduxjs/toolkit": "^1.5.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"autoprefixer": "^9.8.6",
"axios": "^0.21.1",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"history": "^4.1.0",
"html-webpack-plugin": "^4.5.0",
"i18next": "^19.8.5",
"mini-css-extract-plugin": "^1.3.3",
"msw": "^0.25.0",
"postcss": "^7.0.35",
"prop-types": "^15.7.2",
"qs": "^6.9.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-i18next": "^11.8.5",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.2",
"redux": "^4.0.5",
"redux-undo": "^1.0.1",
"regenerator-runtime": "^0.13.7",
"sass-loader": "^7.3.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"universal-cookie": "^4.0.4",
"uuid-random": "^1.3.2",
"webpack": "^4.40.2",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^3.3.12",
"webpack-manifest-plugin": "^3.0.0",
"webpack-node-externals": "^2.5.2"
},
"engines": {
"node": "14.5.0",
"npm": "6.14.9"
},
"scripts": {
"test": "jest",
"build:css": "tailwind build src/assets/tailwind.css -o src/assets/main.css",
"watch:css": "chokidar 'src/assets/tailwind.css' -c 'npm run build:css'",
"start:dev": "concurrently -n Tailwind,React 'npm run watch:css' 'webpack-dev-server --config ./initializers/webpack/development.js'",
"build:client": " rimraf ./dist/assets/* && webpack --config ./initializers/webpack/production.js",
"build:server": "NODE_ENV=production npm run build:css && webpack --config ./initializers/webpack/server.js",
"start:server": "NODE_ENV=production node --enable-source-maps ./dist/server/server",
"start": "NODE_ENV=production npm run build:css && npm run build:client && npm run build:server && npm run start:server"
},
"jest": {
"verbose": true,
"moduleDirectories": [
"src",
"node_modules"
],
"moduleNameMapper": {
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
"setupFilesAfterEnv": [
"<rootDir>src/tests/setupTests.js"
],
"transform": {
"^.+\\.svg$": "<rootDir>/src/tests/svgTransform.js",
"^.+\\.(js|jsx)$": "babel-jest"
}
},
"devDependencies": {
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"#testing-library/dom": "^7.29.4",
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"#typescript-eslint/eslint-plugin": "^4.11.1",
"#typescript-eslint/parser": "^4.11.1",
"babel-eslint": "^10.1.0",
"chokidar-cli": "^2.1.0",
"concurrently": "^5.3.0",
"eslint": "^7.16.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"react-test-renderer": "^17.0.1",
"redux-mock-store": "^1.5.4",
"webpack-dev-server": "^3.11.0"
}
}
What else can I do to solve this problem?
Your code looks fine but:
"start": "NODE_ENV=production npm run build:css && npm run build:client && npm run build:server && npm run start:server"
This is too much.
Put them in build or heroku-postbuild, see https://devcenter.heroku.com/changelog-items/1557 and https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process
Don't do any "building" in your start script. Use your start script to only execute your code.
It fails to bind to $PORT within 60 seconds due to building.

React can't be applied by global CSS

I am modifying a forum software at here
After installing "npm install -S react-draft-wysiwyg" on that forum project, I tried to apply global css by putting "import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';" at the top of some React component js file in that forum software.
But it looks like something is blocking global CSS. CSS in that import didn't affect React js file. But I do not know what is blocking global css. My only guess is could be somewhat related to webpack but not sure.
I tried making a new react project by "npx create-react-app" and applied that global css, and it worked there. So I concluded that something is blocking global css in that forum project so that global CSS implementation doesn't work in that forum software only.
Here is package.json that forum software uses:
{
"name": "reforum",
"version": "1.0.0",
"description": "A forum application built with ReactJS, Redux, Express and MongoDB",
"license": "MIT",
"keywords": [
"forum",
"react",
"redux",
"express",
"mongodb"
],
"main": "server.js",
"engines": {
"node": "7.1.0"
},
"scripts": {
"test": "jest",
"start": "better-npm-run start",
"start:dev": "better-npm-run start:dev",
"build": "webpack --config config/webpack.prod.config.js"
},
"betterScripts": {
"start": {
"command": "node server.js",
"env": {
"NODE_ENV": "production",
"PORT": 3030
}
},
"start:dev": {
"command": "node server.js",
"env": {
"NODE_ENV": "development",
"PORT": 8080
}
}
},
"dependencies": {
"better-npm-run": "^0.0.13",
"body-parser": "^1.15.2",
"compression": "^1.6.2",
"connect-flash": "^0.1.1",
"connect-mongo": "^1.3.2",
"cookie-parser": "^1.4.3",
"express": "^4.14.0",
"express-session": "^1.14.2",
"help": "^3.0.2",
"lodash": "^4.17.4",
"mongoose": "^4.7.4",
"morgan": "^1.7.0",
"passport": "^0.3.2",
"passport-github": "^1.1.0",
"passport-local": "^1.0.0"
},
"devDependencies": {
"async": "^2.1.5",
"autoprefixer": "^6.6.1",
"axios": "^0.15.3",
"babel": "^6.5.2",
"babel-core": "^6.20.0",
"babel-eslint": "^7.1.1",
"babel-jest": "^20.0.3",
"babel-loader": "^6.2.9",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"classnames": "^2.2.5",
"css-loader": "^0.26.1",
"draft-js": "^0.10.0",
"eslint": "^3.12.1",
"eslint-plugin-react": "^6.8.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"jest": "^20.0.4",
"moment": "^2.17.1",
"nock": "^9.0.13",
"postcss-loader": "^1.2.2",
"postcss-nesting": "^2.3.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-helmet": "^5.0.3",
"react-hot-loader": "^1.3.1",
"react-onclickoutside": "^5.10.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-mock-store": "^1.2.3",
"redux-thunk": "^2.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"webpack-dev-middleware": "^1.8.4",
"webpack-hot-middleware": "^2.13.2"
}
}
Can you please tell me what is blocking global CSS implementation?
Thank you very much.
You are using css-loader in webpack. So normal css will be compiled to another name such as
localIdentName: "[local]___[hash:base64:5]"
You can write your css with global such as
:global(.myclass) {
background-color: red;
}
or you can disable module in your webpack config
{
loader: "css-loader",
options: {
modules: false,
}
},

"React.createContext is not a function" - but I am not using it

I am getting "React.createContext is not a function" error while running a react-native application. I searched for 'createContent' in the code, it doesn't exist.
Any idea what may be the reason for the error.
It is an iOS build of an app that is already running on android.
Here is my package.json file:
{
"name": "newapp",
"version": "0.0.2",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest --verbose --coverage",
"test:update": "jest --verbose --coverage --updateSnapshot",
"test:watch": "jest --verbose --watch",
"coverage": "jest --verbose --coverage && xdg-open ./coverage/lcov-report/index.html",
"lint": "npx eslint --fix ./src/*"
},
"dependencies": {
"apollo-boost": "0.1.17",
"axios": "^0.18.0",
"babel": "^6.23.0",
"buffer": "5.1.0",
"cross-fetch": "^3.0.0",
"enzyme": "^3.3.0",
"graphql": "0.13.2",
"graphql-tag": "2.10.0",
"jasmine-react-helpers": "^0.2.2",
"lodash": "4.17.5",
"moment": "2.21.0",
"query-string": "^6.1.0",
"react": "16.2.0",
"react-addons-test-utils": "^15.6.2",
"react-apollo": "2.2.4",
"react-dom": "^16.4.0",
"react-native": "0.51.0",
"react-native-elements": "0.19.0",
"react-native-fabric": "^0.5.1",
"react-native-htmlview": "^0.12.1",
"react-native-link-preview": "^1.3.5",
"react-native-login": "^0.0.1-alpha.2",
"react-native-login-keycloak": "^1.0.2",
"react-native-onesignal": "3.2.6",
"react-native-push-notification": "https://github.com/Dhanraj-bidchat/react-native-push-notification.git",
"react-native-sleek-loading-indicator": "^0.1.3",
"react-native-spinkit": "^1.1.1",
"react-native-svg": "6.2.2",
"react-native-swipe-cards": "^0.1.1",
"react-native-swiper": "1.5.13",
"react-native-vector-icons": "4.5.0",
"react-navigation": "1.5.6",
"react-redux": "5.0.7",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-persist": "5.9.1",
"redux-thunk": "^2.2.0",
"victory-native": "0.17.2",
"whatwg-fetch": "2.0.4"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-jest": "^22.4.4",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react-native": "4.0.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jest": "^21.17.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-only-warn": "^1.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-react": "^7.9.1",
"eslint-plugin-standard": "^3.1.0",
"jest": "^23.5.0",
"jest-resolve": "^23.0.0",
"jest-serializer-enzyme": "^1.0.0",
"react-native-mock-render": "^0.0.26",
"react-test-renderer": "^16.3.2",
"redux-mock-store": "^1.5.1",
"sinon": "^5.0.10"
},
"jest": {
"preset": "react-native",
"setupFiles": [
"./jest-setup.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"modulePaths": [
"<rootDir>/src",
"<rootDir>/node_modules"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!(react-native-safe-area-view|react-navigation|react-native-htmlview|react-native-fabric|react-native-login|react-native-elements|react-native-vector-icons|react-native-spinkit|victory-pie|victory-chart|victory-core|react-native-svg|react-native|redux-persist|victory-native|react-native-swipe-cards|react-native-swiper)/)"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js",
"\\.(css|less)$": "<rootDir>/assetsTransformer.js"
}
}
}
In your package react and react-dom are not having the same version which is why you get the error. react-dom#16.4.0 will want to have access to React.createContext but react#16.2.0 won't have it.
In order make it work run the following command:
yarn upgrade react#16.4.0
Or if you are using NPM:
npm install react#16.4.0
If this is happening using react 18 or Next JS 13. You are probably trying to use a client component functionalities in a server component. By default all components are treated as server components unless you explicitly specify.
To solve this and add the "use client" directive at the top of the file (before any imports). Here is more details on When to use Server vs. Client Components?
Try upgrading React to React to 16.4.1
Using npm I solved it by upgrading to 16.4.1:
npm i react#16.4.1
Adding #emotion/react resulted in a similar error TypeError: React.createContext is not a function. The error disappeared after I removed #emotion/react and downgraded #emotion/styled from 11 to 10.
run
npm install react#latest
and
npm install react-dom#latest
fixed my error with this update.
If npm i react#latest react-dom#latest doesn't work try doing npm update , it will update all packages.

Resources