GetStarted scenario: web-support: Attempted import error: 'react-native' does not contain a default export (imported as 'ReactNative'). #155

ghost · 2019-03-15T23:42:18Z

Hi

Scenario:

Go to https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/web-support
Follow the guide "To create new react app"
Add App.js an import to native-base import { Container } from "native-base";
yarn run start

Expected behavior

No error

Current behavior

Failed to compile
./node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
Attempted import error: 'react-native' does not contain a default export (imported as 'ReactNative').

Packages


{
  "name": "test1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "native-base": "^2.12.1",
    "react": "^16.8.4",
    "react-art": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-native-web": "^0.11.1",
    "react-scripts": "2.1.8"
  },
  "scripts": {

    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "customize-cra": "^0.2.12",
    "react-app-rewired": "^2.1.1"
  }
}

Could you please advice ?

The text was updated successfully, but these errors were encountered:

SupriyaKalghatgi · 2019-03-18T04:04:50Z

Share config-overrides.js

ghost · 2019-03-18T13:17:51Z

config-overrides.js

const path = require('path');
const {
  override,
  addWebpackAlias,
  babelInclude,
  addBabelPlugins
} = require('customize-cra');

module.exports = override(
  addWebpackAlias({
    "react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
    "react-native": "react-native-web"
  }),
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/native-base-shoutem-theme'),
    path.resolve('node_modules/react-navigation'),
    path.resolve('node_modules/react-native-easy-grid'),
    path.resolve('node_modules/react-native-drawer'),
    path.resolve('node_modules/react-native-safe-area-view'),
    path.resolve('node_modules/react-native-vector-icons'),
    path.resolve('node_modules/react-native-keyboard-aware-scroll-view'),
    path.resolve('node_modules/react-native-web'),
    path.resolve('node_modules/react-native-tab-view'),
    path.resolve('node_modules/static-container'),
  ]),
  addBabelPlugins(
    "@babel/plugin-proposal-class-properties"
  ),
);

SupriyaKalghatgi · 2019-03-19T11:08:04Z

I tried copying your package.json and config-overrides.js, couldn't reproduce
Can you create a repo for this and share here?

vadimb · 2019-03-25T13:58:41Z

Hi @SupriyaKalghatgi, we are experiencing the same issue. Please find attached a Sample.zip project as described by @ArThoX .

olescheller · 2019-03-25T14:02:01Z

Same problem exists for me. I'm getting the same error as OP's simply by following "Setup with Web" instructions on https://docs.nativebase.io/docs/GetStarted.html on a completely fresh project, then altering my App.js to render an example taken from https://docs.nativebase.io/Components.html#card-def-headref

import React, { Component } from 'react';
import { Container, Header, Content, Card, CardItem, Body, Text } from 'native-base';
export default class CardExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Card>
            <CardItem>
              <Body>
                <Text>
                   //Your text here
                </Text>
              </Body>
            </CardItem>
          </Card>
        </Content>
      </Container>
    );
  }
}

YobertyAlej · 2019-03-25T15:38:35Z

Same error here, simply by following the web-support official steps

ghost · 2019-03-30T18:13:53Z

@SupriyaKalghatgi, I do confirm this is the same config as the /GetStarted page:

const path = require('path');
const {
  override,
  addWebpackAlias,
  babelInclude,
  addBabelPlugins
} = require('customize-cra');

module.exports = override(
  addWebpackAlias({
    "react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
    "react-native": "react-native-web"
  }),
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/native-base-shoutem-theme'),
    path.resolve('node_modules/react-navigation'),
    path.resolve('node_modules/react-native-easy-grid'),
    path.resolve('node_modules/react-native-drawer'),
    path.resolve('node_modules/react-native-safe-area-view'),
    path.resolve('node_modules/react-native-vector-icons'),
    path.resolve('node_modules/react-native-keyboard-aware-scroll-view'),
    path.resolve('node_modules/react-native-web'),
    path.resolve('node_modules/react-native-tab-view'),
    path.resolve('node_modules/static-container'),
  ]),
  addBabelPlugins(
    "@babel/plugin-proposal-class-properties"
  ),
);

The "Setup with Web" basic scenario.

vadimb · 2019-04-01T13:52:19Z

Seems there is an issue how the Flow based libs are handled. As a hack we deleted the react-native-keyboard-aware-scroll-view from node_modules and edited the native-base/Content file to use react-native/KeyboardAvoidingView. This allows one to move ahead 'till we figure out the issue.

achatainga · 2019-04-01T16:32:33Z

The issue is not Native-Base's: When you follow NativeBase.io getting started guide, when doing the step yarn add react-native-web or npm i react-native-web you will install version 0.11.0 of that package... (at the time of this writing) react-native-web@>=0.11.0 and this version has breaking changes!!

FIX:
yarn add [email protected] or npm i [email protected] (0.10.1 also works) or edit your package.json with:
"dependencies": { ... "react-native-web": "0.10.0" },

notice react-native-web most be <0.11.0 which is 0.10.1 or 0.10.0

then yarn or npm install
According to Necolas:
[email protected]

[change] Remove default ES Module export

Remove the default export that was provided for compatibility with legacy
imports of React Native CommonJS modules. These patterns are no longer
supported:

import ReactNative from 'react-native';
const ReactNative = require('react-native');

