Issue with [email protected] on [email protected] with New Architecture

[chandani-c-simform]

I’m facing an issue with react-native-mmkv (v3.2.0) on a project using:

React Native: 0.76.5
New Architecture: Enabled
react-native-web: 0.19.12
react-native-mmkv: 3.2.0

The library works as expected on native platforms (Android/iOS), but running the app on the web results in the following errors:

ERROR in ./node_modules/react-native-mmkv/lib/module/index.js 3:0-23
Module not found: Error: Can't resolve './MMKV' in '/Users/example/node_modules/react-native-mmkv/lib/module'
Did you mean 'MMKV.js'?
BREAKING CHANGE: The request './MMKV' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e.g., a module with JavaScript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/react-native-mmkv/lib/module/index.js 4:0-24
Module not found: Error: Can't resolve './hooks' in '/Users/example/node_modules/react-native-mmkv/lib/module'
Did you mean 'hooks.js'?
BREAKING CHANGE: The request './hooks' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e.g., a module with JavaScript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/react-native-mmkv/lib/module/index.js 5:0-31
Module not found: Error: Can't resolve './Types' in '/Users/example/node_modules/react-native-mmkv/lib/module'
Did you mean 'Types.js'?
BREAKING CHANGE: The request './Types' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e.g., a module with JavaScript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[maintenance-hans]

Guten Tag, Hans here! 🍻 Thank you for providing zese details about your issue with react-native-mmkv on react-native-web. It seems like you're facing module resolution errors due to missing file extensions in your imports.

To resolve ze errors, try changing your import statements in index.js to include ze file extensions, for example:

import './MMKV.js';
import './hooks.js';
import './Types.js';

Let me know if zis helps, or if you still encounter any issues. If you find zis library helpful, consider supporting ze project by becoming a sponsor!

Note: If you think I made a mistake, please ping @mrousavy to take a look.

[chandani-c-simform]

@mrousavy @amutsch Could you please help me with the same?

[mohit0129]

(NOBRIDGE) ERROR Error: Failed to create a new MMKV instance: The native MMKV Module could not be found.

• Make sure react-native-mmkv is correctly autolinked (run npx react-native config to verify)
• Make sure you enabled the new architecture (TurboModules) and CodeGen properly generated the react-native-mmkv specs. See https://github.com/reactwg/react-native-new-architecture/blob/main/docs/enable-apps.md
• Make sure you are using react-native 0.74.0 or higher, because react-native-mmkv is a C++ TurboModule.
• Make sure you rebuilt the app.
• Make sure gradle is synced. [Component Stack]

Does anyone have any fix for this?

[enavermate]

@chandani-c-simform resolved here #792

[chandani-c-simform]

@enavermate The solution mentioned by you applies to Expo CLI, However I'm facing an issue with React Native CLI.

[amutsch]

What are you using to bundle your web, I am using this in my web project without RN-Web so I am assuming the addition of RN web is irrelevant, it is likely an issue in the config of the bundler and how it is accessing files

[amutsch]

here is my extension resolution order on my web project
config.resolve.extensions = ['.web.ts', '.ts', '.web.tsx', '.tsx', '.mjs', '.web.js', '.js', '.web.jsx', '.jsx']

[chandani-c-simform]

@amutsch It seems slight misunderstanding in this, we are having react native cli project and to add support of web within it we will have to go with react-native-web. It is not reactJS project. For this we will have to go through related webpack config only. However I have tried with solution you have provided, but it doesn't make any difference. May be you can even try it out by adding rn-web in your existing react native project, you might be able to reproduce the issue.

[amutsch]

I had RN-web based project at one point, I ripped it out as I didn't want it but I share significant code. I made the changes that allow react-native-mmkv to work in web without RN-web so I have run 3.2 with and without RN-web in my project. The problem would be in typescript configuration and webpack configuration. based on the stack trace you are reaching into ESM module code from something that wants commonjs