I am trying to start a new react-native project following the Getting Started example in the projects docs. Below is the install and error I get. NODE is 5.2, NPM is 3.3.12. Mac is El Capitain.
I get an error: Error: Couldn't find preset "es2015" relative to directory referencing ES2015 relative to directory.
I then follow the advice here and have both presets installed globally and locally in the project. You can see it in the npm ls -g command below that its installed globally. After installing it locally in the project, i get a peer deependency warning for react: UNMET PEER DEPENDENCY react#15.0.2
I then installed react#15.0.2. I then re-run react-native run-ios and I get the same error:
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
^
Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
at Array.map (native)
I then run npm install on the project and get the same error again.
Alains-MacBook-Pro:AwesomeProject klik$ npm -v
3.3.12
Alains-MacBook-Pro:AwesomeProject klik$ npm install
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
^
Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
at Array.map (native)
at OptionManager.resolvePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:405:20)
at OptionManager.mergePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:388:10)
at OptionManager.mergeOptions (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:14)
at OptionManager.addConfig (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10)
at OptionManager.findConfigs (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:454:16)
at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
at compile (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:112:69)
at loader (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:158:14)
I then add a .babelrc file with the following JSON. This has worked on other projects for me after reading it on Babeljs.io and I saw it suggested here again so I tried it. It didnt work but produced this different error referencing the promise directory. This looks like it waiting for a promise to return with the ios file in the project, which doesnt exist because React-Native never completed the install. All I have for files in the project after running npm install are node_modules directory and package.json and the .babelrc file I added:
Alains-MacBook-Pro:AwesomeProject klik$ npm install
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/promise/lib/done.js:10
throw err;
^
Error: ENOENT: no such file or directory, uv_chdir
at Error (native)
at process.chdir (/Users/klik/projects/AwesomeProject/node_modules/graceful-fs/polyfills.js:18:9)
at _runIOS (runIOS.js:51:11)
at runIOS.js:24:5
at tryCallTwo (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:45:5)
at doResolve (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:200:13)
at new Promise (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:66:3)
at Array.runIOS (runIOS.js:23:10)
at Object.run (/Users/klik/projects/AwesomeProject/node_modules/react-native/local-cli/cli.js:87:13)
at Object.<anonymous> (/Users/klik/.nvm/versions/node/v5.2.0/lib/node_modules/react-native-cli/index.js:88:7)
This is the original install with error:
Alains-MacBook-Pro:~ klik$ npm ls -g --depth=0
/Users/klik/.nvm/versions/node/v5.2.0/lib
├── babel-cli#6.8.0
├── babel-preset-es2015#6.6.0
├── babel-preset-react#6.5.0
├── cf-package#1.0.2
├── eslint#2.10.2
├── express#4.13.4
├── firebase-tools#3.0.0
├── gulp-cli#1.2.1
├── jshint#2.9.2
├── node-pre-gyp#0.6.28
├── nodemon#1.9.2
├── npm#3.3.12
├── react-native-cli#0.2.0
├── reindex-cli#0.4.1
├── rnpm#1.7.0
├── webpack#1.13.0
└── webpack-dev-server#1.14.1
Alains-MacBook-Pro:~ klik$ which node
**/Users/klik/.nvm/versions/node/v5.2.0/bin/node**
Alains-MacBook-Pro:~ klik$ which npm
**/Users/klik/.nvm/versions/node/v5.2.0/bin/npm**
Alains-MacBook-Pro:~ klik$ watchman -v
4.5.0
Alains-MacBook-Pro:~ klik$ cd projects
Alains-MacBook-Pro:projects klik$ react-native init AwesomeProject
This will walk you through creating a new React Native project in /Users/klik/projects/AwesomeProject
Installing react-native package from npm...
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
^
Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
at Array.map (native)
at OptionManager.resolvePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:405:20)
at OptionManager.mergePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:388:10)
at OptionManager.mergeOptions (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:14)
at OptionManager.addConfig (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10)
at OptionManager.findConfigs (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:454:16)
at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
at compile (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:112:69)
at loader (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:158:14)
Alains-MacBook-Pro:projects klik$
Any ideas come to mind? Thank you in advance for your help.
tl;dr.
npm i babel-preset-react-native --save-dev
$ echo '{"presets": ["react-native"]}' > .babelrc
So the problem as noted in the first error starts in the babel options manager:
at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
While trying to figure out how to get any react-native project running, I came across Este's DevStack for react-native. When I installed, it worked as advertised. I went to the code to see why this worked and not one single other worked. Este has a .babelrc file. This is it:
Este .babelrc
{
"presets": ["react-native"],
"env": {
"production": {
"plugins": [
"transform-react-constant-elements",
"transform-react-inline-elements"
]
}
}
}
I added the "env" setting to the .babelrc i created earlier. This is the current .babelrc file.
{
"retainLines": true,
"compact": true,
"comments": false,
"plugins": [],
"presets": ["react", "react-native"],
"env": {
"plugins": [
"transform-react-constant-elements",
"transform-react-inline-elements"
]
},
"sourceMaps": false,
}
I added this options configuration into each previous project including the one that is the subject of the question and everyone of them worked. This includes the Firebase, example. They all worked. Apparently, Babel 6 no longer does transforms by default and you have to enable it. I checked the React-Native Babel Preset on github and it handles transforms. So this is the new .babelrc file and it works.
{"presets": ["react-native"]}
Turns out #jaxoncreed has the right solution in his question here. The answer there suggests there is a default fallback .babelrc file that will be used if you put one in. In the copy of the the tutorial project downloaded a few days ago, that file doesn't exist. So the short answer is I need to add the .babelrc file in the project.
npm i babel-preset-react-native --save-dev
$ echo '{"presets": ["react-native"]}' > .babelrc
Related
Here are some related questions:
When using yarn workspaces, how to force a package to be installed in the relative node_modules?
NPM 7 Workspaces - Multiple node_modules?
Should I have to use no-hoist for all packages in a monorepo with react-native-web?
I'm using npm workspaces to organise multiple packages. The issue is that my main package don't have its dependency's(which is also one of the workspaces) source code in local node_modules. I know the dependency is installed in root node_modules, the thing is that I need to visit it by relative path from the main package.
Here is the project structure after running npm install in root dir:
root
├── package.json -> { "workspaces": ["packages/*"] }
├── node_modules
│ ├── dependency-A
│ ├── dependency-B
└── packages
├── main-package
├── dependency-A
└── dependency-B
package.json in root dir:
{
"workspaces": [
"packages/main-package",
"packages/dependency-A",
"packages/dependency-B"
]
}
package.json in "packages/main-package":
{
"dependencies": {
"dependency-A": "0.1.0",
"dependency-B": "0.1.0"
}
}
webpack.config.js in "packages/main-package":
{
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "node_modules/dependency-A/media",
to: "static/dependency-A-media",
},
],
}),
new CopyWebpackPlugin({
patterns: [
{
context: "node_modules/dependency-B/dist",
from: "research-data.json",
},
],
}),
]
}
When I run webapck in main-package, the error message is:
ERROR in unable to locate '/Users/trumangao/myApp/packages/main-package/node_modules/dependency-A/media' glob
ERROR in unable to locate '/Users/trumangao/myApp/packages/main-package/node_modules/dependency-B/dist/research-data.json' glob
I'm wondering what is the best practice to resolve such question? The option "nohoist" of Yarn inspired me but I can't find it in npm. I also tried to run install in package dir but it will break their symlink. How could I install dependencies of each package in their local node_modules while maintain their links like lerna#4?
Tried versions:
node.js#16.13.0
npm#8.1.0
&
node.js#18.14.0
npm#9.3.1
Hope I've made myself plain with my poor English LoL, thanks a lot.
Created helloworld project refer to https://vue-native.io/docs/installation.html#Setup-with-Vue-Native-Cli
But has the error following as and my first application doesn't start.
Unable to resolve "../../App" from "node_modules/expo/AppEntry.js"
My environment
$ node -v
v9.9.0
$ npm -v
6.4.1
$ npm list --depth=0
empty-project-template# /Users/kamo/repo/github.com/kamontia/vue-
native-app/helloworld
├── babel-preset-expo#5.0.0
├── expo#31.0.4
├── react#16.5.0
├── react-native#0.57.1
├── vue-native-core#0.0.8
├── vue-native-helper#0.0.9
└── vue-native-scripts#0.0.14
npm ERR! peer dep missing: react#16.0.0-alpha.6, required by react-
native-reanimated#1.0.0-alpha.10
npm ERR! peer dep missing: react-native#^0.44.1, required by react-
native-reanimated#1.0.0-alpha.10
On simulator,
Unable to resolve module ../../App from
xxx/node_modules/expo/AppEntery.js: The ./../App could not be found
from ...
Indeed, none of these files exist:
* ... App(.native||.ios.js|...
What should I do?
I also tried to create project with React Native refer to https://vue-native.io/docs/installation.html#Setup-with-React-Native, and success to start the application.
Had a same issue. Below works for me
In app.json add
"sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"]
Inside
"packagerOpts"
"packagerOpts":
{ "sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"],
"config": "metro.config.js" }
From: https://github.com/GeekyAnts/vue-native-core/issues/117
This works for me
I am trying to pack an npm package and install it on my webapp.
My application has the following structure:
app
app.ts
app.css
build
app.js
app.css
package.json
tsconfig.json
.npmignore
I started with the pack command documentation.
I added the .npmignore to include only the build folder.
As expected when running npm pack, I know have a new app-1.0.0.tgz
When I try to install it in the web app with npm install ..\typescriptapp\typescriptapp-1.0.0
I get the following error:
npm ERR! code ENOLOCAL
npm ERR! Could not install from
"..\typescriptapp-1.0.0" as it does not contain a
package.json file.
npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\corbin\AppData\Roaming\npm-cache_logs\2018-03-26T17_49_30_440Z-debug.log
However when I unzip the typescriptapp.tgz, I have the following structure
typecriptapp-1.0.0
typecriptapp-1.0.0
package
build
app.js
app.css
package.json
tsconfig.json
Here is my package.json file:
{
"name": "typescriptapp",
"version": "1.0.0",
"scripts": {
"build": "tsc",
"debug": "tsc -w"
},
"devDependencies": {
"#types/signalr": "2.2.35",
"uglify-js": "3.3.16",
"uglifycss": "0.0.28"
},
"dependencies": {
"#aspnet/signalr": "^1.0.0-preview1-update1",
"lib": "file:../references/lib"
}
}
What am I doing wrong?
You are trying to run install in the parent folder
npm install ..\typescriptapp\typescriptapp-1.0.0
Whereas you have to install it in
npm install ..\typescriptapp\typescriptapp-1.0.0\typescriptapp-1.0.0\package
I have created a project following these steps:
npm install -g gatsby
gatsby new dev-blog
cd dev-blog
npm install
Then I try to start by project by
gatsby develop --host localhost --port 9000
At this point it throws an exception:
Failed to require /Users/antkong/wd/blogs/gatsby/dev-blog/html.js
./html.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/antkong/wd"
How can I fix this problem?
Edit
OS: OSX 10.12.4
Darwin mymac.local 16.5.0 Darwin Kernel Version 16.5.0: Fri Mar 3 16:52:33 PST 2017; root:xnu-3789.51.2~3/RELEASE_X86_64 x86_64
npm: 3.10.10
node: 6.10.2
Full stacktrace:
❯❯ npm run develop
> gatsby-starter-default#1.0.0 develop /Users/antkong/wd/blogs/gatsby/dev-blog
> gatsby develop
Failed to require /Users/antkong/wd/blogs/gatsby/dev-blog/html.js
./html.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/antkong/wd"
at /Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-loader/lib/index.js:46:20)
at /Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-loader/lib/fs-cache.js:79:18
at ReadFileContext.callback (/Users/antkong/wd/blogs/gatsby/dev-blog/node_modules/babel-loader/lib/fs-cache.js:15:14)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:366:13)
# (webpack)-require/lib/webpackRequireEntrypoint.js 1:20-41
I am also using nvm
❯❯ nvm list
-> v6.10.2
system
default -> v6 (-> v6.10.2)
node -> stable (-> v6.10.2) (default)
stable -> 6.10 (-> v6.10.2) (default)
iojs -> N/A (default)
lts/* -> lts/boron (-> v6.10.2)
lts/argon -> v4.8.2 (-> N/A)
lts/boron -> v6.10.2
gabsty new does not create a .babelrc that is needed by babel. The error is caused by the missing .babelrc.
Here is the content of my .babelrc:
{
"presets": ["react", "es2015", "stage-0"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
I have installed a few modules doing npm install --save ng2-redux redux redux-actions redux-promise. If I do npm list | grep "redux" I get:
├── ng2-redux#3.0.5
├─┬ redux#3.5.2
├─┬ redux-actions#0.12.0
├─┬ redux-promise#0.5.3
And in my package.json I can find them as well:
"dependencies": {
...
"ng2-redux": "3.0.5",
"redux": "3.5.2",
"redux-actions": "0.12.0",
"redux-promise": "0.5.3",
...
}
The problem is that while ng2-redux and redux both work fine:
import { applyMiddleware } from 'redux';
import { NgRedux, select } from 'ng2-redux';
redux-actions and redux-promise both throw a Cannot resolve file 'redux-actions'/'redux-promise' when trying to import them, that appears both in the IDE (WebStorm 11.0.4) and in Webpack:
import { createAction } from 'redux-actions';
import promiseMiddleware from 'redux-promise';
The errors says:
ERROR in ../src/.../app.component.ts
(8,31): error TS2307: Cannot find module 'redux-promise'.
However...
import 'redux-actions';
import 'redux-promise';
...works just fine.
I have already tried to remove the node_modules folder and reinstall everything with npm cache clear, rm -rf node_modules and npm install and it doesn't fix the problem.
You should also have d.ts file under node_modules directory. Try
npm install --save-dev #types/redux-promise
to acquire the type information of the module.