[6.0] 6.0.1-alpha.1 does not work with Expo #247
Comments
|
Personally I'd like to avoid anything lower than es6, there have been many issues caused by corejs polyfills (#20) and I think that es6 is already supported by the majority of devices at this point. Also I think this will only effect react-native on web and I don't really think its important to support internet explorer since it's on the way out. |
|
Does the ios/android app still work? From the log it looks like you're using the web version. |
Both
After finding an informative Stackoverflow thread on this (https://stackoverflow.com/questions/52697108/unable-to-resolve-module-crypto-in-reactnative), I tried adding the However, this didn't resolve the issue. The |
Thanks, wasn't aware that dropping the target would cause issues. Got the original error message when attempting to run |
|
React native crypto? Is this a bitcoin miner or what? 😂 I guess that crypto is being used as a random number generator for uuid? Weird that uuid is included as part of expo though. From that same stackoverflow link someone suggested crypto-js so maybe that would work? Looks like a polyfill for the nodejs crypto module. I think I'll install this locally as well and investigate a bit. |
My thoughts as well 😂
Yeah. If you install this locally, then the problematic file Adding |
|
I saw someone comment somewhere that after updating npm and node it got resolved. Maybe it doesn't apply here but could be worth trying. What version of node are you using? Could also try expo-crypto |
|
maybe using Check this out though, seems to be a common issue. __ Initially I was looking into this thinking that maybe it's an expo bug or something because there is no reference to crypto or uuid in the project. However I was a able to run storybook without any addons and things seemed to work and then once I added on-device-controls I started getting this bug again. I've been running into a wall with this for a while so I'll come back to it another day 😅 . |
|
@dannyhw, troubleshooted this a bit today. This seems to be the part that breaks echo "/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* @format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
resolverMainFields: ['sbmodern', 'main'],
},
};" > metro.config.js;If I omit that and only do this: npm install --global expo-cli
expo init appName
(select blank TypeScript template)
cd appName
yarn add @storybook/react-native@next \
@react-native-async-storage/async-storage \
@storybook/addon-ondevice-actions@next \
@storybook/addon-ondevice-controls@next \
@storybook/addon-ondevice-backgrounds@next \
@storybook/addon-ondevice-notes@next \
@storybook/addon-actions \
@react-native-community/datetimepicker \
@react-native-community/slider \
@storybook/addon-controls
mkdir .storybook;
mkdir components;
echo "module.exports = {
stories: [
'./components/**/*.stories.?(ts|tsx|js|jsx)'
],
addons: [
'@storybook/addon-ondevice-notes',
'@storybook/addon-ondevice-controls',
'@storybook/addon-ondevice-backgrounds',
'@storybook/addon-ondevice-actions',
],
};" > .storybook/main.js;
echo "import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds';
export const decorators = [withBackgrounds];
export const parameters = {
backgrounds: [
{name: 'plain', value: 'white', default: true},
{name: 'warm', value: 'hotpink'},
{name: 'cool', value: 'deepskyblue'},
],
};" > .storybook/preview.js;
echo "import AsyncStorage from '@react-native-async-storage/async-storage';
import { getStorybookUI } from '@storybook/react-native';
import './storybook.requires';
const StorybookUIRoot = getStorybookUI({
asyncStorage: AsyncStorage,
});
export default StorybookUIRoot;" > Storybook.tsx;
echo "import StorybookUIRoot from './Storybook';
export { StorybookUIRoot as default };" > App.tsx;
node -e 'const fs = require("fs");
const packageJSON = require("./package.json");
packageJSON.scripts = {
...packageJSON.scripts,
prestart: "sbn-get-stories",
"storybook-watcher": "sbn-watcher"
};
fs.writeFile("./package.json", JSON.stringify(packageJSON, null, 2), function writeJSON(err) {
if (err) return console.log(err);
console.log(JSON.stringify(packageJSON));
console.log("writing to " + "./package.json");
});';
mkdir components/Button;
echo "import React from 'react';
import {TouchableOpacity, Text, StyleSheet} from 'react-native';
interface MyButtonProps {
onPress: () => void;
text: string;
}
export const MyButton = ({onPress, text}: MyButtonProps) => {
return (
<TouchableOpacity style={styles.container} onPress={onPress}>
<Text style={styles.text}>{text}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
paddingHorizontal: 16,
paddingVertical: 8,
backgroundColor: 'violet',
},
text: {color: 'black'},
});
" > components/Button/Button.tsx;
echo "import React from 'react';
import {ComponentStory, ComponentMeta} from '@storybook/react-native';
import {MyButton} from './Button';
const MyButtonMeta: ComponentMeta<typeof MyButton> = {
title: 'MyButton',
component: MyButton,
argTypes: {
onPress: {action: 'pressed the button'},
},
args: {
text: 'Hello world',
},
};
export default MyButtonMeta;
type MyButtonStory = ComponentStory<typeof MyButton>;
export const Basic: MyButtonStory = args => <MyButton {...args} />;
" > components/Button/Button.stories.tsx;
yarn sbn-get-storiesthen both but I'm unsure how important that is. There's a visual issue on Android: the app paints outside the safe area (see screenshots below). This issue doesn't appear on iOS.
|
…ctions on how to set up with Expo. Also fixes linter warning in README.md.
|
We discussed the need for After some experimenting and reading Expo's customizing Metro docs , this looks like a promising Expo version of the const { getDefaultConfig } = require("expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.resolverMainFields = [
"sbmodern",
...defaultConfig.resolver.resolverMainFields,
];
defaultConfig.transformer.getTransformOptions = async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
});
module.exports = defaultConfig;So, the whole setup for Expo would be npm install --global expo-cli
expo init appName
(select blank TypeScript template)
cd appName
yarn add @storybook/react-native@next \
@react-native-async-storage/async-storage \
@storybook/addon-ondevice-actions@next \
@storybook/addon-ondevice-controls@next \
@storybook/addon-ondevice-backgrounds@next \
@storybook/addon-ondevice-notes@next \
@storybook/addon-actions \
@react-native-community/datetimepicker \
@react-native-community/slider \
@storybook/addon-controls
echo "const { getDefaultConfig } = require('expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.resolverMainFields = [
'sbmodern',
...defaultConfig.resolver.resolverMainFields,
];
defaultConfig.transformer.getTransformOptions = async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
});
module.exports = defaultConfig;
" > metro.config.js;
mkdir .storybook;
mkdir components;
echo "module.exports = {
stories: [
'./components/**/*.stories.?(ts|tsx|js|jsx)'
],
addons: [
'@storybook/addon-ondevice-notes',
'@storybook/addon-ondevice-controls',
'@storybook/addon-ondevice-backgrounds',
'@storybook/addon-ondevice-actions',
],
};" > .storybook/main.js;
echo "import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds';
export const decorators = [withBackgrounds];
export const parameters = {
backgrounds: [
{name: 'plain', value: 'white', default: true},
{name: 'warm', value: 'hotpink'},
{name: 'cool', value: 'deepskyblue'},
],
};" > .storybook/preview.js;
echo "import AsyncStorage from '@react-native-async-storage/async-storage';
import { getStorybookUI } from '@storybook/react-native';
import './storybook.requires';
const StorybookUIRoot = getStorybookUI({
asyncStorage: AsyncStorage,
});
export default StorybookUIRoot;" > Storybook.tsx;
echo "import StorybookUIRoot from './Storybook';
export { StorybookUIRoot as default };" > App.tsx;
node -e 'const fs = require("fs");
const packageJSON = require("./package.json");
packageJSON.scripts = {
...packageJSON.scripts,
prestart: "sbn-get-stories",
"storybook-watcher": "sbn-watcher"
};
fs.writeFile("./package.json", JSON.stringify(packageJSON, null, 2), function writeJSON(err) {
if (err) return console.log(err);
console.log(JSON.stringify(packageJSON));
console.log("writing to " + "./package.json");
});';
mkdir components/Button;
echo "import React from 'react';
import {TouchableOpacity, Text, StyleSheet} from 'react-native';
interface MyButtonProps {
onPress: () => void;
text: string;
}
export const MyButton = ({onPress, text}: MyButtonProps) => {
return (
<TouchableOpacity style={styles.container} onPress={onPress}>
<Text style={styles.text}>{text}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
paddingHorizontal: 16,
paddingVertical: 8,
backgroundColor: 'violet',
},
text: {color: 'black'},
});
" > components/Button/Button.tsx;
echo "import React from 'react';
import {ComponentStory, ComponentMeta} from '@storybook/react-native';
import {MyButton} from './Button';
const MyButtonMeta: ComponentMeta<typeof MyButton> = {
title: 'MyButton',
component: MyButton,
argTypes: {
onPress: {action: 'pressed the button'},
},
args: {
text: 'Hello world',
},
};
export default MyButtonMeta;
type MyButtonStory = ComponentStory<typeof MyButton>;
export const Basic: MyButtonStory = args => <MyButton {...args} />;
" > components/Button/Button.stories.tsx;
yarn sbn-get-storiesWith this Some issues still seem to persist, though. The Promise example https://github.com/storybookjs/react-native/blob/next-6.0/examples/native/components/PromiseTest/Button.stories.tsx wouldn't run as-is on Expo. Instead, it errored out due to the React hooks: After removing the hooks (replacing the text changes with Alert notifications) the example ran fine on Expo. |
|
This got auto closed by merging. @lauriharpf Do you think this should be marked as resolved or are there still more things to resolve? |
|
@dannyhw, good observation! We could still try to investigate and fix at least the hooks problem mentioned in #247 (comment) within the scope of this, as that seems like a pretty nasty one. |
|
I bumped into this following the v6 README as well. I am hoping to target |
|
should be fixed in 6.0.1-alpha.3 which was released today |
…ctions on how to set up with Expo (storybookjs#250) * docs: Fixes storybookjs#247 by editing the v6 alpha guide with instructions on how to set up with Expo. Also fixes linter warning in README.md. * docs: Updated the V6 Alpha readme with the Expo metro config as discussed in storybookjs#247 (comment)
|
In case anyone else ends up here while searching for a solution to |
|
@jesse-savary could you open an issue regarding that problem with more detail on the error you are getting? |
Describe the bug
Attempting to follow the 6.0 alpha test instructions with Expo causes an error:
To Reproduce
Do these steps (slightly modified from the script version of the 6.0 alpha test instructions).
This causes the error regarding
node_modules/@storybook/react-native/dist/preview/Preview.js.Expected behavior
No error should occur.
System:
Additional context
The problem looks related to the class properties in
node_modules/@storybook/react-native/dist/preview/Preview.js. The6.0.1-alpha.1version has class properties. The corresponding5.3.25code does not have them.This might be resolved by removing
"target": "ESNext",and"lib": ["ESNext"],from the 6.0tsconfig.json: https://github.com/storybookjs/react-native/blob/next-6.0/app/react-native/tsconfig.json#L9 . The 5.3.25 version of tsconfig.json does not have those, so Typescript defaults to output ES3 code. That's probably the best choice for the code we distribute in the NPM packages, as ES3 code should be runnable by pretty much anything without additional transpilation.The text was updated successfully, but these errors were encountered: