question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React native package `main` field related error.

See original GitHub issue

Hei,

I’m trying to plug supertruct to a react-native app, but i’m getting this error

error: Error: While trying to resolve module `superstruct` from file `validation.js`, the package `node_modules/superstruct/package.json` was successfully found. 
However, this package itself specifies a `main` module field that could not be resolved (`node_modules/superstruct/index.cjs`. Indeed, none of these files exist:

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
leolangencommented, Mar 16, 2021

We have a different version of metro-config in our project, using RN version 0.61.2. The following worked for me

...
const defaultSourceExts = require('metro-config/src/defaults/defaults').sourceExts 

module.exports = {
  ...
  resolver: {
    sourceExts: [...defaultSourceExts, 'cjs'],
    ...
  }
}
2reactions
isnifercommented, Jan 1, 2021

But this config for metro bundler helped me:

// https://github.com/ioveracker/demo-react-native-emotion/blob/master/metro.config.js

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
    const {
        resolver: { sourceExts },
    } = await getDefaultConfig();
    return {
        resolver: {
            // Add cjs extension so stylis will load.
            sourceExts: [...sourceExts, 'cjs'],
        },
        transformer: {
            getTransformOptions: async () => ({
                transform: {
                    experimentalImportSupport: false,
                    inlineRequires: false,
                },
            }),
        },
    };
})();
Read more comments on GitHub >

github_iconTop Results From Across the Web

However, this package itself specifies a `main` module field ...
Check the package.json file of the package the error message tells you "main" is incorrect and see if it is correctly pointing to...
Read more >
Error Boundaries - React
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch() .
Read more >
package.json - npm Docs
The main field is a module ID that is the primary entry point to your program. That is, if your package is named...
Read more >
Troubleshooting - React Navigation
This and some similar errors might occur if you have a bare React Native project and the library react-native-gesture-handler library isn't linked. Linking...
Read more >
Addressing common errors in React Native - LogRocket Blog
This error occurs when you attempt to use the manual linking feature (i.e. react-native link and react-native link unlink commands), which have ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found