Проблема с добавлением React Native Web в существующее приложение, нет EXPO - PullRequest
Новая
       101

Проблема с добавлением React Native Web в существующее приложение, нет EXPO

0 голосов
/ 07 мая 2020

Я клонировал шаблон https://github.com/thecodingmachine/react-native-boilerplate и добавил:

react-dom react-native-web url-loader webpack webpack-cli webpack-dev-server babel-plugin- react-native-web

также создал web / webpack.config. js

const path = require("path");
const webpack = require("webpack");

const appDirectory = path.resolve(__dirname, "../");

const babelLoaderConfiguration = {
  test: /\.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, "index.js"),
    path.resolve(appDirectory, "src"),
    path.resolve(appDirectory, "node_modules/react-native-uncompiled"),
  ],
  use: {
    loader: "babel-loader",
    options: {
      cacheDirectory: true,
      // The 'react-native' preset is recommended to match React Native's packager
      presets: ["react-native"],
      // Re-write paths to import only the modules needed by the app
      plugins: ["react-native-web"],
    },
  },
};

// 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 = {
  entry: [
    path.resolve(appDirectory, "index.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],
  },

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      "react-native$": "react-native-web",
    },
    extensions: [".web.js", ".js"],
  },
};

и создал файл .babelr c

{
  "presets": ["@babel/preset-env"]
}

но я получить ошибку: 

ERROR in ./App/App.js 15:6
Module parse failed: Unexpected token (15:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|        * @see https://github.com/reduxjs/react-redux/blob/master/docs/api/Provider.md
|        */
>       <Provider store={store}>
|         {/**
|          * PersistGate delays the rendering of the app's UI until the persisted state has been retrieved
 @ ./index.js 6:0-27 9:45-48
 @ multi ./index.js

приложение. js

export default class App extends Component {
  render() {
    return (

      <Provider store={store}>        
        <PersistGate loading={null} persistor={persistor}>
          <RootScreen />
        </PersistGate>
      </Provider>
    )
  }
}

Может ли кто-нибудь мне помочь?

...