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

MycroftHolmes1989 · 2021-09-14T11:44:46Z

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"
 },

The text was updated successfully, but these errors were encountered:

Liwoj · 2021-09-14T12:03:52Z

Same problem here. Using "typescript": "~4.3.5".
Downgrading back to 2.0.0-rc.8 fixes the issue...

Liwoj · 2021-09-14T13:57:51Z

Seems related and also the workaround mentioned in the discussion works.

But it's strange as all the issues I found (here, here) describe this problem as "unable to do named import from CJS into ESM module". But VueDemi provides ESM build and after checking Webpack 4 docs (as Vue CLI is still on WP4), it has also correct settings in package.json ("module" field pointing to .mjs file).

So I still don't understand why it is treated as "non EcmaScript module"

posva · 2021-09-14T14:29:54Z

Can someone provide a boiled down repro with only Vue and pinia (no router, or other unnecessary steps)

jhony-v · 2021-09-14T22:03:42Z

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.

predragnikolic · 2021-09-24T15:11:01Z

Can someone provide a boiled down repro with only Vue and pinia (no router, or other unnecessary steps)

@posva I created a vue-cli project with a repro. Hope it helps.

https://github.com/predragnikolic/pinia-bug-repro

And when I try to import pinia:
https://github.com/predragnikolic/pinia-bug-repro/commit/d9810039d701d30d58f11688f3081fe14545db4a

I get errors when running yarn serve:

yarn serve
yarn run v1.22.11
warning ../package.json: No license field
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 18 errors                              5:09:52 PM

 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)

No issues found.

posva · 2021-09-27T22:17:40Z

@predragnikolic that's a lot of projects 😓

@MycroftHolmes1989 can you create a boiled down reproduction please?

timpulver · 2021-09-28T10:20:34Z

Here is the chained Webpack config if someone else needs it:

vue.config.js:

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("mjs")
      .test(/\.mjs$/)
      .type("javascript/auto")
      .include.add(/node_modules/)
      .end();
  },
};

posva · 2021-09-29T12:36:50Z

I reproduced the issue on a simple project. This should be fixable by changing the extensions of the generated files. I still need to test it out a bit more.

tobiasdiez · 2021-10-15T19:37:54Z

I get this error now when trying to upgrade from @pinia/nuxt v 0.0.4 to version 0.0.6, see JabRef/JabRefOnline#551. The reason might be 438b16d ?

4Kazelot · 2021-10-18T09:55:53Z

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',
      })
    },
  },
}

Kooklen · 2022-01-24T01:28:01Z

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.

It works

qrtp · 2022-02-18T01:43:08Z

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',
      })
    },
  },
}

@4Kazelot For the NuxtJS what file does this config go in?

AzimovAzimDev · 2022-06-05T12:28:44Z

[[[> > > 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',
      })
    },
  },
}

@4Kazelot For the NuxtJS what file does this config go in?

https://nuxtjs.org/docs/features/configuration/#extend-webpack-config](https://nuxtjs.org/docs/features/configuration/#extend-webpack-config)](https://nuxtjs.org/docs/features/configuration/#extend-webpack-config)](https://nuxtjs.org/docs/features/configuration/#extend-webpack-config)

taidaid · 2022-07-01T09:37:43Z

Hello, we are trying to use Pinia alongside Vuex in a Nuxt 2 project in order to smooth our eventual migration to Nuxt 3. However, even after adding

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

to our build config, we are still seeing the Can't import the named export 'isVue2' from non EcmaScript module (only default export is available). The error comes from our ./.nuxt/dist.plugin.209980bd.mjs file which seems to be the @pinia/nuxt plugin setup.

Here is some of our package.json

// dependencies
"nuxt": "2.15.8",
"vue": "2.6.14",
"@nuxtjs/composition-api": "^0.23.2" ,
"@pinia/nuxt": "^0.1.9",
"pinia": "^2.0.14

// devDependencies
"@nuxt/typescript-build": "2.1.0"

We tried some experiments such as deleting ths .cjs file from vue-demi, but it seems that no matter what we do, the file is not reading the .mjs file correctly.

andreisucman · 2022-10-15T09:07:29Z

If nothing worked you can try importing differently.

Instead of

import {a, b} from "c";

try

import * as q from "c";

and then

const {a, b} = q;

yudhishthir-siterecon · 2024-01-14T15:22:11Z

If you are using CRACO for react app, add the following webpack configuration to your craco.config.js:

  module.exports = {
    webpack: {
      configure: (webpackConfig, { env, paths }) => {
        // Add a rule to handle .mjs files
        webpackConfig.module.rules.push({
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        });
  
        return webpackConfig;
      },
    },
  };

posva added the need repro This issue couldn't be reproduced label Sep 14, 2021

posva added bug Something isn't working has workaround The issue contains a temporary solution to get around the problem and removed need repro This issue couldn't be reproduced labels Sep 29, 2021

posva mentioned this issue Sep 30, 2021

build: refactor cjs + mjs #694

Merged

posva closed this as completed in #694 Sep 30, 2021

posva mentioned this issue Oct 14, 2021

Possible to run nuxt3 + pinia #719

Closed

tobiasdiez mentioned this issue Oct 15, 2021