Fix #1258
Close #1277

necolas/react-native-web@69bd0f6
https://github.com/necolas/react-native-web/releases/tag/0.11.0

vadimb · 2019-04-01T18:09:31Z

Good catch @achatainga! Appreciated!

vadimb · 2019-04-05T15:50:34Z

Installing and adding @babel/plugin-transform-modules-commonjs in config-overrides.js ...addBabelPlugins(..., "@babel/plugin-transform-modules-commonjs") seems to fix RNW compatibility.

Ringert · 2019-04-18T09:37:07Z

I got the error

Failed to compile
./node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
Attempted import error: 'react-native' does not contain a default export (imported as 'ReactNative').
This error occurred during the build time and cannot be dismissed.

As a workaround I removed the default import at KeyboardAwareHOC.js:5 and renamed
ReactNative.findNodeHandle to findNodeHandle at KeyboardAwareHOC.js:462

react-native-keyboard-aware-scroll-view - v0.8.0 - KeyboardAwareHOC.js:5

import {
  Keyboard,
  Platform,
  UIManager,
  TextInput,
  findNodeHandle,
  Animated
} from 'react-native'

react-native-keyboard-aware-scroll-view - v0.8.0 - KeyboardAwareHOC.js:462

const reactNode = findNodeHandle(nodeID)

Right now, it's working until it's fixed. It's necessary to apply the fix on each package update until the package itself fixes the problem.

rener172846 · 2019-06-18T15:52:42Z

'react-native-web' package has removed the default 'ReactNative' since v0.11.0
So the solution is to remove the latest 'react-native-web' package (now maybe v0.11.4) and install v0.10.0 like following:

npm uninstall --save react-native-web
npm install --save react-native-web@^0.10.0

This will fix that issue, however the best solution is to update 'react-native-keyboard-aware-scroll-view' package to work flexibly with the latest version of 'react-native-web'.
Hope this will be helpful to anybody who faced this issue

jamfromouterspace · 2019-12-17T07:59:11Z

Installing and adding @babel/plugin-transform-modules-commonjs in config-overrides.js ...addBabelPlugins(..., "@babel/plugin-transform-modules-commonjs") seems to fix RNW compatibility.

This worked for me. Thanks!

SupriyaKalghatgi added the awaiting response label Mar 18, 2019

ghost changed the title ~~web-support: Attempted import error: 'react-native' does not contain a default export (imported as 'ReactNative').~~ GetStarted scenario: web-support: Attempted import error: 'react-native' does not contain a default export (imported as 'ReactNative'). Mar 31, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GetStarted scenario: web-support: Attempted import error: 'react-native' does not contain a default export (imported as 'ReactNative'). #155

GetStarted scenario: web-support: Attempted import error: 'react-native' does not contain a default export (imported as 'ReactNative'). #155

ghost commented Mar 15, 2019 •

edited by ghost

Loading

SupriyaKalghatgi commented Mar 18, 2019

ghost commented Mar 18, 2019 •

edited by ghost

Loading

SupriyaKalghatgi commented Mar 19, 2019

vadimb commented Mar 25, 2019

olescheller commented Mar 25, 2019 •

edited

Loading

YobertyAlej commented Mar 25, 2019

ghost commented Mar 30, 2019 •

edited by ghost

Loading

vadimb commented Apr 1, 2019 •

edited

Loading

achatainga commented Apr 1, 2019 •

edited

Loading

vadimb commented Apr 1, 2019

vadimb commented Apr 5, 2019 •

edited

Loading

Ringert commented Apr 18, 2019 •

edited

Loading

rener172846 commented Jun 18, 2019

jamfromouterspace commented Dec 17, 2019

GetStarted scenario: web-support: Attempted import error: 'react-native' does not contain a default export (imported as 'ReactNative'). #155

GetStarted scenario: web-support: Attempted import error: 'react-native' does not contain a default export (imported as 'ReactNative'). #155

Comments

ghost commented Mar 15, 2019 • edited by ghost Loading

SupriyaKalghatgi commented Mar 18, 2019

ghost commented Mar 18, 2019 • edited by ghost Loading

SupriyaKalghatgi commented Mar 19, 2019

vadimb commented Mar 25, 2019

olescheller commented Mar 25, 2019 • edited Loading

YobertyAlej commented Mar 25, 2019

ghost commented Mar 30, 2019 • edited by ghost Loading

vadimb commented Apr 1, 2019 • edited Loading

achatainga commented Apr 1, 2019 • edited Loading

vadimb commented Apr 1, 2019

vadimb commented Apr 5, 2019 • edited Loading

Ringert commented Apr 18, 2019 • edited Loading

rener172846 commented Jun 18, 2019

jamfromouterspace commented Dec 17, 2019

ghost commented Mar 15, 2019 •

edited by ghost

Loading

ghost commented Mar 18, 2019 •

edited by ghost

Loading

olescheller commented Mar 25, 2019 •

edited

Loading

ghost commented Mar 30, 2019 •

edited by ghost

Loading

vadimb commented Apr 1, 2019 •

edited

Loading

achatainga commented Apr 1, 2019 •

edited

Loading

vadimb commented Apr 5, 2019 •

edited

Loading

Ringert commented Apr 18, 2019 •

edited

Loading