Build error

[dotomaz]

I'm having trouble setting up react-native-web. I've followed the getting started guide. I think its a problem with a webpack/bable? Code is the default react native made with react-native init command.

Any help would be much appreciated.

output:

Project is running at http://localhost:8080/
webpack output is served from /
Hash: 0367f3e24bc585036893
Version: webpack 3.10.0
Time: 1355ms
Asset Size Chunks Chunk Names
bundle.web.js 3.34 MB 0 [emitted] [big] main
[12] (webpack)/hot/log.js 1.04 kB {0} [built]
[18] (webpack)/hot/emitter.js 77 bytes {0} [built]
[42] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.web.js 52 bytes {0} [built]
[43] (webpack)-dev-server/client?http://localhost:8080 7.91 kB {0} [built]
[44] ./node_modules/url/url.js 23.3 kB {0} [built]
[51] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[53] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[54] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
[56] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
[61] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built]
[63] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
[64] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
[65] ./index.web.js 499 bytes {0} [built]
[66] ./node_modules/react-native-web/dist/exports/AppRegistry/index.js 5.66 kB {0} [built]
[144] ./App.js 222 bytes {0} [built] [failed] [1 error]
+ 130 hidden modules
ERROR in ./App.js
Module parse failed: Unexpected token (22:42)
You may need an appropriate loader to handle this file type.
| });
|
| export default class App extends Component<{}> {
| render() {
| return (
@ ./index.web.js 1:134-150
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.web.js
webpack: Failed to compile.

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, 'src'),
path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: false,
// 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' ]
}
}`

package.json:
{ "name": "beleznicar", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "^16.2.0", "react-dom": "^16.2.0", "react-native": "0.52.2", "react-native-web": "^0.3.4" }, "devDependencies": { "babel-jest": "22.1.0", "babel-loader": "^7.1.2", "babel-plugin-react-native-web": "^0.3.3", "babel-preset-react-native": "4.0.0", "jest": "22.1.4", "react-test-renderer": "16.2.0", "url-loader": "^0.6.2", "webpack": "^3.10.0", "webpack-dev-server": "^2.11.1" }, "jest": { "preset": "react-native" } }

[necolas]

Move 'App.js' into 'src', or tell webpack/babel to build files from the root

[dotomaz]

Ahhh :( Tnx