I have a package.json file that looks like this.
{
"name": "package",
"version": "1.0.0",
"description": "wordpress",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-cli": "^0.1.13",
"grunt-contrib-cssmin": "^0.9.0",
"load-grunt-tasks": "^0.4.0",
"grunt-bower-install": "~0.7.0",
"grunt-contrib-sass": "^0.7.3",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-uglify": "^0.4.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-concat": "^0.4.0",
"grunt-concat-css": "^0.3.1",
"matchdep": "^0.3.0",
"grunt-bower-install": "^1.6.0",
"grunt-modernizr": "^0.5.2",
"grunt-notify": "~0.2.3"
}
}
When I run
npm install
It creates a node_modules folder, adds the modules in the package.json file but also adds lots of other modules that I haven't referenced.
The extra modules you're seeing are the dependencies of the modules you've explicitly installed - in other words, it's the things they have listed in their package.json. For example, if you install the async module, lodash will get installed as well, as async depends on it to be able to work.
Related
Im building a crossplatform monorepo application for Web, Android and iOS from this example https://github.com/brunolemos/react-native-web-monorepo and when I added React Native Base to my project I changed my config-overrides.js according to this guide https://docs.nativebase.io/docs/GetStarted.html for Web
But after that I got
SyntaxError: C:\Users\maksi\Desktop\ecmsk\node_modules\native-base\node_modules\react-native-vector-icons\lib\create-icon-set-from-fontawesome5.js: Support for the experimental syntax 'classProperties' isn't currently enabled error.
I tried adding loose option to #babel/plugin-proposal-class-properties plugin but that didn't work. And I also tried adding plugins to my package.json and that didn't work either.
package.json
{
"name": "web",
"version": "0.0.1",
"private": true,
"dependencies": {
"#types/history": "^4.7.2",
"#types/js-cookie": "^2.2.2",
"#types/react": "^16.8.23",
"#types/react-redux": "^7.1.1",
"#types/redux-api-middleware": "^3.0.1",
"connected-react-router": "^6.5.2",
"history": "^4.9.0",
"js-cookie": "^2.2.0",
"native-base": "^2.13.4",
"react": "16.8.4",
"react-art": "^16.8.6",
"react-dom": "16.8.4",
"react-native-elements": "^1.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "0.10.0",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-scripts": "2.1.8",
"redux": "^4.0.4",
"redux-api-middleware": "^3.0.1"
},
"scripts": {
"compile": "tsc -b",
"prestart": "npm run compile",
"start": "concurrently \"npm run compile -- -w\" \"npm run _start\"",
"_start": "react-app-rewired start",
"prebuild": "npm run compile",
"build": "react-app-rewired build",
"pretest": "npm run compile",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"babel-plugin-react-native-web": "^0.11.5",
"concurrently": "*",
"customize-cra": "^0.4.1",
"react-app-rewired": "^2.1.3",
"typescript": "*"
}
}
config-overrides.js
const path = require('path');
const {
override,
addWebpackAlias,
babelInclude,
addBabelPlugins
} = require('customize-cra');
module.exports = override(
addWebpackAlias({
"react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
"react-native": "react-native-web"
}),
babelInclude([
path.resolve('src'),
path.resolve('../components/src'),
path.resolve('../../node_modules/native-base-shoutem-theme'),
path.resolve('../../node_modules/react-navigation'),
path.resolve('../../node_modules/react-native-easy-grid'),
path.resolve('../../node_modules/react-native-drawer'),
path.resolve('../../node_modules/react-native-safe-area-view'),
path.resolve('../../node_modules/react-native-vector-icons'),
path.resolve('../../node_modules/react-native-keyboard-aware-scroll-view'),
path.resolve('../../node_modules/react-native-web'),
path.resolve('../../node_modules/react-native-tab-view'),
path.resolve('../../node_modules/static-container'),
]),
addBabelPlugins(
"#babel/plugin-proposal-class-properties"
),
);
The problem might be the included paths. In my case I have it this way:
babelInclude([
path.resolve('node_modules/react-native-typing-animation'),
path.resolve('src')
])
Paths are relative to the config.overrides file.
I am getting a persistent Jest error whenever I use npm to install my dependencies on the server side. Using yarn to install the same dependencies works, but I am currently working on a team where we're all using npm. I have tried all of the proposed solutions on Stack Overflow, upvoted or not, and none have worked for me. The two senior devs I've asked so far don't think there is anything in my globally installed npm packages that would cause this.
I get this error for every Jest test suite I run:
● Test suite failed to run
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error tolook for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel.
at throwVersionError (node_modules/#babel/helper-plugin-utils/lib/index.js:65:11)
at Object.assertVersion (node_modules/#babel/helper-plugin-utils/lib/index.js:13:11)
at _default (node_modules/#babel/plugin-proposal-decorators/lib/index.js:35:7)
at node_modules/#babel/helper-plugin-utils/lib/index.js:19:12
at Function.memoisePluginContainer (../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13) at Function.normalisePlugin (../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32) at ../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
at Array.map (<anonymous>)
at Function.normalisePlugins (../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init (../../../node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (../../../node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (../../../node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (../../../node_modules/babel-core/lib/transformation/pipeline.js:46:16)
This is what my package.json looks like:
{
"name": "nanny-now",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest --verbose --runInBand",
"test:watch": "npm run test -- --watch",
"build": "babel src -d lib -s true",
"start": "node lib/index.js",
"start:watch": "nodemon src/index.js --exec babel-node"
},
"jest": {
"testEnvironment": "node"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.2.0",
"#babel/node": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.6",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"chance": "^1.0.18",
"eslint": "^5.9.0",
"eslint-plugin-babel": "^5.3.0",
"jest": "^23.6.0",
"nodemon": "^1.18.7",
"supertest": "^3.3.0"
},
"dependencies": {
"bcryptjs": "^2.4.3",
"dotenv": "^6.2.0",
"express": "^4.16.4",
"jsonwebtoken": "^8.4.0",
"mongoose": "^5.3.14",
"morgan": "^1.9.1",
"regenerator-runtime": "^0.13.1"
}
}
Here is my .babelrc file:
{
"presets": [
"#babel/preset-env"
],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"decoratorsBeforeExport": true
}
],
"#babel/plugin-proposal-class-properties"
]
}
As George Artemiou says, this error occurs because you are using Babel 7 in your project, while jest still uses Babel 6.
I had the same issue, and I solved it by installing babel-core#^7.0.0-bridge.0
See also:
https://github.com/babel/babel-bridge
The problem is with jest dependencies. I had the same issue and resolved it by adding the step below to my package.json file
"scripts": {
...
"postinstall": "rimraf node_modules/jest-runtime/node_modules/babel-core node_modules/jest-config/node_modules/babel-core",
...
}
Hope this helps..
I've created scoped package #scope/eslint-config with content
{
"name": "#scope/eslint-config",
"version": "1.0.3",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-eslint": "8.2.5",
"eslint": "5.1.0",
"eslint-config-airbnb": "17.0.0",
"eslint-config-prettier": "2.9.0",
"eslint-plugin-css-modules": "2.7.5",
"eslint-plugin-flowtype": "2.50.0",
"eslint-plugin-import": "2.13.0",
"eslint-plugin-jsx-a11y": "6.1.0",
"eslint-plugin-prettier": "2.6.2",
"eslint-plugin-react": "7.10.0",
"eslint-plugin-require-jsdoc-except": "1.1.0"
}
}
and in my project added it as "#scoped/eslint-config": "1.0.2",
However after running yarn install I see only that package without any dependency. But it works with npm
I've tried both yarn v1.8.0, v1.7.0 and v1.6.0
Have you met the troubles? Any solution?
In npm it works due to the flattern structure.
For yarn you need to say --flat but it causes other troubles
https://github.com/eslint/eslint/issues/5501
https://github.com/eslint/eslint/issues/3458
Preface: I am new to Javascript, Babel and React-Native.
I have been developing my app using the TodoMVC example from the relay source. I was wondering if it's possible to get React-Native + Relay to work together easily?
I setup my babelRelayPlugin and added it to my .babelrc. I installed the npm packages for "react-relay":"^0.7.3" and "babel-relay-plugin": "^0.7.3" but after running "npm install" and "react-native start" I either get an error saying "Unrecognized module 'react-relay'" OR "Relay is not defined".
From reading this thread and looking at the last comment ( https://github.com/facebook/relay/issues/26#issuecomment-194570137 ) it looks like at the moment I should just use TodoMVC as my base for new React-Native + Relay projects.
Is this correct?
Here is my .babelrc
{
"env": {
"development": {
"passPerPreset": true,
"presets": [
{
"plugins": [
"./plugins/babelRelayPlugin"
]
},
"react-native"
]
},
"server": {
"plugins": [
"./plugins/babelRelayPlugin"
],
"presets": [
"es2015",
"stage-0"
]
}
}
}
Here is my package.json
{
"name": "testApp",
"version": "1.0.0",
"private": true,
"scripts": {
"clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
"postinstall": "npm run clean:babelrc",
"start": "BABEL_ENV=server babel-node ./server.js",
"update-schema": "babel-node ./scripts/updateSchema.js"
},
"dependencies": {
"babel-preset-es2015": "^6.5.0",
"babel-preset-react-native": "^1.5.1",
"babel-preset-stage-0": "^6.5.0",
"babel-relay-plugin": "^0.7.3",
"express": "4.13.4",
"express-graphql": "0.4.9",
"graphql": "0.4.17",
"graphql-relay": "0.3.6",
"moment": "^2.12.0",
"node-fetch": "^1.4.1",
"react": "^0.14.5",
"react-native": "^0.22.2",
"react-native-animatable": "^0.5.2",
"react-native-aws3": "0.0.1",
"react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
"react-native-console-panel": "0.0.7",
"react-native-contacts": "^0.2.3",
"react-native-keyboard-aware-scroll-view": "0.0.6",
"react-relay": "^0.7.3",
"sync-request": "^3.0.0",
"uuid-v4": "^0.1.0"
},
"devDependencies": {
"babel-cli": "^6.6.4",
"flow-bin": "^0.22.1"
},
"engines": {
"npm": ">=3"
}
}
I managed to fix the issue. I added "babel-core": "^6.7.6" as a dev dependency. Removed all the scripts and cloned the project from git to a new folder. Everything runs perfectly now!
I'm trying to run some jest tests but keep getting the error:
'jest' is not recognized as an internal or external command, operable program or batch file.
Here is my package.json, can anyone please help get my test framework setup?
{
"name": "lac-react",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^9.0.8",
"gulp": "^3.8.11",
"gulp-concat": "^2.5.2",
"gulp-cssmin": "^0.1.7",
"gulp-react": "^3.0.1",
"gulp-rename": "^1.2.2",
"gulp-streamify": "0.0.5",
"gulp-uglify": "^1.2.0",
"gulp-watch": "^4.2.4",
"reactify": "^1.1.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.2.1"
},
"jest": {
"scriptPreprocessor": "./preprocessor.js",
"unmockedModulePathPatterns": [
"react"
],
"testPathDirs": [
"./src/components/__tests__/"
]
},
"dependencies": {
"moment": "^2.10.2",
"react": "^0.13.2",
"react-datepicker": "^0.6.2",
"react-message": "^1.3.0",
"react-router": "^0.13.3",
"react-skylight": "^0.2.0",
"superagent": "^1.2.0",
"react": "*",
"react-tools": "*",
"jest-cli": "*"
}
}
Looking closer at the errors, I had this:
error MSB8020: The build tools for Visual Studio 2010 (Platform Toolset = 'v100') cannot be found. To build using the v100 build tools, p lease install Visual Studio 2010 build tools.
I fixed this with adding the version of the build tools when doing an npm install:
--msvs_version=2013
All works fine now.
You can also fix this by adding a system variable
Install jest-cli. It worked for me.
Just npm i jest-cli
Test script should remain same "jest