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

[higgsboz-beam]

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

// 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

• OS: Mac 12.6.1
• Node.js version: 16.16.0
• NPM version: 8.11.0

[dannyhw]

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

[higgsboz-beam]

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

[dannyhw]

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

[higgsboz-beam]

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

No worries! Appreciate the help

[hardrese7]

any progress on this one?

[dannyhw]

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]

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.