Error: unknown named module './constants'

[junaidrazaq]

Hi, I am having an issue using this API. Unfortunately whenever I import the API => const api = require('@what3words/api/');

I receive this error: Error: Unknown named module "./constraints"

Any ideas on why i am receiving this error? Thanks

[c5haw]

Hi @junaidrazaq

Could you provide a sample app to recreate the issue you are having please? I haven't been able to recreate this with a simple JS project, i.e.:

## package.json
{
  "name": "test-w3w",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@what3words/api": "^3.3.6"
  }
}

## index.js
const api = require('@what3words/api');

api.autosuggest('w.s.w')
  .then(console.log)
  .catch(console.error);

% node index.js
{
  error: {
    code: 'MissingKey',
    message: 'Authentication failed; missing required API key parameter or header'
  }
}

Any other information to help us reproduce and debug would be very helpful. Thanks

[junaidrazaq]

I am having an issue where I am trying to import the API, in to my react native app. The problem is that every time I try to import the module, I receive the error 'Unknown named module'

I have managed to pinpoint the issue. When i go in to the node_modules folder, and go to the what3words/api/umd/index.js file and comment out all the 'requires', the error goes away, but then I am unable to use the api.

[junaidrazaq]

Here is my package.json

{
  "name": "myappname",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
 "dependencies": {
    "@mauron85/react-native-background-geolocation": "^0.6.3",
    "@react-native-clipboard/clipboard": "~1.7.0",
    "@react-native-community/async-storage": "~1.11.0",
    "@react-native-community/datetimepicker": "~3.4.3",
    "@react-native-community/masked-view": "~0.1.10",
    "@react-native-community/netinfo": "~5.9.4",
    "@react-native-community/slider": "~2.0.9",
    "@react-native-firebase/app": "~8.2.0",
    "@react-native-firebase/messaging": "~7.4.2",
    "@react-navigation/bottom-tabs": "~5.2.7",
    "@react-navigation/native": "~5.1.6",
    "@react-navigation/stack": "~5.2.13",
    "@what3words/api": "^3.3.3",
    "add": "~2.0.6",
    "axios": "^0.19.2",
    "moment": "~2.24.0",
    "pusher-js": "~6.0.3",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-action-button": "~2.8.5",
    "react-native-actions-sheet": "~0.2.6",
    "react-native-auth0": "~2.9.0",
    "react-native-base64": "~0.0.2",
    "react-native-check-box": "~2.1.7",
    "react-native-collapsible": "~1.5.2",
    "react-native-device-info": "~5.6.2",
    "react-native-fs": "~2.16.6",
    "react-native-geocoder": "~0.5.0",
    "react-native-geolocation-service": "~5.0.0",
    "react-native-gesture-handler": "~1.6.1",
    "react-native-gifted-chat": "~0.12.0",
    "react-native-google-places-autocomplete": "^2.2.0",
    "react-native-image-picker": "~2.3.1",
    "react-native-loading-spinner-overlay": "~1.1.0",
    "react-native-maps": "0.27.1",
    "react-native-modal": "~11.5.6",
    "react-native-modal-datetime-picker": "~9.2.0",
    "react-native-permissions": "~2.1.5",
    "react-native-picker-select": "~7.0.0",
    "react-native-popup-menu": "~0.15.7",
    "react-native-reanimated": "~1.8.0",
    "react-native-safe-area-context": "~0.7.3",
    "react-native-screens": "~2.5.0",
    "react-native-slider": "~0.11.0",
    "react-native-snap-carousel": "~3.9.0",
    "react-native-star-rating": "~1.1.0",
    "react-native-tab-view": "~2.14.0",
    "react-native-vector-icons": "~6.6.0",
    "react-redux": "~7.2.0",
    "redux": "~4.0.5",
    "redux-thunk": "~2.3.0",
    "reselect": "~4.0.0",
    "tipsi-stripe": "8.0.0-beta.10",
    "yarn": "~1.22.4"
  },
  "devDependencies": {
    "@babel/core": "~7.6.2",
    "@babel/runtime": "~7.6.2",
    "@react-native-community/eslint-config": "~0.0.5",
    "babel-jest": "~24.9.0",
    "eslint": "~6.5.1",
    "jest": "~24.9.0",
    "metro-react-native-babel-preset": "~0.58.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

[c5haw]

Thanks for providing that @junaidrazaq. Unfortunately having reinstalled the dependencies with your package.json I still haven't been able to recreate the problem you're experiencing. Could you try the following please:

• Create a new project with your existing package.json
• Install dependencies
• Try to recreate the issue in an index.js or index.ts file
• Copy onto this issue all the file contents you have used to recreate the issue please (or share a code via sandbox with the reproduced issue)
• Could you also let me know the version of node and npm you are running (or yarn for example if you are using a different package manager)

Hopefully then I can recreate the same issue and trace the problem. I would also encourage you to update to v3.3.6 of our @what3words/api package, but before doing that let's try to narrow down where the issue is occurring first as is.

[junaidrazaq]

Thanks for the response.

So i actually had the latest update of this API first, tried downgrading but the issue was still there.

My node version is v12.22.3. Could this be the issue?

[c5haw]

Ah I see. At least we can resolve that it's not specific to that version of this library.

I don't think the issue would be with your node version either, though knowing it might help me recreate your environment and deduce the problem. Though what would be really helpful is if you could provide a code snippet that I can successfully recreate this with.

[junaidrazaq]

Sorry about this but I am pretty new in the development world. What do you mean by code snippet? Which part of the code would you like? The project is really big so I wouldn't be able to give all the code. Thanks.

[c5haw]

No problem. What would be ideal is if you could follow the steps I documented here using the package.json you sent to me and the minimal required code necessary to recreate the same problem you're experiencing.

[junaidrazaq]

Sounds good. I'm really busy at the moment but I'll try to do that as soon as. Also, I posted the question on stack overflow with a little more information which may help. https://stackoverflow.com/questions/68638595/error-unknown-named-module-constants

[junaidrazaq]

Heres a screenshot of the error if it helps in anyway.

[c5haw]

Thanks for that. I have seen some other closed issues around similar topics such as this. It may point you in the right direction. It appears it could be to do with how the require is being interpreted. It may help get you closer to the problem until you provide a reproducible example.

That particular issue mentions metro and React Native so it could actually be to do with that. We do offer the es2015 transpiled version also if you do require('@what3words/api/es2015'); this may help get around this problem with UMD if it is in fact the same issue.

[junaidrazaq]

Thanks for the response. So i reproduced the project. When i run the build, my react native version in my package.json goes up from 0.62.2 - 0.64.2 so that could be the problem, not sure. I cant reproduce my project using the react native version i am currently using in my app. When you reproduced it, what react-native version was in your package.json file?

[junaidrazaq]

Wowww, Thanks so much boss!!! using require('@what3words/api/es2015'); Did the trick!!

Thanks so much man, Appreciate it

[c5haw]

At present we don't have support for CommonJS, which would resolve this. Can you use es2015 modules instead as that is already available?

[junaidrazaq]

Fixed!! Thanks a bunch!!