search

aptos-labs / aptos-core

Aptos is a layer 1 blockchain built to support the widespread use of blockchain through better technology and user experience.
https://aptosfoundation.org
Other
6.17k stars 3.64k forks source link

Can't import the named export 'bytesToHex' from non EcmaScript module (only default export is available) #4601

Closed huadee1108 closed 2 years ago

huadee1108 commented 2 years ago

🐛 Bug

image
jjleng commented 2 years ago

Need more info. Share your package.json and tsconfig if there is one

huadee1108 commented 2 years ago

package.json { "name": "xx", "version": "0.1.0", "private": true, "dependencies": { "@ant-design/charts": "^1.3.5", "@coinbase/wallet-sdk": "^3.4.0", "@craco/craco": "^6.2.0", "@ethersproject/providers": "^5.4.5", "@fontsource/poppins": "^4.5.8", "@headlessui/react": "^1.4.2", "@lingui/detect-locale": "^3.11.1", "@lingui/loader": "^3.11.1", "@lingui/react": "^3.11.1", "@reduxjs/toolkit": "^1.6.1", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/numeral": "^2.0.2", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@walletconnect/web3-provider": "^1.8.0", "animejs": "^3.2.1", "antd": "^4.16.13", "aptos": "^1.3.14", "axios": "^0.26.1", "bignumber.js": "^9.0.2", "craco-antd": "^1.19.0", "cross-env": "^7.0.3", "ethers": "^5.6.9", "friendly-numbers": "^1.0.1", "http-proxy-middleware": "^2.0.4", "lodash": "^4.17.21", "moment": "^2.29.2", "numeral": "^2.0.6", "qs": "^6.10.3", "react": "^17.0.2", "react-cookies": "^0.1.1", "react-copy-to-clipboard": "^5.1.0", "react-countup": "^6.1.0", "react-device-detect": "^2.1.2", "react-dom": "^17.0.2", "react-feather": "^2.0.9", "react-helmet": "^6.1.0", "react-infinite-scroll-component": "^6.1.0", "react-infinite-scroller": "^1.2.6", "react-masonry-layout": "^0.4.0", "react-redux": "^7.2.5", "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", "react-typewriter-hook": "^1.0.1", "react-uuid": "^1.0.3", "socket.io-client": "^4.5.1", "styled-components": "^5.3.5", "typescript": "^4.1.2", "vconsole": "^3.9.1", "web-vitals": "^1.0.1", "web3": "^1.7.5" }, "scripts": { "prebuild": "yarn extract && yarn compile", "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject", "extract": "lingui extract", "compile": "lingui compile" }, "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" ] }, "devDependencies": { "@lingui/cli": "^3.11.1", "@lingui/macro": "^3.11.1", "@types/react-router-dom": "^5.3.2", "@types/styled-components": "^5.1.25", "autoprefixer": "^9", "postcss": "^7", "tailwindcss": "npm:@tailwindcss/postcss7-compat" } }

tsconfig.json { "compilerOptions": { "target": "es2015", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "baseUrl": "src" }, "include": [ "src" ] }

thank you for your help

wk3368 commented 2 years ago

Got the same errors in my dapp:

ERROR in ./node_modules/aptos/dist/index.mjs 78:25-35
Can't import the named export 'bytesToHex' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/aptos/dist/index.mjs 232:37-48
Can't import the named export 'bytesToHex' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/aptos/dist/index.mjs 34:21-31
Can't import the named export 'hexToBytes' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/aptos/dist/index.mjs 107:27-38
Can't import the named export 'hexToBytes' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/aptos/dist/index.mjs 33:12-16
Can't import the named export 'hmac' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/aptos/dist/index.mjs 48:12-16
Can't import the named export 'hmac' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/aptos/dist/index.mjs 232:49-73
Can't import the named export 'mnemonicToSeedSync' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/aptos/dist/index.mjs 33:24-30
Can't import the named export 'sha512' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/aptos/dist/index.mjs 48:24-30
Can't import the named export 'sha512' from non EcmaScript module (only default export is available)
 @ ./src/index.js

here is the package.json:

{
  "name": "xx",
  "version": "1.5.0", 
  "engines": {
    "node": ">= 10"
  },
  "scripts": {
    "deploy": "./deploy.sh",
    "lint": "eslint . --ext js,json && prettier ./src -c",
    "lint:fix": "eslint . --fix --ext js,json && prettier ./src -c --write",
    "start": "webpack-dev-server",
    "build": "webpack --mode production",
    "test": "yarn lint",
    "prepublishOnly": "yarn test && yarn build"
  },
  "publishConfig": {
    "access": "public"
  },
  "files": [
    "dist/"
  ], 
  "license": "MIT",  
  "dependencies": {
    "@ethersproject/bytes": "^5.0.6",
    "aptos": "1.3.13",
    "bignumber.js": "^9.0.1",
    "compare-versions": "^4.1.2",
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    "@metamask/eslint-config": "^4.0.0",
    "@starcoin/starcoin": "^1.8.0",
    "@starcoin/starmask-onboarding": "^1.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.0.2",
    "eslint": "^7.7.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-json": "^2.0.1",
    "eslint-plugin-node": "^11.1.0",
    "eth-sig-util": "^2.5.3",
    "ethereumjs-util": "^5.1.1",
    "ethers": "^5.0.32",
    "gh-pages": "^3.1.0",
    "prettier": "^2.0.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

here is the webpack.config.js:

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

const DIST = path.resolve(__dirname, 'dist')

module.exports = {
  devtool: 'eval-source-map',
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: DIST,
    publicPath: DIST,
  },
  devServer: {
    contentBase: DIST,
    port: 9022,
    writeToDisk: true,
  },
  plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),

    // for build scripts
    new CopyPlugin({
      patterns: [
        {
          flatten: true,
          from: './src/*',
          globOptions: {
            ignore: ['**/*.js'],
          },
        },
      ],
    }),
  ],
}
jjleng commented 2 years ago

These means that webpack or craco do not know .mjs are ESM modules. See https://stackoverflow.com/questions/71054449/cant-import-the-named-export-directive-from-non-ecmascript-module-only-defau. I verified that the below works for webpack. 

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

Unfortunately, I don't have time to test every bundler. Project owners should make sure their bundler can bundle the Aptos SDK.