-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
build works but render fail #854
Comments
I don't know because you haven't included the runtime error's stack trace |
But there is no any errors, what should i run it? |
I don't know. Can't tell what you're doing. Do you have an HTML file that loads the bundle? |
When i run the command: I get output: (node:10603) DeprecationWarning: Tapable.plugin is deprecated. Use new API on And then when i go to url: localhost:8080 |
You need an index.html file (at least) to load the app in a browser |
Found the solution, thanks. |
@roysG would you share your solution, please! |
when i run the command:
webpack-dev-server -d --config web/webpack.config.js --inline --hot --colors
and go to localhost:8080
i get this content:
`import App from './web/src/comp/App.js';
import React from 'react';
import { AppRegistry } from 'react-native';
// register the app
AppRegistry.registerComponent('playsbid', () => App);
AppRegistry.runApplication('playsbid', {
initialProps: {},
rootTag: document.getElementById('react-app')
});
`
The build works successfully:
webpack-dev-server -d --config web/webpack.config.js --inline hot --colors
(node:9196) DeprecationWarning: Tapable.plugin is deprecated. Use new API on
.hooks
insteadℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wdm」: Hash: f3214038c7f2a5468347
Version: webpack 4.1.0
Time: 12082ms
Built at: 2018-3-6 20:24:37
Asset Size Chunks Chunk Names
bundle.web.js 3.33 MiB main [emitted] [big] main
Entrypoint main [big] = bundle.web.js
[./index.web.js] 558 bytes {main} [built]
[./node_modules/react-native-web/dist/exports/AppRegistry/index.js] 5.35 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.66 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.31 KiB {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.web.js 52 bytes {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.03 KiB {main} [built]
[./web/src/comp/App.js] 3.29 KiB {main} [built]
+ 143 hidden modules
ℹ 「wdm」: Compiled successfully.
cat package.json:
`
"name": "playsbid",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"babel-plugin-react-native-web": "^0.5.1",
"react": "^16.3.0-alpha.1",
"react-dom": "^16.2.0",
"react-native": "0.54.0",
"react-native-web": "^0.5.1",
"url-loader": "^1.0.1",
"webpack": "^4.1.0",
"webpack-dev-server": "^3.1.0"
},
"devDependencies": {
"babel-jest": "22.4.1",
"babel-loader": "^7.1.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.2",
"react-test-renderer": "16.3.0-alpha.1",
"webpack-cli": "^2.0.10"
},
"jest": {
"preset": "react-native"
}
}
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const appDirectory = path.resolve(__dirname, '../');
// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
//
node_module
.const babelLoaderConfiguration = {
test: /.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, 'index.web.js'),
path.resolve(appDirectory, 'web/src'),
path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
// Babel configuration (or use .babelrc)
// This aliases 'react-native' to 'react-native-web' and includes only
// the modules needed by the app.
plugins: ['react-native-web'],
// The 'react-native' preset is recommended to match React Native's packager
presets: ['react-native']
}
}
};
// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
test: /.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]'
}
}
};
module.exports = {
// your web-specific entry file
entry: path.resolve(appDirectory, 'index.web.js'),
}
What could be the problem??
The text was updated successfully, but these errors were encountered: