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

[vikiival]

Hey I have problem to use @polkadot/extension-dapp

Using tutorials:
https://polkadot.js.org/docs/extension/usage
https://dotleap.com/building-and-address-converter-page-polkadot/

@jacogr

From console

 error  in ./node_modules/@polkadot/util-crypto/mnemonic/bip39.mjs

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

 error  in ./node_modules/@polkadot/util-crypto/base64/encode.mjs

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

 error  in ./node_modules/@polkadot/util-crypto/nacl/sign.mjs

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

 error  in ./node_modules/@polkadot/util-crypto/crypto.mjs

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

 error  in ./node_modules/@polkadot/ui-keyring/index.mjs

Can't reexport the named export 'Ledger' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@polkadot/wasm-crypto-wasm/buffer.mjs

Can't reexport the named export 'buffer' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@polkadot/keyring/index.mjs

Can't reexport the named export 'decodeAddress' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@polkadot/keyring/index.mjs

Can't reexport the named export 'encodeAddress' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@polkadot/keyring/index.mjs

Can't reexport the named export 'setSS58Format' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@polkadot/wasm-crypto-wasm/buffer.mjs

Can't reexport the named export 'sizeCompressed' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@polkadot/wasm-crypto-wasm/buffer.mjs

Can't reexport the named export 'sizeUncompressed' from non EcmaScript module (only default export is available)

[jacogr]

This means your bundler resolves .mjs files, however it doesn't know that they are ESM modules.

On webpack, you can add the following to rules -

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

PS: CRA, not that you use it, but for future reference, has a particularly brain-dead setup where is specifically resolves mjs and doesn't have a handler for it, see https://stackoverflow.com/questions/64002604/how-to-make-create-react-app-support-mjs-files-with-webpack (Step-through CRA here polkadot-js/common#812 (comment))

[vikiival]

@jacogr do you have please any hint how to use it vue.config ?

[jacogr]

According to some light googling and clicking the first link, YMMV - nklayman/vue-cli-plugin-electron-builder#67 (comment)

[yangwao]

Find the same as well, but yield same results, what you've googled? I can dig around more, maybe I'm missing something.

Following https://cli.vuejs.org/guide/webpack.html#simple-configuration

module.exports = {
  publicPath: './',
  configureWebpack: {
    include: '/node_modules/',
    test: '/\.mjs$/',
    type: 'javascript/auto'
  }
}

Following nklayman/vue-cli-plugin-electron-builder#67 (comment)

module.exports = {
  publicPath: './',
  chainWebpackMainProcess: (config) => {
    config.module.rule('javascript/auto').test(/\.mjs$/)
  }
}

[jacogr]

I believe, looking at the Vue docs (not an expert, but following an example here https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch), you can probably do -

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module.rule('javascript/auto').test(/\.mjs$/);
  }
}

[vikiival]

also added this and it still does not work

  chainWebpack: (config) => {
    config.module.rule('javascript/auto').test(/\.mjs$/).include
    .add(/node_modules/)
    .end();
  }

[yangwao]

Either upper snippet either this didn't worked. Trying knocking out issue, if we don't have old dependencies, but we have @vue/cli-service-'4.2.3': '2020-02-27T14:34:06.315Z', which should include this PR vuejs/vue-cli#2819 when it was added. But may we are missing some cli-plugin from https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue, time for little shopping around.

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('javascript/auto')
      .test(/\.mjs$/);
  }

[jacogr]

Here is a another example for the glahql library - graphql/graphql-js#1272 (comment)

module.exports = {
    chainWebpack: config => {
        // ...other chains
        config.module // fixes https://github.com/graphql/graphql-js/issues/1272
            .rule('mjs$')
            .test(/\.mjs$/)
            .include
                .add(/node_modules/)
                .end()
            .type('javascript/auto');
    },
    configureWebpack: {
        resolve: {
            // .mjs needed for https://github.com/graphql/graphql-js/issues/1272
            extensions: ['*', '.mjs', '.js', '.vue', '.json']
        }
    }
}

[yangwao]

@jacogr has won the game! 🥳
❤️ Thank you very much! Probably, it will be demonstrated at today's Metaverse seminar 👯

[jacogr]

Google is a friend :)

[polkadot-js-bot]

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.