When I try to run my React Native app on the iOS simulator, I'm presented with a red screen with the following error:
Ambiguous resolution: module
'/Users/my-user/Documents/my-RN-app/app/index.js' tries to require
'react-native-vector-icons', but there are several files providing
this module. You can delete or fix them:
/Users/my-user/Documents/my-RN-app/ios/build/Build/Products/Debug-iphonesimulator/MyApp.app/my-RN-app/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
/Users/my-user/Documents/my-RN-app/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
However, both of those above files (the package.json files) are missing. I had actually gotten this error before, so I decided to delete the package.json file in the first directory location mentioned above (under ios/build/.. etc.) and refreshed the app and it loaded just fine. Now, after trying to start up my app again in the iOS simulator, I am back to the same error, but I cannot delete the package.json file because it doesn't even exist now in either location.
I've tried to just comment out the import of the react-native-vector-icons lib in my app/index.js file and restarting the sim, but the error still appears.
So finally, I've tried this:
sudo rm -rf node_modules (I get "permission denied" if I don't use sudo although it appears I have full read/write permission on all the files/folders in this project)
sudo rm -rf ios/build
npm install
cd ios && pod install
react-native link
And then back into Xcdoe: Product > Clean, after which I ran the simulator again. Still the same error.
As requested, here is my package.json file:
{
"name": "myApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"run-ios": "node_modules/.bin/react-native run-ios",
},
"dependencies": {
"art": "^0.10.1",
"auto-bind": "^1.1.0",
"axios": "^0.16.1",
"eslint-plugin-react-native": "^2.3.1",
"jwt-decode": "^2.2.0",
"moment": "^2.19.1",
"native-base": "^2.3.1",
"prop-types": "^15.5.8",
"pubnub": "^4.18.0",
"react": "^16.0.0",
"react-native": "^0.49.3",
"react-native-actionsheet": "^2.3.0",
"react-native-device-info": "^0.11.0",
"react-native-fabric": "^0.5.1",
"react-native-fingerprint-scanner": "^2.2.1",
"react-native-flip-card": "^3.5.2",
"react-native-google-analytics-bridge": "^5.3.3",
"react-native-haptic": "^1.0.5",
"react-native-image-base64": "^0.1.3",
"react-native-image-picker": "^0.26.7",
"react-native-image-resizer": "^1.0.0",
"react-native-keyboard-aware-scroll-view": "^0.4.3",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-keychain": "^1.2.1",
"react-native-maps": "^0.17.1",
"react-native-modal-dropdown": "^0.5.0",
"react-native-mplayer": "^1.0.1",
"react-native-notifications-badge-extensions": "^1.0.5",
"react-native-permissions": "^0.2.7",
"react-native-pie": "^0.4.0",
"react-native-router-flux": "^4.0.0-beta.26",
"react-native-snap-carousel": "^3.2.3",
"react-native-tag-input": "0.0.18",
"react-native-tooltip": "^5.2.0",
"react-native-uuid-generator": "^3.0.2",
"react-native-vector-icons": "^4.3.0",
"react-native-version-number": "^0.1.3",
"react-native-voice": "^0.2.5",
"react-navigation": "^1.2.0",
"sprintf-js": "^1.0.3",
"validator": "^9.2.0"
},
"devDependencies": {
"babel-jest": "18.0.0",
"babel-preset-react-native": "^4.0.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^3.14.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^7.5.1",
"jest": "18.1.0",
"jest-serializer-enzyme": "^1.0.0",
"jsdom": "11.6.2",
"jsdom-global": "3.0.2",
"metro-bundler": "^0.20.0",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.2.0",
"react-native-mock": "^0.3.1",
"react-test-renderer": "16.0.0-alpha.12",
"sinon": "^4.1.2"
},
"resolutions": {
"moment": "2.19.1"
}
}
I had to manually link the React pod to node_modules:
pod 'React', :path => '../node_modules/react-native'
Then clean and build again
Related
I am using an NX mono repository for my project. It contains the following three applications:
a web app (NextJS),
an API service (NestJS)
a mobile app (React Native)
I was trying to deploy the backend code to Heroku and I am facing the issue of it not finding the packages when I set the NODE_ENV variable to production. All of the NX packages are stored as the dev dependencies as default. It works fine if I set the NODE_ENV to development.
Question: What is the ideal way of solving the issue? I do not want to set NODE_ENV to development because otherwise, it will slow the deployments by installing useless packages from the devDependencies.
Any help will be appreciated.
This is what my package.json looks like.
"scripts": {
"api": "nx serve api",
"build:api": "nx build api",
"api:prod": "node dist/apps/api/main.js",
},
"dependencies": {
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#hookform/resolvers": "^2.9.7",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.4",
"#nestjs/common": "^9.0.0",
"#nestjs/config": "^2.2.0",
"#nestjs/core": "^9.0.0",
"#nestjs/jwt": "^9.0.0",
"#nestjs/mongoose": "^9.2.0",
"#nestjs/passport": "^9.0.0",
"#nestjs/platform-express": "^9.0.0",
"#react-native-community/clipboard": "^1.5.1",
"#react-navigation/bottom-tabs": "^6.3.3",
"#react-navigation/material-top-tabs": "^6.2.4",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#react-three/drei": "^9.34.3",
"#react-three/fiber": "^8.8.9",
"#tanstack/react-query": "^4.2.3",
"#trycourier/courier": "^3.15.0",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"axios": "^0.27.2",
"bcryptjs": "^2.4.3",
"class-transformer": "^0.5.1",
"class-validator": "^0.13.2",
"cookies": "^0.8.0",
"core-js": "^3.6.5",
"http-proxy": "^1.18.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"material-ui-phone-number": "^3.0.0",
"mongoose": "^6.5.2",
"mui-tel-input": "^2.0.1",
"native-base": "^3.4.13",
"next": "12.2.3",
"npm": "^8.19.2",
"passport": "^0.6.0",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"patch-package": "^6.4.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.34.2",
"react-is": "18.2.0",
"react-native": "0.69.3",
"react-native-gesture-handler": "^2.6.0",
"react-native-pager-view": "^6.0.1",
"react-native-phone-number-input": "^2.1.0",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.15.0",
"react-native-snackbar": "^2.4.0",
"react-native-tab-view": "^3.2.1",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "^11.23.1",
"react-otp-input": "^2.4.0",
"reflect-metadata": "^0.1.13",
"regenerator-runtime": "0.13.7",
"rxjs": "^7.0.0",
"styled-components": "5.3.5",
"three": "^0.145.0",
"tslib": "^2.3.0",
"twilio": "^3.81.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#commitlint/cli": "^17.0.3",
"#commitlint/config-conventional": "^17.0.3",
"#nestjs/schematics": "^9.0.0",
"#nestjs/testing": "^9.0.0",
"#nrwl/cli": "14.5.4",
"#nrwl/cypress": "14.5.4",
"#nrwl/detox": "14.5.6",
"#nrwl/eslint-plugin-nx": "14.5.4",
"#nrwl/jest": "14.5.4",
"#nrwl/linter": "14.5.4",
"#nrwl/nest": "14.5.4",
"#nrwl/next": "^14.5.4",
"#nrwl/node": "14.5.4",
"#nrwl/react": "14.5.4",
"#nrwl/react-native": "^14.5.6",
"#nrwl/web": "14.5.4",
"#nrwl/workspace": "14.5.4",
"#react-native-async-storage/async-storage": "1.17.7",
"#react-native-community/cli": "8.0.4",
"#react-native-community/cli-platform-android": "8.0.4",
"#react-native-community/cli-platform-ios": "8.0.4",
"#testing-library/dom": "^8.18.1",
"#testing-library/jest-dom": "5.16.4",
"#testing-library/jest-native": "4.0.5",
"#testing-library/react": "13.3.0",
"#testing-library/react-native": "11.0.0",
"#testing-library/user-event": "^14.4.3",
"#types/bcryptjs": "^2.4.2",
"#types/cookies": "^0.7.7",
"#types/jest": "27.4.1",
"#types/lodash": "^4.14.182",
"#types/node": "16.11.7",
"#types/passport-jwt": "^3.0.6",
"#types/passport-local": "^1.0.34",
"#types/react": "18.0.15",
"#types/react-dom": "18.0.6",
"#types/react-is": "17.0.3",
"#types/react-native": "0.69.3",
"#types/react-native-vector-icons": "^6.4.12",
"#types/styled-components": "5.1.25",
"#types/three": "^0.144.0",
"#typescript-eslint/eslint-plugin": "^5.29.0",
"#typescript-eslint/parser": "^5.29.0",
"babel-jest": "27.5.1",
"babel-plugin-styled-components": "1.10.7",
"cypress": "^10.2.0",
"detox": "19.7.1",
"eslint": "~8.15.0",
"eslint-config-next": "12.2.3",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-react": "7.30.1",
"eslint-plugin-react-hooks": "4.6.0",
"husky": "^8.0.0",
"jest": "27.5.1",
"jest-circus": "27.5.1",
"jest-react-native": "18.0.0",
"lint-staged": "^13.0.3",
"metro": "0.71.3",
"metro-babel-register": "0.71.3",
"metro-react-native-babel-preset": "0.71.3",
"metro-resolver": "0.71.3",
"msw": "^0.47.2",
"nx": "14.5.4",
"prettier": "^2.6.2",
"prettier-plugin-organize-imports": "^3.1.0",
"react-devtools": "^4.26.0",
"react-native-config": "1.4.6",
"react-native-svg": "12.4.3",
"react-native-svg-transformer": "1.0.0",
"react-test-renderer": "18.2.0",
"ts-jest": "27.1.4",
"ts-node": "~10.8.0",
"typescript": "~4.7.2"
},
And this is my Procfile:
web: yarn build:api && yarn api:prod
Nx is installed as a devDependency. Heroku scrubs devDependencies after thebuild step so that you don't have extra dependencies for your final environment. What you should do is have a build script in your package.json that builds everything your server will need to start, and then have a start script that starts the application, or set the web property in the Procfile as you currently have done for the build:api && api:prod. However, this start script should not rely on any devDependencies. It should be able to run with just the production dependencies.
My Nativescript-Vue project has stopped working without reason, i don't know why.
The gradle build is crashing with this error :
D8: Program type already present: android.support.v4.app.INotificationSideChannel$Stub$Proxy
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:transformClassesWithMultidexlistForDebug'.
> com.android.build.api.transform.TransformException: Error while generating the main dex list:
Error while merging dex archives:
Learn how to resolve the issue at https://developer.android.com/studio/build/dependencies#duplicate_classes.
Program type already present: android.support.v4.app.INotificationSideChannel$Stub$Proxy
I don't know anything about native android developpment with java so i'm struggling with this error since many hours ..
Here is my app.graddle
apply plugin: "com.android.application"
apply plugin: "com.google.gms.google-services"
dependencies {
configurations.all {
resolutionStrategy.eachDependency { DependencyResolveDetails details ->
def requested = details.requested
if (requested.group == 'com.android.support' && requested.name != 'multidex' ) {
details.useVersion '27.1.1'
}
}
}
}
dependencies {
implementation 'org.slf4j:slf4j-nop:1.7.25'
}
android {
defaultConfig {
multiDexEnabled true
generatedDensities = []
applicationId = "org.nativescript.application"
project.ext {
googlePlayServicesVersion = "+"
}
}
aaptOptions {
additionalParameters "--no-version-vectors"
}
}
and my package.json in case of this error is caused by one nativescript-plugin, which is what I think :
{
"name": "app",
"version": "1.21",
"license": "MIT",
"nativescript": {
"id": "org.nativescript.application",
"tns-ios": {
"version": "5.3.1"
},
"tns-android": {
"version": "5.3.1"
}
},
"scripts": {
"dev:android": "tns debug android --bundle",
"dev:ios": "tns debug ios --bundle",
"lint": "eslint --ext .js,.vue .",
"run:android": "tns run android --bundle",
"run:ios": "tns run ios --bundle",
"clean": "tns platform clean ios; tns platform clean android"
},
"dependencies": {
"axios": "^0.18.0",
"dotenv-webpack": "^1.7.0",
"nativescript": "^5.2.4",
"nativescript-applozic-chat": "^1.2.4",
"nativescript-appversion": "^1.4.1",
"nativescript-barcodescanner": "^3.0.3",
"nativescript-camera": "^4.2.0",
"nativescript-cardview": "^3.1.1",
"nativescript-checkbox": "^3.0.3",
"nativescript-floatingactionbutton": "^5.0.0",
"nativescript-geolocation": "^4.4.2",
"nativescript-google-maps-sdk": "^2.7.0",
"nativescript-google-places-autocomplete": "^1.0.3",
"nativescript-iqkeyboardmanager": "^1.4.0",
"nativescript-keyboard-toolbar": "^1.0.4",
"nativescript-laravel-echo": "^1.0.1",
"nativescript-lottie": "^3.0.2",
"nativescript-modal-datetimepicker": "^1.1.12",
"nativescript-oauth2": "^1.4.1",
"nativescript-pager": "^9.3.14",
"nativescript-phone": "^1.4.0",
"nativescript-plugin-firebase": "^8.1.1",
"nativescript-plugin-gplaces": "^2.4.6",
"nativescript-vue": "^2.0.0",
"nativescript-websockets": "^1.5.3",
"nativescript-windowed-modal": "^5.0.6",
"promise.prototype.finally": "^3.1.0",
"pusher-nativescript": "^1.0.0",
"tns-android": "^5.2.1",
"tns-core-modules": "^5.2.2",
"tns-ios": "^5.2.0",
"ts-loader": "^5.3.3",
"vue-i18n": "^8.9.0",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/preset-env": "^7.0.0",
"#vue/eslint-config-prettier": "^4.0.1",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.2",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"base-64": "^0.1.0",
"clean-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"date-fns": "^1.30.1",
"eslint": "^5.12.1",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-vue": "^5.1.0",
"lazy": "1.0.11",
"lodash": "^4.17.11",
"nativescript-dev-typescript": "^0.9.0",
"nativescript-dev-webpack": "^0.21.0-next-2019-02-15-084520-01",
"nativescript-image-cache-it": "^4.1.2",
"nativescript-vue-template-compiler": "^2.0.0",
"node-sass": "^4.9.2",
"prettier": "^1.16.1",
"sass-loader": "^7.1.0",
"terser-webpack-plugin": "^1.1.0",
"tns-platform-declarations": "^5.2.2",
"utf8": "^3.0.0",
"vue-loader": "^15.2.6",
"webpack": "^4.16.4",
"webpack-bundle-analyzer": "~3.0.4",
"webpack-cli": "^3.1.0"
}
}
I tried multiple things :
rm -rf hooks/ platforms/ node_modules/ package-lock.json and recompile the whole project
remove the whole .gradle directory in C:/Users/username/ and recompile
uninstall java, and nativescript cli ( tns ) that is globally install, reinstall and recompile
uninstall android-sdk installed with chocolatey in C:/Android, as asked in the nativescript doc, and recompile
tns platform clean android
reclone my project and try to recompile
I'm so desperate that I also created a docker image for nativescript-vue and android to be sure that the error is not related to my computer configuration/environnement, and the error is still here ...
I tried to compile a blank project created with :
vue init nativescript-vue/vue-cli-template
And it's working.
Also, my coworkers can compile the project so it's incomprehensible. My project is the same as theirs, i recloned the project to be sure and they have no not commited files...
I found that the error was caused by this package : "nativescript-google-maps-sdk". Maybe one of the only that i havn't uninstall to see if it was responsible of this error....
Anyway, you can found how i resolved this issue here :
https://github.com/dapriett/nativescript-google-maps-sdk/issues/345#issuecomment-503321201
I'm building this Vue app with Visual Studio and regardless of the build mode (debug/release) I still get this message below in the console.
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
Is there a way to know if I'm really in release mode or if Vue is just throwing me that message?
I know that usually it means the JS files have been minified, is that the case with a Vue app?
I'm not sure if this helps but here is my packages.json file
{
"name": "aspnetcore-vuejs",
"description": "ASP.NET Core & VueJS Starter project",
"author": "Mark Pieszak",
"scripts": {
"dev": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"install": "webpack --config webpack.config.vendor.js"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/vue-fontawesome": "^0.1.1",
"axios": "^0.15.3",
"bootstrap-vue": "^2.0.0-rc.11",
"core-js": "^2.4.1",
"dayjs": "^1.7.5",
"font-awesome": "^4.6.3",
"material-design-icons-iconfont": "^3.0.3",
"vue": "^2.1.8",
"vue-infinite-loading": "^2.3.3",
"vue-masked-input": "^0.5.2",
"vue-router": "^2.1.1",
"vue-select": "^2.5.0",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.1.8",
"vuetify": "^1.2.3",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"bootstrap": "^4.1.3",
"cross-env": "^3.1.3",
"css-loader": "^0.26.1",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"node-sass": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"regenerator-runtime": "^0.12.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.2",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}
}
As the Vue.js deployment guide you posted suggests, please check your webpack.config.js and be sure to use the right mode targetting production environment when you deploy the app.
In Webpack 4+, you can do:
module.exports = {
mode: 'production'
}
But in Webpack 3 and earlier, you'll need to use DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
When you are ready, you should simply need to run npm run build to start bundling your modules.
Related and useful readings:
Writing separate Webpack configurations for each environment.
Managing development and production builds with Webpack.
Introduction to NPM Scripts.
I have been trying to stop heroku from pruning my dev dependencies. Here is my config:
My build script is: "build": "NPM_CONFIG_PRODUCTION=false webpack -mode production"
And I have added "heroku-postbuild": "npm run build"
My Dependencies:
"dependencies": {
"express": "^4.16.3",
"react": "^16.5.2",
"react-dom": "^16.5.2"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.0",
"babel-loader": "^8.0.0",
"clean-webpack-plugin": "^0.1.19",
"concurrently": "^4.0.0",
"css-loader": "^1.0.0",
"eslint": "^5.0.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"nodemon": "^1.17.3",
"style-loader": "^0.23.0",
"url-loader": "^1.0.1",
"webpack": "^4.5.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.3"
}
I would appreciate any help with the config as I don't want to add my dev dependencies to my dependencies.
Set Heroku env var NPM_CONFIG_PRODUCTION to false with
heroku config:set NPM_CONFIG_PRODUCTION=false
instead of trying to set it in your npm script. See docs.
If you are trying to red the error during production caused by devDependencies, just do this in node.js or similar in the language you are using.
if (process.env.NODE_ENV !== "production") {
require(<devDependency>)
}
I am trying to deploy a MEAN app to Heroku, but cannot push due to the following error:
! No default language could be detected for this app.
HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
See https://devcenter.heroku.com/articles/buildpacks
! Push failed
I tried setting a node.js buildpack with their latest node buildpack release, but just received another error:
failed to detect buildpack
This is my first deployment to Heroku, so I'm brand new at this.
Here are my package.jsons:
Server
{
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"bcrypt": "^1.0.2",
"body-parser": "^1.16.1",
"cookie-parser": "^1.4.3",
"cors": "^2.8.2",
"debug": "^2.6.3",
"ejs": "~2.5.5",
"express": "^4.14.1",
"jsonwebtoken": "^7.3.0",
"mongoose": "^4.9.2",
"morgan": "^1.7.0",
"multer": "^1.3.0",
"passport": "^0.3.2",
"passport-jwt": "^2.2.1",
"request": "^2.81.0",
"request-promise": "^4.2.0",
"serve-favicon": "^2.3.2"
}
}
Client
{
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "^2.4.0",
"#angular/compiler": "^2.4.0",
"#angular/core": "^2.4.0",
"#angular/forms": "^2.4.0",
"#angular/http": "^2.4.0",
"#angular/platform-browser": "^2.4.0",
"#angular/platform-browser-dynamic": "^2.4.0",
"#angular/router": "^3.4.0",
"#types/googlemaps": "^3.26.8",
"#types/jquery": "^2.0.43",
"#types/lodash": "^4.14.62",
"#types/underscore": "^1.8.0",
"amcharts3-angular2": "github:amcharts/amcharts3-angular2",
"angular2-google-maps": "^0.17.0",
"core-js": "^2.4.1",
"dotenv": "^4.0.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"ng2-google-charts": "^2.1.0",
"rxjs": "^5.1.0",
"tslint": "^4.4.2",
"typescript": "^2.0.10",
"underscore": "^1.8.3",
"zone.js": "^0.7.6"
},
"devDependencies": {
"#angular/cli": "1.0.0-rc.0",
"#angular/compiler-cli": "^2.4.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
"typescript": "~2.0.0"
}
}
Why is Heroku not detecting Node?
According to the Heroku documentation
To determine how to start your app, Heroku first looks for a Procfile.
If no Procfile exists for a Node.js app, we will attempt to start a
default web process via the start script in your package.json.
So you shouldn't need to set the build pack.
I have two package.jsons, one for client and one for server. I needed to put my server dependencies into the root folder (they were each nested in client and server folders, respectively). Moving it into root made it detectable by heroku. Of course, now I have a new error. :)