React-native-web: build works but render fail

Created on 6 Mar 2018 · 7Comments · Source: necolas/react-native-web

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??

Source

roysG

Most helpful comment

@roysG would you share your solution, please!

iivn on 13 Apr 2018

👍4

All 7 comments

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

necolas on 6 Mar 2018

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

roysG on 6 Mar 2018

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

necolas on 6 Mar 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.