[Bug]: The React Native tutorial it not working with web

[jfdesgagne]

Describe the bug

I followed the tutorial for react-native. However, when running the web version, it crashes the webpack server

Starting Metro Bundler
Starting Webpack on port 19006 in development mode.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[1].oneOf[4].type should be one of these:
   "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
   -> Module type to use for the module
 - configuration.output has an unknown property 'uniqueName'. These properties are valid:
   object { auxiliaryComment?, chunkCallbackName?, chunkFilename?, chunkLoadTimeout?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, devtoolNamespace?, filename?, futureEmitAssets?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassemblyModuleFilename? }
   -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
 - configuration.target should be one of these:
   "web" | "webworker" | "node" | "async-node" | "node-webkit" | "electron-main" | "electron-renderer" | "electron-preload" | function
   -> Environment to build for
   Details:
    * configuration.target should be one of these:
      "web" | "webworker" | "node" | "async-node" | "node-webkit" | "electron-main" | "electron-renderer" | "electron-preload"
    * configuration.target should be an instance of function
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[1].oneOf[4].type should be one of these:
   "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
   -> Module type to use for the module
 - configuration.output has an unknown property 'uniqueName'. These properties are valid:
   object { auxiliaryComment?, chunkCallbackName?, chunkFilename?, chunkLoadTimeout?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, devtoolNamespace?, filename?, futureEmitAssets?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassemblyModuleFilename? }
   -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
 - configuration.target should be one of these:
   "web" | "webworker" | "node" | "async-node" | "node-webkit" | "electron-main" | "electron-renderer" | "electron-preload" | function
   -> Environment to build for
   Details:
    * configuration.target should be one of these:
      "web" | "webworker" | "node" | "async-node" | "node-webkit" | "electron-main" | "electron-renderer" | "electron-preload"
    * configuration.target should be an instance of function
    at webpack(<my_workspace>/node_modules/webpack/lib/webpack.js:31:9)

To Reproduce

npx degit chromaui/intro-storybook-react-native-template taskbox
cd taskbox
yarn install
yarn
w (to open web)

System

Environment Info:

  System:
    OS: macOS 13.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Firefox: 102.11.0
    Safari: 16.5
  npmPackages:
    @storybook/addon-actions: ^6.5.14 => 6.5.16 
    @storybook/addon-controls: ^6.5.14 => 6.5.16 
    @storybook/addon-ondevice-actions: ^6.5.1 => 6.5.1 
    @storybook/addon-ondevice-controls: ^6.5.1 => 6.5.1 
    @storybook/react-native: ^6.5.1 => 6.5.1

Additional context

No response

[dannyhw]

the tutorial is targeted at android/ios so isn't set up for web

[dannyhw]

the easiest way to get web working would be to enable metro web

[dannyhw]

closing due to no response, let me know if you want to reopen

[senghuotlay]

I am currently running on using metro web, it seems to be working fine on ios and android, but when on web doesn't seem to be showing the control

[dannyhw]

Thats just showing the expo app you need to pass the show storybook var so that it shows the storybook ui

[senghuotlay]

i'm very dumb actually, it's the config