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
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.
The title of the question says it all really.
I'm using Vue CLI and the project compiles fine the first time. But if I try to build it again it fails with this error:
Error: Child compilation failed:
Entry module not found: Error: Can't resolve 'C:\Users\Oliver\Workspace\academy-residences\public\index.html' in 'C:\Users\Oliver\Workspace\academy-residences':
Error: Can't resolve 'C:\Users\Oliver\Workspace\academy-residences\public\index.html' in 'C:\Users\Oliver\Workspace\academy-residences'
- compiler.js:79 childCompiler.runAsChild
[academy-residences]/[html-webpack-plugin]/lib/compiler.js:79:16
- Compiler.js:300 compile
[academy-residences]/[webpack]/lib/Compiler.js:300:11
- Compiler.js:556 hooks.afterCompile.callAsync.err
[academy-residences]/[webpack]/lib/Compiler.js:556:14
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[academy-residences]/[tapable]/lib/Hook.js:154:20
- Compiler.js:553 compilation.seal.err
[academy-residences]/[webpack]/lib/Compiler.js:553:30
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[academy-residences]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1323 hooks.optimizeAssets.callAsync.err
[academy-residences]/[webpack]/lib/Compilation.js:1323:35
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[academy-residences]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1314 hooks.optimizeChunkAssets.callAsync.err
[academy-residences]/[webpack]/lib/Compilation.js:1314:32
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[academy-residences]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1309 hooks.additionalAssets.callAsync.err
[academy-residences]/[webpack]/lib/Compilation.js:1309:36
[copy-webpack-plugin] unable to locate 'C:\Users\Oliver\Workspace\academy-residences\public' at 'C:\Users\Oliver\Workspace\academy-residences\public'
ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! academy-residences#0.1.0 watch: `vue-cli-service build --watch`
npm ERR! Exit status 1
npm ERR!
However, if I delete the .cache folder in node_modules then it builds correctly again!
My package.json looks like this:
{
"name": "academy-residences",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"watch": "vue-cli-service build --watch",
"test:unit": "vue-cli-service test:unit",
"heroku-postbuild": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.18.0",
"element-ui": "^2.4.5",
"moment": "^2.24.0",
"vue": "^2.5.21",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-unit-jest": "^3.3.0",
"#vue/cli-service": "^3.3.0",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"node-sass": "^4.9.2",
"sass-loader": "^7.0.3",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.5.21"
}
}
and here is my vue.config
module.exports = {
outputDir: './public',
publicPath: process.env.NODE_ENV === 'production' ? '' : '',
configureWebpack: {
resolve: {
alias: {
'#': __dirname + '/ui/src'
}
},
entry: {
app: './ui/src/main.js'
}
}
};
package.json sits in the root folder of the project with all the vue source code in ui
root/
ui/
src/
node_modules/
package.json
This is a recent problem. The other day everything was working fine. The only things that I think could have caused this is deleting #vue/cli and reinstalling it.
This is a recent problem. The other day everything was working fine.
The only things that I think could have caused this is deleting
#vue/cli and reinstalling it.
Well, you're right about this. Until mid-2018 I used to have a folder structure like
project
├── config
├── src // components, router, etc
├── static // images, robots.txt manifest, vendor css and whatnot
├── dist // not under version control, generated at deploy time
└── index.html // entry point
When building the project, the dist folder was wiped clean, then the chunks coming from src where compiled into it, then the static files under static copied over to dist (This one might happen before compiling the src files, whatever).
My config looked like:
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
]),
Where config.build.assetsSubDirectory was dist.
Fast forward to current #vue/cli (as of March 2019), the template now uses webpack#4 instead of webpack#3, and some defaults have changed. Specifically, they expect the structure to be:
project
├── config
├── src
├── public // <── WHAIT!!! NO LONGER CALLED "static"
| └── index.html // <── NO LONGER IN ROOT
└── dist
So in your config, declaring
module.exports = {
outputDir: './public',
...
}
Means you're wiping public at buildtime, then webpack cannot copy your public assets from its default asset source to the output folder, which became the same.
Now, if you inspect what is webpack actually doing (from your project root folder)
vuw inspect > output.js
or
$(npm bin)/vue-cli-service > output.js
You will see output.js has a block in the likes of:
/* config.plugin('copy') */
new CopyWebpackPlugin(
[
{
from: '/home/user/project/public',
to: '/home/user/project/dist',
toType: 'dir',
ignore: [
'.DS_Store'
]
}
]
),
If I changed my vue.config.js to have, as you have
outputDir: "./public",
The latter command would output a section saying:
/* config.plugin('copy') */
new CopyWebpackPlugin(
[
{
from: '/home/user/project/public',
to: '/home/user/project/public',
toType: 'dir',
ignore: [
'.DS_Store'
]
}
]
),
Which obviously make no sense whatsoever
TL/DR;
Don't use public as output folder, or find a way to change the static assets folder, for which I believe you have to manually configure CopyWebpackPlugin in your vue config file.
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 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.
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