Bump @pinia/nuxt from 0.0.4 to 0.0.6 JabRef/JabRefOnline#551

Closed

This was referenced Oct 27, 2021

Can't build with v2.0.0-rc.15 #749

Closed

Pinia v2 doesn't work with vue@2 & @vue/[email protected] #750

Closed

philibe mentioned this issue Feb 8, 2022

Pinia Error in Vue 2 #1039

Closed

leopons mentioned this issue Mar 13, 2022

TypeError: Object(...) is not a function at createPinia #1147

Closed

taidaid mentioned this issue Jul 11, 2022

Can't import the named export 'isVue2' from non EcmaScript module vueuse/vue-demi#171

Closed

Lightlce mentioned this issue Jul 17, 2022

Can't import the named export {_method_} from non EcmaScript module (only default export is available) portabletext/to-html#2

Closed

elevatebart mentioned this issue Jul 27, 2022

Nuxt-bridge broken vue-styleguidist/vue-styleguidist#1365

Closed

cyocun mentioned this issue Sep 2, 2022

(new PIXI.Application).start() and stop() is not a function error, in Typescript pixijs/pixijs#8624

Open

BleXor mentioned this issue Dec 19, 2022

v 0.2.26 : 'TinyEmitter' exporting problem with create-react-app darkroomengineering/lenis#76

Closed

posva mentioned this issue Jan 5, 2023

createPinia failed in Vue 2 #1199

Closed

nozomuikuta mentioned this issue Jan 30, 2023

Failed import from ohmyfetch in nuxt unjs/ofetch#94

Closed

stonega mentioned this issue Mar 30, 2023

Can't build vite app solana-labs/buffer-layout-utils#7

Closed

VividLemon mentioned this issue Apr 13, 2023

Legacy installation does not work with webpack bootstrap-vue-next/bootstrap-vue-next#1038

Closed

CPunisher mentioned this issue Apr 29, 2023

Error in using uploadImages pd4d10/hashmd#279

Closed

imzbf mentioned this issue May 25, 2023

版本号2.11.3，预览模式本地正常，打包时报错 imzbf/md-editor-v3#273

Closed

bluebill1049 mentioned this issue May 30, 2023

issue: Can't import the named export 'Fragment' from non EcmaScript module (only default export is available) react-hook-form/react-hook-form#10465

Closed

1 task

uNmAnNeR mentioned this issue Jul 5, 2023

Can't import the named export 'getCurrentInstance' from non EcmaScript module uNmAnNeR/imaskjs#898

Closed

This comment was marked as outdated.

Sign in to view

mitchcapper mentioned this issue Aug 1, 2023

feat: Basic context menu httptoolkit/httptoolkit-ui#85

Merged

luminajames mentioned this issue Sep 22, 2023

Can't import the named export 'XXX' from non EcmaScript module (only default export is available) facebook/create-react-app#10356

Open

tien mentioned this issue Mar 25, 2024

"Can't import the named export" with TypeScript and yarn glennreyes/react-countup#852

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

MycroftHolmes1989 commented Sep 14, 2021 •

edited by posva

Loading

Liwoj commented Sep 14, 2021

Liwoj commented Sep 14, 2021 •

edited

Loading

posva commented Sep 14, 2021

jhony-v commented Sep 14, 2021 •

edited

Loading

predragnikolic commented Sep 24, 2021

posva commented Sep 27, 2021

timpulver commented Sep 28, 2021 •

edited

Loading

posva commented Sep 29, 2021 •

edited

Loading

tobiasdiez commented Oct 15, 2021

4Kazelot commented Oct 18, 2021

Kooklen commented Jan 24, 2022

qrtp commented Feb 18, 2022

AzimovAzimDev commented Jun 5, 2022

taidaid commented Jul 1, 2022

andreisucman commented Oct 15, 2022

This comment was marked as outdated.

yudhishthir-siterecon commented Jan 14, 2024

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

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

Comments

MycroftHolmes1989 commented Sep 14, 2021 • edited by posva Loading

Steps to reproduce the behavior

Expected behavior

Actual behavior

Additional Information:

Liwoj commented Sep 14, 2021

Liwoj commented Sep 14, 2021 • edited Loading

posva commented Sep 14, 2021

jhony-v commented Sep 14, 2021 • edited Loading

predragnikolic commented Sep 24, 2021

posva commented Sep 27, 2021

timpulver commented Sep 28, 2021 • edited Loading

posva commented Sep 29, 2021 • edited Loading

tobiasdiez commented Oct 15, 2021

4Kazelot commented Oct 18, 2021

Kooklen commented Jan 24, 2022

qrtp commented Feb 18, 2022

AzimovAzimDev commented Jun 5, 2022

taidaid commented Jul 1, 2022

andreisucman commented Oct 15, 2022

This comment was marked as outdated.

yudhishthir-siterecon commented Jan 14, 2024

MycroftHolmes1989 commented Sep 14, 2021 •

edited by posva

Loading

Liwoj commented Sep 14, 2021 •

edited

Loading

jhony-v commented Sep 14, 2021 •

edited

Loading

timpulver commented Sep 28, 2021 •

edited

Loading

posva commented Sep 29, 2021 •

edited

Loading