0

I am trying to make an app with two sections. One section is the react cod. The second section is using webpack to bundle that into an html file that I can then load using react-native-web-view.

webpack.config.js:

const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ],
    },
    output: {
        path: path.resolve(__dirname, './src/dist')
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

App.js:

import React from 'react'
import { WebView } from 'react-native-webview'
import Html from './src/dist/index.html'

export default function App() {
    return (
        <View style={{flex: 1}}>
            <WebView
                source={Html}
                style={{flex: 1}}                               
            />
        </View>
    )
}

babel.config.js

module.exports = function(api) {
    api.cache(true)
    return {
        presets: ['expo', '@babel/preset-env', '@babel/preset-react'],
        plugins: ["@babel/plugin-proposal-class-properties"]
    }
}

With this code I get the error

Can't find variable require

On all the posts I've looked at seem to reference issues with plugins for babel that I don't have. The only other reason I can think of it is the require in the webpack.

any help appreciated

Gianfranco P.
  • 10,049
  • 6
  • 51
  • 68
KieranLewin
  • 1,780
  • 2
  • 7
  • 13
  • that's the wrong language entirely?? – KieranLewin Mar 13 '20 at 09:43
  • I have reviewed the problem. It was a different language question, so I deleted it. – Mustafa Mar 13 '20 at 11:33
  • did you fix this issue? What exact command did you run to get that error? – Gianfranco P. Mar 28 '20 at 22:53
  • I ended up separating the webpage and the app by pushing the webpage to another branch and hosting it on github pages as I couldn't get around this issue, the react-native-webview lib has a lot of issues assigned to it so it probs won't get fixed any time soon – KieranLewin Apr 02 '20 at 10:05

0 Answers0