Module not found

[Lenny4]

I have just installed the package and I got error Module not found for all functions.

Compiled with problems:X

ERROR in ./node_modules/language-flag-colors/bin/index.mjs 1:0-64

Module not found: Error: Can't resolve './functions/flag/flagColors/getBase10FlagColors' in '/home/alexandre/Documents/project/yordered/yordered-owner/node_modules/language-flag-colors/bin'
Did you mean 'getBase10FlagColors.js'?
BREAKING CHANGE: The request './functions/flag/flagColors/getBase10FlagColors' 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/language-flag-colors/bin/index.mjs 2:0-62

Module not found: Error: Can't resolve './functions/flag/flagColors/getCMYKFlagColors' in '/home/alexandre/Documents/project/yordered/yordered-owner/node_modules/language-flag-colors/bin'
Did you mean 'getCMYKFlagColors.js'?
BREAKING CHANGE: The request './functions/flag/flagColors/getCMYKFlagColors' 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.
...

How to reproduce:

yarn add language-flag-colors

# index.ts
import languages from "language-flag-colors";
console.log(languages);

[ImRodry]

You need to give us more information such as what environment you’re running this on and how you’re running this

[ImRodry]

Also a quick google search would've solved your issue if this applies to you, but I can't know for sure since you didn't provide any extra information: https://stackoverflow.com/questions/65922329/babel-cant-resolve-imports-in-it-its-own-source-code

[Lenny4]

Hi @ImRodry ,

Really sorry, I should have took more time to post a clear issue.

I reproduce the error here https://github.com/Lenny4/language-flag-colors

I just download react npx create-react-app language-flag-colors --template typescript and add language-flag-colors with npm install language-flag-colors

Here is the package.json:

{
  "name": "language-flag-colors",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.59",
    "@types/react": "^18.0.20",
    "@types/react-dom": "^18.0.6",
    "language-flag-colors": "^2.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.8.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

When I run npm start I got the error.

So I created a Pull request where I create a webpack.config.js with the fix you advice me:

module.exports = {
    module: {
        rules: [
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false
                }
            }
        ]
    }
}

But I still got the error.

I also must tell you that I'm a newby conserning webpack configuration I might have not done something that should be obvious.

What am I missing here ?

Thank you

[Lenny4]

Hello @ImRodry,

Do you need more information ? Is it clear now ?

[ImRodry]

Hey @Lenny4, this might be related to recent restrictions in the latest webpack versions, could you please replace the index.mjs file of our package with the contents below? If this fixes your issue we'll release a version with this change as we've been meaning to do that for a while now

import mod from "./index.js";

export default mod["default"];
export const getAndroidCode = mod.getAndroidCode;
export const getBase10FlagColors = mod.getBase10FlagColors;
export const getCMYKFlagColors = mod.getCMYKFlagColors;
export const getCountry = mod.getCountry;
export const getCountryCode = mod.getCountryCode;
export const getCountryLanguages = mod.getCountryLanguages;
export const getDirection = mod.getDirection;
export const getEmoji = mod.getEmoji;
export const getFlag = mod.getFlag;
export const getFlagColors = mod.getFlagColors;
export const getGlottolog = mod.getGlottolog;
export const getHexFlagColors = mod.getHexFlagColors;
export const getISO_639_1 = mod.getISO_639_1;
export const getISO_639_2 = mod.getISO_639_2;
export const getISO_639_3 = mod.getISO_639_3;
export const getIds = mod.getIds;
export const getImage = mod.getImage;
export const getLanguage = mod.getLanguage;
export const getLocale = mod.getLocale;
export const getName = mod.getName;
export const getNativeName = mod.getNativeName;
export const getOSXCode = mod.getOSXCode;
export const getOSXLocale = mod.getOSXLocale;
export const getPrimaryBase10 = mod.getPrimaryBase10;
export const getPrimaryCMYK = mod.getPrimaryCMYK;
export const getPrimaryColor = mod.getPrimaryColor;
export const getPrimaryHex = mod.getPrimaryHex;
export const getPrimaryRGB = mod.getPrimaryRGB;
export const getRGBFlagColors = mod.getRGBFlagColors;
export const getRegion = mod.getRegion;
export const getRegionCode = mod.getRegionCode;
export const getRegionLanguages = mod.getRegionLanguages;

[Lenny4]

@ImRodry it does fix the issue !

[ImRodry]

Fixed in https://github.com/Bas950/Language-Flag-Colors/commit/f5dec6541e247c7a01779a4eef7ed9b2509f0e06