Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
higgsboz-beam opened this issue Nov 21, 2022 · 7 comments
Open

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

higgsboz-beam opened this issue Nov 21, 2022 · 7 comments
Labels
bug Something isn't working

Comments

@higgsboz-beam
Copy link

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 higgsboz-beam added the bug Something isn't working label Nov 21, 2022
@dannyhw
Copy link
Member

dannyhw commented Nov 22, 2022

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

@higgsboz-beam
Copy link
Author

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

@dannyhw
Copy link
Member

dannyhw commented Dec 7, 2022

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

@higgsboz-beam
Copy link
Author

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

No worries! Appreciate the help

@hardrese7
Copy link

any progress on this one?

@dannyhw
Copy link
Member

dannyhw commented Aug 18, 2023 •
edited
Loading

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
Copy link
Member

dannyhw commented Aug 18, 2023 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@dannyhw @hardrese7 @higgsboz-beam