Skip to content
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

Closed
roysG opened this issue Mar 6, 2018 · 7 comments
Closed

build works but render fail #854

roysG opened this issue Mar 6, 2018 · 7 comments

Comments

@roysG
Copy link

roysG commented Mar 6, 2018

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'),

// configures where the build ends up
output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist')
},

// ...the rest of your config

module: {
    rules: [
        babelLoaderConfiguration,
        imageLoaderConfiguration
    ]
},`

plugins: [
    // `process.env.NODE_ENV === 'production'` must be `true` for production
    // builds to eliminate development checks and reduce build size. You may
    // wish to include additional optimizations.
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
        __DEV__: process.env.NODE_ENV === 'production' || true
    })
],

resolve: {
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: [ '.web.js', '.js'],
}

}

What could be the problem??

@necolas
Copy link
Owner

necolas commented Mar 6, 2018

I don't know because you haven't included the runtime error's stack trace

@necolas necolas closed this as completed Mar 6, 2018
@roysG
Copy link
Author

roysG commented Mar 6, 2018

But there is no any errors, what should i run it?

@necolas
Copy link
Owner

necolas commented Mar 6, 2018

I don't know. Can't tell what you're doing. Do you have an HTML file that loads the bundle?

@roysG
Copy link
Author

roysG commented Mar 6, 2018

When i run the command:
webpack-dev-server -d --config w/webpack.config.js --inline --hot --colors && NODE_ENV=development

I get output:

(node:10603) 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: 12027ms
Built at: 2018-3-6 23:15:34
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.

And then when i go to url: localhost:8080
i Get:

screen shot 2018-03-06 at 23 17 49
screen shot 2018-03-06 at 23 18 08

@necolas
Copy link
Owner

necolas commented Mar 6, 2018

You need an index.html file (at least) to load the app in a browser

@roysG
Copy link
Author

roysG commented Mar 6, 2018

Found the solution, thanks.

@iivn
Copy link

iivn commented Apr 13, 2018

@roysG would you share your solution, please!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants