Search code examples
react-nativebabeljsrequiremetro-bundler

Error: Unknown named module: "./constants"


I am having an issue where I am trying to import an API, specifically the what3words 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 folder and comment out all the 'requires', the error goes away, but then I am unable to use the api.

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./constants", "./requests/autosuggest", "./requests/autosuggest-selection", "./requests/available-languages", "./requests/convert-to-3wa", "./requests/convert-to-coordinates", "./requests/grid-section", "./utils"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.valid3wa = exports.getWords = exports.getOptions = exports.setOptions = exports.gridSectionGeoJson = exports.gridSection = exports.convertToCoordinatesGeoJson = exports.convertToCoordinates = exports.convertTo3waGeoJson = exports.convertTo3wa = exports.availableLanguages = exports.autosuggestSelection = exports.autosuggest = exports.W3W_REGEX = void 0;
    var constants_1 = require("./constants");
    Object.defineProperty(exports, "W3W_REGEX", { enumerable: true, get: function () { return constants_1.W3W_REGEX; } });
    // var autosuggest_1 = require("./requests/autosuggest");
    Object.defineProperty(exports, "autosuggest", { enumerable: true, get: function () { return autosuggest_1.autosuggest; } });
    // var autosuggest_selection_1 = require("./requests/autosuggest-selection");
    Object.defineProperty(exports, "autosuggestSelection", { enumerable: true, get: function () { return autosuggest_selection_1.autosuggestSelection; } });
    // var available_languages_1 = require("./requests/available-languages");
    Object.defineProperty(exports, "availableLanguages", { enumerable: true, get: function () { return available_languages_1.availableLanguages; } });
    // var convert_to_3wa_1 = require("./requests/convert-to-3wa");
    Object.defineProperty(exports, "convertTo3wa", { enumerable: true, get: function () { return convert_to_3wa_1.convertTo3wa; } });
    Object.defineProperty(exports, "convertTo3waGeoJson", { enumerable: true, get: function () { return convert_to_3wa_1.convertTo3waGeoJson; } });
    // var convert_to_coordinates_1 = require("./requests/convert-to-coordinates");
    Object.defineProperty(exports, "convertToCoordinates", { enumerable: true, get: function () { return convert_to_coordinates_1.convertToCoordinates; } });
    Object.defineProperty(exports, "convertToCoordinatesGeoJson", { enumerable: true, get: function () { return convert_to_coordinates_1.convertToCoordinatesGeoJson; } });
    // var grid_section_1 = require("./requests/grid-section");
    Object.defineProperty(exports, "gridSection", { enumerable: true, get: function () { return grid_section_1.gridSection; } });
    Object.defineProperty(exports, "gridSectionGeoJson", { enumerable: true, get: function () { return grid_section_1.gridSectionGeoJson; } });
    // var utils_1 = require("../es2015/utils.js");
    Object.defineProperty(exports, "setOptions", { enumerable: true, get: function () { return utils_1.setOptions; } });
    Object.defineProperty(exports, "getOptions", { enumerable: true, get: function () { return utils_1.getOptions; } });
    Object.defineProperty(exports, "getWords", { enumerable: true, get: function () { return utils_1.getWords; } });
    Object.defineProperty(exports, "valid3wa", { enumerable: true, get: function () { return utils_1.valid3wa; } });
});

After searching online, it appears that this issue is to do with metro and the require function. Please help, Thanks


Solution

  • Managed to fix it!! With some help from one of the contributors of the what3words api. It seems that this is an issue with metro not being able to bundle umd modules. Luckily, the what3words api has es2015 module which we can use instead, so i just used

    const api = require('@what3words/api/es2015');

    Instead of the previous

    const api = require('@what3words/api');

    Check https://github.com/what3words/w3w-node-wrapper/issues/28 for the full debugging