addon-react-native-web icon indicating copy to clipboard operation
addon-react-native-web copied to clipboard
verified publisher icon storybookjs

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

Open higgsboz-beam opened this issue 3 years ago • 7 comments

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
  1. 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

higgsboz-beam avatar Nov 21 '22 20:11 higgsboz-beam

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

dannyhw avatar Nov 22 '22 01:11 dannyhw

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

higgsboz-beam avatar Dec 07 '22 18:12 higgsboz-beam

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

dannyhw avatar Dec 07 '22 18:12 dannyhw

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

No worries! Appreciate the help

higgsboz-beam avatar Dec 08 '22 18:12 higgsboz-beam

any progress on this one?

hardrese7 avatar Aug 18 '23 06:08 hardrese7

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 avatar Aug 18 '23 10:08 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.

dannyhw avatar Aug 18 '23 11:08 dannyhw