NativeBase-KitchenSink
NativeBase-KitchenSink copied to clipboard
GeekyAnts
GetStarted scenario: web-support: Attempted import error: 'react-native' does not contain a default export (imported as 'ReactNative').
Hi
Scenario:
- Go to https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/web-support
- Follow the guide "To create new react app"
- Add
App.jsan import to native-baseimport { 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 ?
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"
),
);
I tried copying your package.json and config-overrides.js, couldn't reproduce Can you create a repo for this and share here?
Hi @SupriyaKalghatgi, we are experiencing the same issue. Please find attached a Sample.zip project as described by @ArThoX .
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>
);
}
}
@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.
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.
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
https://github.com/necolas/react-native-web/commit/69bd0f631dc0a1640e1f4449611e03d0339e8e81 https://github.com/necolas/react-native-web/releases/tag/0.11.0
Installing and adding @babel/plugin-transform-modules-commonjs in config-overrides.js ...addBabelPlugins(..., "@babel/plugin-transform-modules-commonjs") seems to fix RNW compatibility.
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.
'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
Installing and adding
@babel/plugin-transform-modules-commonjsin config-overrides.js...addBabelPlugins(..., "@babel/plugin-transform-modules-commonjs")seems to fix RNW compatibility.
This worked for me. Thanks!
