search

storybookjs / addon-react-native-web

Build react-native-web projects in Storybook for React
MIT License
79 stars 21 forks source link

[Bug] Build-Storybook doesn't appear to handle platform specific js files #44

Open higgsboz-beam opened 1 year ago

higgsboz-beam commented 1 year ago

Describe the bug

When running build-storybook to generate the react-native-web project, the process tends to error out when attempting to handle a module that uses platform specific js files.

Steps to reproduce the behavior

  1. Create a directory structure like so: 
    root
|___js
    |____SomeNativeModule
             |____index.js
             |____SomeNativeModule.android.js
             |____SomeNativeModule.ios.js
  2. Create the content of the files 
    
// index.js
import SomeNativeModule from './SomeNativeModule'

const TypeNativeModule = SomeNativeModule

export default TypeNativeModule

```js
// SomeNativeModule.android.js

import { NativeModules } from 'react-native'

const { SomeNativeModuleAndroid } = NativeModules
export default SomeNativeModuleAndroid

// SomeNativeModule.ios.js

import { NativeModules } from 'react-native'

const { SomeNativeModuleIOS } = NativeModules
export default SomeNativeModuleIOS

Expected behavior

These files should be transpiled correctly.

Screenshots and/or logs

Here is an example output I get when running build-storybook

70% building 788/795 modules 7 active {NODE_MODULES_PATH}/node_modules/@babel/runtime/helpers/toConsumableArray.jsERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve './SomeNativeModuleIOS' in '{NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS'
ERR! ModuleNotFoundError: Module not found: Error: Can't resolve './SomeNativeModuleIOS' in '{NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS'
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/lib/Compilation.js:925:10
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/lib/NormalModuleFactory.js:401:22
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/lib/NormalModuleFactory.js:130:21
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/lib/NormalModuleFactory.js:224:22
ERR!     at {NODE_MODULES_PATH}/node_modules/neo-async/async.js:2830:7
ERR!     at {NODE_MODULES_PATH}/node_modules/neo-async/async.js:6877:13
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/lib/NormalModuleFactory.js:214:25
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:213:14
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/RootPlugin.js:37:38
ERR!     at _next44 (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
ERR!     at processTicksAndRejections (node:internal/process/task_queues:78:11)
ERR!  ModuleNotFoundError: Module not found: Error: Can't resolve './SomeNativeModuleIOS' in '{NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS'
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/lib/Compilation.js:925:10
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/lib/NormalModuleFactory.js:401:22
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/lib/NormalModuleFactory.js:130:21
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/lib/NormalModuleFactory.js:224:22
ERR!     at {NODE_MODULES_PATH}/node_modules/neo-async/async.js:2830:7
ERR!     at {NODE_MODULES_PATH}/node_modules/neo-async/async.js:6877:13
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/lib/NormalModuleFactory.js:214:25
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:213:14
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/RootPlugin.js:37:38
ERR!     at _next44 (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
ERR!     at eval (eval at create ({NODE_MODULES_PATH}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:27:15
ERR!     at {NODE_MODULES_PATH}/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
ERR!     at processTicksAndRejections (node:internal/process/task_queues:78:11)
ERR! resolve './SomeNativeModuleIOS' in '{NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS'
ERR!   using description file: {NODE_MODULES_PATH}/{JS_PATH}/package.json (relative path: ./SomeNativeModuleIOS)
ERR!     Field 'browser' doesn't contain a valid alias configuration
ERR!     using description file: {NODE_MODULES_PATH}/{JS_PATH}/package.json (relative path: ./SomeNativeModuleIOS/SomeNativeModuleIOS)
ERR!       no extension
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS doesn't exist
ERR!       .web.js
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.web.js doesn't exist
ERR!       .web.jsx
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.web.jsx doesn't exist
ERR!       .web.ts
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.web.ts doesn't exist
ERR!       .web.tsx
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.web.tsx doesn't exist
ERR!       .mjs
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.mjs doesn't exist
ERR!       .js
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.js doesn't exist
ERR!       .jsx
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.jsx doesn't exist
ERR!       .ts
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.ts doesn't exist
ERR!       .tsx
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.tsx doesn't exist
ERR!       .json
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.json doesn't exist
ERR!       .cjs
ERR!         Field 'browser' doesn't contain a valid alias configuration
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS.cjs doesn't exist
ERR!       as directory
ERR!         {NODE_MODULES_PATH}/{JS_PATH}/SomeNativeModuleIOS/SomeNativeModuleIOS doesn't exist
error Command failed with exit code 1.

Environment

dannyhw commented 1 year ago

Thanks for reporting this, I'll try and reproduce this tomorrow.

higgsboz-beam commented 1 year ago

Hey just wanted to check in and see if you were able to reproduce this.

dannyhw commented 1 year ago

hey, sorry I got really busy. I will try to take a look soon.

higgsboz-beam commented 1 year ago

hey, sorry I got really busy. I will try to take a look soon.

No worries! Appreciate the help

hardrese7 commented 1 year ago

any progress on this one?

dannyhw commented 1 year ago

Well this is just a case of adjusting the resolutions option in webpack. However if you use .web.js or .web.ts it should always resolve that module first.

Thats because the config is defined like this

  config.resolve.extensions = [
    '.web.js',
    '.web.jsx',
    '.web.ts',
    '.web.tsx',
    ...config.resolve.extensions,
  ];
dannyhw commented 1 year ago

also you can try putting ios/android last but that might not have the desired effect

  config.resolve.extensions = [
    '.web.js',
    '.web.jsx',
    '.web.ts',
    '.web.tsx',
    ...config.resolve.extensions,
    '.ios.js' // probably won't work
  ];

thats because .ios.js also matches .js so the only safe bet would be to use .web.js to make sure thats the file which gets resolved first.