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

Steps to reproduce the behavior

Use Vue-cli to create a Vue 3 app with Typescript.
Run yarn add pinia@next.
Edit the main.ts:

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";

const app = createApp(App);
app.use(createPinia());
app.mount("#app");

Run yarn serve.

Expected behavior

The compilation goes without an error

Actual behavior

Throws error:

ERROR  Failed to compile with 18 errors                                                                                                           

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

 error  in ./node_modules/pinia/dist/pinia.mjs

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

Additional Information:

"dependencies": {
   "core-js": "^3.6.5",
   "pinia": "^2.0.0-rc.9",
   "primeflex": "^3.0.1",
   "primeicons": "^4.1.0",
   "primevue": "^3.7.1",
   "vue": "^3.0.0",
   "vue-router": "^4.0.0-0"
 },
 "devDependencies": {
   "@typescript-eslint/eslint-plugin": "^4.18.0",
   "@typescript-eslint/parser": "^4.18.0",
   "@vue/cli-plugin-babel": "~4.5.0",
   "@vue/cli-plugin-eslint": "~4.5.0",
   "@vue/cli-plugin-router": "~4.5.0",
   "@vue/cli-plugin-typescript": "~4.5.0",
   "@vue/cli-service": "~4.5.0",
   "@vue/compiler-sfc": "^3.0.0",
   "@vue/eslint-config-prettier": "^6.0.0",
   "@vue/eslint-config-typescript": "^7.0.0",
   "eslint": "^6.7.2",
   "eslint-plugin-prettier": "^3.3.1",
   "eslint-plugin-vue": "^7.0.0",
   "lint-staged": "^9.5.0",
   "node-sass": "^4.12.0",
   "prettier": "^2.2.1",
   "sass-loader": "^8.0.2",
   "typescript": "~4.1.5"
 },

Issue Analytics

State:
Created 2 years ago
Reactions:11
Comments:15 (3 by maintainers)

Top GitHub Comments

93reactions

jhony-vcommented, Sep 14, 2021

I had the same problem but I solved editing my vue.config.js file with the following webpack rule:

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ] 
    }
  }
}

With this configuration it worked.

44reactions

4Kazelotcommented, Oct 18, 2021

I had the same problem but I solved editing my vue.config.js file with the following webpack rule:
// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ] 
    }
  }
}
With this configuration it worked.

For NuxtJS:

export default {
  build: {
    extend(config) {
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },
}

Top Results From Across the Web

Can't import the named export XXXX from non EcmaScript ...

the solution is to make sure that you have a webpack.config.js file in the root of your project directory that looks something like...

Can't import the named export 'useRef' from non EcmaScript ...

ModuleDependencyError : Can't import the named export 'useRef' from non EcmaScript module (only default export is available) #16690.

can't import the named export 'cloneelement' from non ...

I can see following bug when I install this module Can't import the named export 'cloneElement' from non EcmaScript module (only default export...

Can't import the named export from non EcmaScript module

node.js - Can't import the named export XXXX from non EcmaScript module (only default export is available) - Stack Overflow).

webpack/webpack - Gitter

Can't import the named export 'a' from non EcmaScript module (only default export is available) ERROR in ./node_modules/@ionic/core/dist/esm/loader.mjs 7:4- ...