I just created react native project and I want to add react native web to it. I follow document provided for it but I get this error:
ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /home/hamidreza/Desktop/test/index.web.js: Cannot read property 'filename' of undefined
at PluginPass.JSXOpeningElement (/home/hamidreza/Desktop/test/node_modules/babel-plugin-transform-react-jsx-source/lib/index.js:32:39)
at newFn (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/visitors.js:179:21)
at NodePath._call (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:55:20)
at NodePath.call (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:42:17)
at NodePath.visit (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:90:31)
at TraversalContext.visitQueue (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/context.js:112:16)
at TraversalContext.visitSingle (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/context.js:84:19)
at TraversalContext.visit (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/context.js:140:19)
at Function.traverse.node (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/index.js:84:17)
at NodePath.visit (/home/hamidreza/Desktop/test/node_modules/@babel/traverse/lib/path/context.js:97:18)
@ multi ./index.web.js main[0]
this is my index.web.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
index.js:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
web/webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const appDirectory = path.resolve(__dirname, '../');
const babelLoaderConfiguration = {
test: /\.js$/,
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: true,
presets: ['react-native'],
plugins: ['react-native-web']
}
}
};
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]'
}
}
};
module.exports = {
entry: [
// path.resolve(appDirectory, 'polyfills-web.js'),
path.resolve(appDirectory, 'index.web.js')
],
output: {
filename: 'bundle.web.js',
path: path.resolve(appDirectory, 'dist')
},
module: {
rules: [
babelLoaderConfiguration,
imageLoaderConfiguration
]
},
resolve: {
alias: {
'react-native$': 'react-native-web'
},
extensions: [ '.web.js', '.js' ]
}
}
package.json:
{
"name": "test",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.11.0",
"react-native": "0.62.2",
"react-dom": "^16.13.1",
"react-native-web": "^0.12.3"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/runtime": "^7.10.2",
"@react-native-community/eslint-config": "^1.1.0",
"babel-jest": "^26.0.1",
"babel-loader": "^8.1.0",
"babel-plugin-react-native-web": "^0.12.3",
"babel-preset-react-native": "^4.0.1",
"eslint": "^7.2.0",
"jest": "^26.0.1",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"jest": {
"preset": "react-native"
}
}
I don't have any idea where is my problem. Everything is just like document.
