I'm getting the following error upon running react-native init testNative
ReferenceError: [BABEL] /Users/m/git/testNative/node_modules/react-native/local-cli/bundle/bundle.js: Unknown option: base.optional
at Logger.error (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:289:18)
at OptionManager.init (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:486:10)
at File.initOptions (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/index.js:211:75)
at new File (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/file/index.js:129:22)
at Pipeline.transform (/Users/m/git/testNative/node_modules/babel-core/lib/transformation/pipeline.js:48:16)
at Object.transformFileSync (/Users/m/git/testNative/node_modules/babel-core/lib/api/node.js:118:10)
at compile (/Users/m/git/testNative/node_modules/babel-register/lib/node.js:100:20)
at loader (/Users/m/git/testNative/node_modules/babel-register/lib/node.js:128:14)
at Object.require.extensions.(anonymous function) [as .js] (/Users/m/git/testNative/node_modules/babel-register/lib/node.js:138:7)
I've tried the advice in the following posts (https://github.com/facebook/react-native/issues/5, https://github.com/babel/babel-loader/issues/132, https://github.com/babel/babelify/issues/129, React 0.14 error: Module build failed: ReferenceError: [BABEL] .../node_modules/eslint-loader/index.js!/.../main.jsx: Unknown option: base.stage), but with no avail.
My current hypothesis is that because I don't have a .babelrc file anywhere on my system, it's falling back to "base.optional." At least adding a .babelrc file to my project folder is the only thing that yielded a different outcome (downgrading node, babel, or react-native did nothing). So, if this is the solution, does anyone know what my .babelrc file should include for a react-native project?
Thanks
Here is one of the .babelrc files that you can use with your RN project.
Note that RN works fine with no .babelrc file in your project (it falls back to node_modules/react-native/.babelrc file.
{
"retainLines": true,
"compact": true,
"comments": false,
"plugins": [],
"presets": ["stage-0", "react", "react-native"],
"sourceMaps": false,
}
You also need to add these line to your package.json file and install the dev-dependencies : npm i --save-dev <package-name>
"devDependencies": {
"babel-preset-react": "^6.3.13",
"babel-preset-react-native": "^1.4.0",
"babel-preset-stage-0": "^6.3.13"
}
Related
In Vuejs project,
node version: v10.6.0
Package.json version:
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-rc.4",
"#vue/cli-plugin-unit-jest": "^3.0.0-rc.4",
"#vue/cli-service": "^3.0.0-rc.4",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.0.1",
"vue-template-compiler": "^2.5.16"
},
When I run it with build in tasks,
"test:unit": "vue-cli-service test:unit"
But as I want to debug, so I run manually with node command:
node node_modules/.bin/jest
It gives following error:
FAIL tests/unit/HelloWorld1.spec.js
● Test suite failed to run
.../tests/unit/HelloWorld1.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.iterator";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
After I added .babelrc with following content
{"env": {
"development": {
"plugins": ["transform-es2015-modules-commonjs"]
},
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}}
Things got a little better, It can pass the the test file without "import", once there's import, it will show a different error:
....tests/unit/HelloWorld1.spec.js:3
import _interopRequireWildcard from "..../node_modules/#babel/runtime/helpers/builtin/es6/interopRequireWildcard";
^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
After struggling for a few days. Finally, I got the solution to run jest in debug mode for VueJs application.
After debuging into vue-cli-service and in turn #vue/cli-plugin-unit-jest, I found the following code before it spawns the jest process:
process.env.VUE_CLI_BABEL_TARGET_NODE = true
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true
Solution
So the solution is very simple.
Just add these two environment variables before running the jest command. The following commands will start jest in debug mode:
export VUE_CLI_BABEL_TARGET_NODE=true
export VUE_CLI_BABEL_TRANSPILE_MODULES=true
./node_modules/jest/bin/jest.js --clearCache
node --inspect-brk ./node_modules/jest/bin/jest.js -i
Notes
Make sure DON'T add ".babel.rc", this will mass up VueJS babel.
And often, you will need to run jest with the --clearCache option. Otherwise, the stale generated file will also mess up.
The jest option -i is also important. Otherwise, the test will be running in a separate process which will not be in debug mode.
Had the same issue.
FAIL tests/unit/example.spec.js
● Test suite failed to run
.../tests/unit/example.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.find";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Tried the answer above.This article solved my problem.
Solution:
npm uninstall "#vue/cli-plugin-unit-jest"
deleted tests folder with all content
deleted jest.config.js file
vue add #vue/cli-plugin-unit-jest
for VS Code use the next launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "vscode-jest-tests",
"type": "node",
"request": "launch",
"runtimeArgs": [
"--inspect-brk",
"./node_modules/#vue/cli-service/bin/vue-cli-service.js",
"test:unit",
"--runInBand"
],
"cwd": "${workspaceFolder}",
"protocol": "inspector",
"disableOptimisticBPs": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"outFiles": [ "${workspaceFolder}/src/**/*.js"],
"port": 9229
},
]
}
Another solution is to ensure your Node Environment is resolving correctly.
In my case, it would resolve to "development". Updating my package.json to the following resolved the issue:
"test": "NODE_ENV=test jest"
This will ensure that your babel config uses the test configuration.
Was your test suite working before and now it's throwing this error? This is what happened to me and before going off the deep-end there is a decent chance that something is cached that is causing this.
I resolved it using: npm test -- -u
If that fails you should delete your node_modules folder and do a fresh npm install and then try npm cache clean --force.
Another useful command if you want to run the tests without cache is npm test -- --no-cache -u.
I am trying to work with victory-native package for graph for react-native platform. I have installed both victory-native and react-native-svg with --save command. And then I also linked them with
react-native link but now when I do react-native start it throws the following error:
error: bundling failed: Error: While trying to resolve module `react-native-
svg` from file `/Users/keshav/projects/PropertyFinder/node_modules/victory-
native/lib/components/victory-primitives/line.js`, the package
`/Users/keshav/projects/PropertyFinder/node_modules/react-native-svg/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved
(`/Users/keshav/projects/PropertyFinder/node_modules/react-native-svg/index.js`. Indeed, none of these files exist:
* `/Users/keshav/projects/PropertyFinder/node_modules/react-native-svg/index.js(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`
* `/Users/keshav/projects/PropertyFinder/node_modules/react-native-svg/index.js/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`
at ResolutionRequest.resolveDependency
(/Users/keshav/projects/PropertyFinder/node_modules/metro/src/node-
haste/DependencyGraph/ResolutionRequest.js:104:15)
```
My package.json:
"react": "16.3.0-alpha.2",
"react-native": "0.54.2",
"react-native-svg": "^6.3.0",
"react-navigation": "^1.5.7",
"simple-swizzle": "^0.2.2",
"superagent": "^3.8.2",
"victory-native": "^0.17.2"
What is wrong here?
I met the same problem.But the different is i used the 'react-native-tab-navigator'.I've tried many times with different ways until i restarted Xcode and rebuilt the project.I hope this can help you.
Late to the party, but I had to modify my metro.config.js file as follows:
module.exports = {
...
resolver: {
sourceExts: ['js', 'jsx', 'ts', 'tsx']
}
}
I think this is to help metro resolve paths beyond js, jsx, etc.
angular-cli is bundling osenv node_modules since the service ts file is being referenced inside app.component.ts which makes sense. Is there a way I can exclude those node_modules which are file system electronjs specific? Below is the stacktrace
ERROR in ./node_modules/osenv/osenv.js
Module not found: Error: Can't resolve 'child_process' in
'C:\POC\Electron\fileexplorer\node_modules\osenv'
resolve 'child_process' in 'C:\POC\Electron\fileexplorer\node_modules\osenv'
Parsed request is a module
using description file:
C:\POC\Electron\fileexplorer\node_modules\osenv\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
I was able to find fix for this issue however I had to use webpack configuration instead of angular-cli below are the steps
1) run ng eject
2) edit webpack.config.js and add "child_process":
'empty' to
"node": {
"fs": "empty",
"global": true,
"crypto": "empty",
"tls": "empty",
"net": "empty",
"process": true,
"module": false,
"clearImmediate": false,
"setImmediate": false,
"child_process": 'empty'
},
3) npm run build
I'm new to react-native and am in the early stages of creating an app with Expo. I had a working app until installing redux. Currently I am getting the following error from the XDE:
Problem checking node_modules dependencies: Unexpected end of JSON input
and the following from the ios simulator:
Building JavaScript bundle: error
TransformError: ../app/main.js: Couldn't find preset "babel-preset-expo" relative to directory "../app/"
I believe my node modules contain valid JSON. It should be noted that I'm using a more current version of react-native than expo.
I experienced this issue when I tried moving to expo version 21.0.0.
You should try to delete your node modules and use yarn to install.
package.json
dependencies:{
"babel-preset-expo" : "^4.0.0",
"expo": "^21.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-21-0.2.tar.gz"
}
my .babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
Each time the project needs to be built the Circle CI fails. However, when it gets rebuilt as "Rebuild without Cache" it passes.
It gets really annoying to have to rerun it each time manually.
> escrow#0.0.1 bundle /home/ubuntu/escrow
> node node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --bundle-output iOS/main.jsbundle
/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:193
throw new ReferenceError(messages.get("pluginUnknown", plugin, loc, i, dirname));
^
ReferenceError: Unknown plugin "transform-es2015-arrow-functions" specified in "/home/ubuntu/escrow/.babelrc" at 2, attempted to resolve relative to "/home/ubuntu/escrow"
at /home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:193:17
at Array.map (native)
at Function.normalisePlugins (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:173:20)
at OptionManager.mergeOptions (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:271:36)
at OptionManager.addConfig (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)
at OptionManager.findConfigs (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:16)
at OptionManager.init (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)
at compile (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-register/lib/node.js:87:26)
at loader (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-register/lib/node.js:130:14)
at Object.require.extensions.(anonymous function) [as .js] (/home/ubuntu/escrow/node_modules/react-native/node_modules/babel-register/lib/node.js:140:7)
.babelrc:
{
"presets": [
"react-native",
],
"plugins": [
//Needed for redux.
"babel-plugin-transform-decorators-legacy",
"transform-class-properties", //this needs to be at top /shrug
// es2015 preset (except transform-es2015-typeof-symbol which caused problem)
"transform-es2015-arrow-functions",
"transform-es2015-block-scoped-functions",
"transform-es2015-block-scoping",
"transform-es2015-classes",
"transform-es2015-computed-properties",
"transform-es2015-constants",
"transform-es2015-destructuring",
"transform-es2015-for-of",
"transform-es2015-function-name",
"transform-es2015-literals",
"transform-es2015-object-super",
"transform-es2015-parameters",
"transform-es2015-shorthand-properties",
"transform-es2015-spread",
"transform-es2015-sticky-regex",
"transform-es2015-template-literals",
"transform-es2015-unicode-regex",
// stage-1 preset
"transform-async-to-generator",
"transform-exponentiation-operator",
"syntax-trailing-function-commas",
"transform-object-rest-spread",
"transform-class-constructor-call",
"transform-decorators",
"transform-export-extensions",
]
}