I ran the upgrader by following these instructions. Then after trying to launch the project on android, by running "react-native run-android", the React Packager terminal window popped up and gave the following error. The app loaded on my android phone, but just said there was a 500 error on the server. Which I assume is coming from this error as the root cause.
What seems odd about this is that setupBabel.js is a file, and it is there in the correct folder, but this error says no such directory, not file. That's a bit odd...
React packager ready.
Loading dependency graph, done.
error: bundling: UnableToResolveError: Unable to resolve module `../setupBabel` from `/Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/packager/index.js`: Directory /Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/setupBabel doesn't exist
at ResolutionRequest._loadAsDir (/Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:572:13)
at tryResolveSync (/Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:411:18)
at tryResolveSync (/Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:89:12)
at ResolutionRequest._resolveFileOrDir (/Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:409:12)
at ResolutionRequest._resolveNodeDependency (/Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:417:19)
at ResolutionRequest.resolveDependency (/Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:135:29)
at dependencyNames.map.name (/Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:142:59)
at Array.map (native)
at ResolutionRequest.resolveModuleDependencies (/Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:142:42)
at Promise.resolve.then (/Users/amato/git_react-native-web-hello-world/react-native-web-hello-world/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:179:21)
Bundling `index.js` 0.0% (0/20), failed.
Here is my package.json
{
"name": "ReactNativeWebHelloWorld",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"ios-bundle": "react-native bundle --dev false --entry-file index.ios.js --platform ios --bundle-output ios/main.jsbundle",
"ios-dev-bundle": "react-native bundle --entry-file index.ios.js --platform ios --bundle-output ios/main.jsbundle",
"android-bundle": "react-native bundle --dev false --entry-file index.android.js --platform android --bundle-output android/app/src/main/assets/index.android.bundle",
"android-dev-bundle": "react-native bundle --entry-file index.android.js --platform android --bundle-output android/app/src/main/assets/index.android.bundle",
"web-bundle": "webpack --config web/webpack/web.prod.config.js --progress --colors",
"web-dev": "webpack-dev-server --content-base web/public/ --config web/webpack/web.dev.config.js --port 3001 --inline --hot --colors",
"clear-cache": "gulp clear-cache",
"react-start": "cd web; react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"dependencies": {
"babel": "^6.3.26",
"babel-polyfill": "^6.3.14",
"clone": "^1.0.2",
"material-ui": "^0.16.6",
"mobx": "^3.0.0",
"mobx-react": "^4.1.0",
"morgan": "^1.6.1",
"object-assign": "^4.0.1",
"react": "16.0.0-alpha.12",
"react-dom": "16.0.0-alpha.12",
"react-native": "0.45.0-rc.1",
"react-redux": "^3.1.2",
"react-tap-event-plugin": "^3.0.2",
"redux": "^3.1.1",
"redux-thunk": "^1.0.3",
"superagent": "^1.7.2"
},
"devDependencies": {
"autoprefixer": "^6.3.1",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"css-loader": "^0.23.1",
"enzyme": "^2.7.0",
"gulp": "^3.9.0",
"json-loader": "^0.5.4",
"less": "^2.5.3",
"less-loader": "^2.2.2",
"react-addons-test-utils": "^15.4.2",
"react-native-cli": "^0.1.10",
"react-scripts": "0.8.5",
"react-transform-catch-errors": "^1.0.1",
"react-transform-hmr": "^1.0.1",
"redbox-react": "^1.3.2",
"redux": "^3.6.0",
"redux-devtools": "^3.3.1",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"redux-logger": "^2.4.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.12",
"webpack-dev-middleware": "^1.5.1",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.6.4"
}
}
here is my webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'babel-polyfill',
path.join(__dirname, '../../app/web/index'),
],
output: {
path: path.join(__dirname, '../public'),
filename: 'bundle.js',
publicPath: '/',
},
module: {
loaders: [
// take all less files, compile them, and bundle them in with our js bundle
{
test: /\.less$/,
loader: 'style!css!autoprefixer?browsers=last 2 version!less'
},{
test: /\.json$/,
loader: "json",
},{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
plugins: [['react-transform', {
transforms: [{
transform: 'react-transform-hmr',
imports: ['react'],
// this is important for Webpack HMR:
locals: ['module']
}],
}]],
},
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
PLATFORM_ENV: JSON.stringify('web'),
},
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
],
};