search

polkadot-js / common

Utilities and base libraries for use across polkadot-js for Polkadot and Substrate. Includes base libraries, crypto helpers and cross-environment helpers.
Apache License 2.0
254 stars 145 forks source link

fail to build api: Can't import the named export 'BN_ZERO' from non EcmaScript module (only default export is available) #814

Closed brenzi closed 3 years ago

brenzi commented 3 years ago

I'm using @polkadot-js/api 3.1.1 in a mobile webview. Since upgrading from 2.3.1 I get:

yarn build 

ERROR in ./node_modules/@polkadot/types/create/registry.mjs 384:89-96
Can't import the named export 'BN_ZERO' from non EcmaScript module (only default export is available)
 @ ./node_modules/@polkadot/types/create/index.mjs
 @ ./node_modules/@polkadot/types/index.mjs
 @ ./src/service/account.js
 @ ./src/index.js

Here's my package.json

{
  "name": "encointer-js-service",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "clean": "rm -rf dist/*",
    "lint": "eslint src/**.js",
    "build": "webpack -p --mode production",
    "build-dev": "webpack -d --mode development",
    "test": "jest -i --watch"
  },
  "exports": {
    ".": "./src/index.js",
    "./service/": "./src/service/",
    "./types": "./src/config/types.js"
  },
  "resolutions": {
    "@polkadot/api": "^3.1.1",
    "**/@polkadot/api": "^3.1.1",
    "@polkadot/types": "^3.1.1",
    "**/@polkadot/types": "^3.1.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.8.3",
    "@polkadot/api": "^3.1.1",
    "@polkadot/keyring": "^5.1.1",
    "@polkadot/rpc-provider": "^3.1.1",
    "@polkadot/types": "^3.1.1",
    "@polkadot/util": "^5.1.1",
    "@polkadot/util-crypto": "^5.1.1",
    "@polkadot/ui-shared": "^0.63.1",
    "bn.js": "^5.1.1",
    "oo7-substrate": "^0.8.0",
    "bs58": "^4.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@webpack-cli/info": "^0.2.0",
    "@webpack-cli/init": "^0.3.0",
    "inquirer": "^6",
    "babel-loader": "^8.0.6",
    "chai": "^4.2.0",
    "eslint": "^7.3.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jest": "^23.16.0",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-only-warn": "^1.0.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "typescript": "^3.2",
    "jest": "^26.0.1",
    "prettier": "^1.19.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "eslintConfig": {
    "globals": {
      "api": true,
      "send": true
    },
    "extends": [
      "standard",
      "plugin:jest/recommended"
    ],
    "plugins": [
      "only-warn"
    ],
    "rules": {
      "semi": [
        1,
        "always"
      ],
      "no-extra-semi": 1
    }
  }
}
jacogr commented 3 years ago

See https://github.com/polkadot-js/common/issues/812#issuecomment-747943530

brenzi commented 3 years ago

very swift, thanks. Is there a fix for webpack too? OR do we have to use "build": "react-app-rewired build"

jacogr commented 3 years ago

This rule for WP4 -

{
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  }

(WP5 handles it correctly, however having the above doesn't hurt WP5 in my testing either...)

brenzi commented 3 years ago

yes, build runs through with this, but

WARNING in ./src/utils/fixpointUtil.js 65:22-29
"export 'default' (imported as 'bnToU8a') was not found in '@polkadot/util/bn/toU8a'
 @ ./src/service/account.js
 @ ./src/index.js

WARNING in ./src/utils/fixpointUtil.js 66:22-29
"export 'default' (imported as 'bnToU8a') was not found in '@polkadot/util/bn/toU8a'
 @ ./src/service/account.js
 @ ./src/index.js

WARNING in ./src/utils/fixpointUtil.js 70:13-20
"export 'default' (imported as 'bnToU8a') was not found in '@polkadot/util/bn/toU8a'
 @ ./src/service/account.js
 @ ./src/index.js

WARNING in ./src/service/account.js 27:20-32
"export 'default' (imported as 'generateIcon') was not found in '@polkadot/ui-shared/icons'
 @ ./src/index.js

I guess this won't work....don't understand why these are warnings, not errors....

brenzi commented 3 years ago

update WP to 5?

jacogr commented 3 years ago

The latter error above is because you use direct imports from the tree itself. (i.e. not from the index). To make tree-shaking better, all exports inside the tree were changed to non-default exports, so where you used e.g.

// no issues
import { bnToU8a } from '@polkadot/util';

// this is also fine
import { bnToU8a } from '@polkadot/util/bn';

// this creates issues ... (see next, all inside-tree exports are named now, consistently)
import bnToU8a from '@polkadot/util/bn/toU8a';

// this is the adjustment needed
import { bnToU8a } from '@polkadot/util/bn/toU8a';
jacogr commented 3 years ago

So, I can really recommend a bump to WP5, it is orders of a magnitude better in creating smaller bundles - in the extension UI we saw a drop from 2.8MB to 1MB... that is an outlier, the apps UI itself only showed around 10%).

However, it is effort and it certainly is not required at all here. So when you have some free time at some point, I can recommend it.

The above is just due to the in-tree non-default export changes. (For most this would have been transparent since they would have imported from the root)

polkadot-js-bot commented 3 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query.