[Bug] Module parse failed: Unexpected token with @rn-primitives

[oney]

Describe the bug

I'm using @rn-primitives/slot from react-native-reusables with NativeWind in a Turborepo project managed by PNPM. However, I'm encountering the following error: Module parse failed: Unexpected token (15:57) at
ERROR in ../../node_modules/@rn-primitives/slot/dist/index.mjs 15:57

Steps to reproduce the behavior

In my .storybook/main.ts,@rn-primitives/slot is added to modulesToTranspile:

module.exports = {
  stories: [
    "../../../packages/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    // ...
    {
      name: "@storybook/addon-react-native-web",
      options: {
        modulesToTranspile: [
          "react-native-reanimated",
          "nativewind",
          "react-native-css-interop",
          "@rn-primitives/slot",
        ],
        babelPresetReactOptions: { jsxImportSource: "nativewind" },
      },
    },
  ],
  // ...
};

Expected behavior

The project should compile without any errors.

Screenshots and/or logs

> mystory@1.0.0 dev /Users/xx/apps/mystory
> storybook dev -p 6006 --no-open

@storybook/core v8.4.7

info => Starting manager..
WARN No story files found for the specified pattern: components/**/*.stories.mdx
info => Starting preview..
info Addon-docs: using MDX3
info => Using implicit CSS loaders
Using @react-native/babel-preset
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/2 entries 3/6 dependencies 0/2 modulesinfo Using tsconfig paths for react-docgen
<i> [webpack-dev-middleware] wait until bundle finished: /__webpack_hmr
ERROR in ../../node_modules/@rn-primitives/slot/dist/index.mjs 15:57
Module parse failed: Unexpected token (15:57)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https:/
/webpack.js.org/concepts#loaders
|       return null;
|     }
>     return React.cloneElement(isTextChildren(children) ? <></> : children, {
|       ...mergeProps(pressableSlotProps, children.props),
|       ref: forwardedRef ? composeRefs(forwardedRef, children.ref) : children.ref
 @ ../../packages/ui/src/components/ui/text.tsx 1:303-344 1:683-692
 @ ../../packages/ui/src/ lazy ^\.\/.*$ namespace object ./components/ui/text.tsx ./components/ui/text
 @ ./storybook-stories.js 1:1285-1331
 @ ./storybook-config-entry.js 1:174-207 1:1840-1972

preview compiled with 1 error
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
    at starter (/Users/xx/node_modules/@storybook/builder-webpack5/dist/index.js:1:23903)
    at starter.next (<anonymous>)
    at Module.start (/Users/xx/node_modules/@storybook/builder-webpack5/dist/index.js:1:25882)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

 ELIFECYCLE  Command failed with exit code 1.

Environment

• OS: Web
• Node.js version: v20.11.0
• PNPM version: 9.15.2

Additional context

It seems like the issue is related to .mjs files not being included in the test field of

addon-react-native-web/src/webpack.ts

Line 97 in da24257

test: /\.(js|jsx|ts|tsx)$/,

Applying the following patch resolved the issue:

diff --git a/dist/cjs/webpack.js b/dist/cjs/webpack.js
--- a/dist/cjs/webpack.js
+++ b/dist/cjs/webpack.js
@@ -66,7 +66,7 @@ const webpackFinal = async (config, options) => {
 
   // fix for uncompiled react-native dependencies
   config.module.rules.push({
-    test: /\.(js|jsx|ts|tsx)$/,
+    test: /\.(js|jsx|ts|tsx|mjs)$/,
     loader: 'babel-loader',
     // include logic copied from https://github.com/expo/expo-cli/blob/master/packages/webpack-config/src/loaders/createBabelLoader.ts
     include(filename) {
diff --git a/dist/esm/webpack.js b/dist/esm/webpack.js
--- a/dist/esm/webpack.js
+++ b/dist/esm/webpack.js
@@ -57,7 +57,7 @@ const webpackFinal = async (config, options) => {
 
   // fix for uncompiled react-native dependencies
   config.module.rules.push({
-    test: /\.(js|jsx|ts|tsx)$/,
+    test: /\.(js|jsx|ts|tsx|mjs)$/,
     loader: 'babel-loader',
     // include logic copied from https://github.com/expo/expo-cli/blob/master/packages/webpack-config/src/loaders/createBabelLoader.ts
     include(filename) {