Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
dagadbm opened this issue Apr 27, 2021 · 7 comments
Closed

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

dagadbm opened this issue Apr 27, 2021 · 7 comments
Labels
needs more info ✋ A question or report that needs more info to be addressable

Comments

@dagadbm
Copy link

dagadbm commented Apr 27, 2021 •
edited
Loading

I am trying to use @urql/core library only on a SPA created using vue-service-cli.

I am using urql version 2.0.0 and graphql version 15.5.0
I have tried with node 12 and node 14 and the result is the same:

Steps to reproduce

import { createClient, gql } from '@urql/core';

const client = createClient({
  url: process.env.VUE_APP_GRAPH_QL_URL,
});

const echo = gql`
  query {
    echo(text: "text to echo back")
  }
`;

client
  .query(echo)
  .toPromise()
  .then(result => {
    console.log(result); // { data: ... }
  });

This is part of my main.js file which is the first thing that is loaded after running npm run serve (which calls vue-cli-service serve)

Expected behavior
I expected my app to run but instead I got

Actual behavior

 ERROR  Failed to compile with 65 errors                                                                                                                                                                                              3:04:39 PM

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/2c01d8b2.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

 error  in ./node_modules/@urql/core/dist/urql-core.mjs

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

I must be doing something horribly wrong that is simple to fix. Right?

Here is part of package-json for reference:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build:development": "NODE_ENV=production vue-cli-service build --mode development && npx serve dist",
    "build:staging": "NODE_ENV=production vue-cli-service build --mode staging",
    "build:production": "NODE_ENV=production vue-cli-service build --mode production",
    "lint": "NODE_ENV=production vue-cli-service lint --no-fix",
    "lint:fix": "NODE_ENV=production vue-cli-service lint --fix",
    "test:unit": "vue-cli-service test:unit",
    "test:watch": "vue-cli-service test:unit --watchAll --runInBand",
    "test:debug": "node --inspect-brk node_modules/.bin/vue-cli-service test:unit --watchAll --runInBand",
    "test:e2e": "vue-cli-service test:e2e --mode production"
  },
  "dependencies": {
    "@datadog/browser-rum": "^2.6.2",
    "@fullstory/browser": "^1.4.5",
    "@popperjs/core": "^2.9.0",
    "@sentry/integrations": "^5.28.0",
    "@sentry/vue": "^5.28.0",
    "@unbabel/smartcheck-client": "0.0.3",
    "@unbabel/ui": "^4.13.6",
    "@urql/core": "^2.0.0",
    "cookies-js": "^1.2.3",
    "graphql": "^15.5.0",
    "just-extend": "^4.1.1",
    "jwt-simple": "^0.5.6",
    "lzutf8": "^0.5.6",
    "mitt": "^2.1.0",
    "mixpanel-browser": "^2.39.0",
    "msw": "^0.27.0",
    "platform": "^1.3.5",
    "pusher-js": "^7.0.1",
    "register-service-worker": "^1.5.2",
    "scroll-into-view-if-needed": "^2.2.20",
    "smooth-scroll-into-view-if-needed": "^1.1.29",
    "vue": "^2.6.11",
    "vue-flash-message": "^0.7.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-persistedstate": "^2.5.4",
    "webpack": "^4.44.2"
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^3.0.0",
    "@sheerun/mutationobserver-shim": "^0.3.3",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/user-event": "^12.8.3",
    "@testing-library/vue": "^5.1.0",
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-e2e-cypress": "^4.5.6",
    "@vue/cli-plugin-eslint": "^3.1.1",
    "@vue/cli-plugin-pwa": "^4.5.6",
    "@vue/cli-plugin-unit-jest": "^3.5.0",
    "@vue/cli-service": "^3.1.1",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-testing-library": "^3.10.1",
    "eslint-plugin-vue": "^5.0.0-0",
    "html-loader": "1.3.2",
    "identity-obj-proxy": "^3.0.0",
    "isomorphic-fetch": "^3.0.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.0.1",
    "svg-url-loader": "^7.1.1",
    "vue-svg-loader": "^0.16.0",
    "vue-template-compiler": "^2.6.11",
    "worker-loader": "^3.0.5"
  },
  "msw": {
    "workerDirectory": "public"
  }
}
@dagadbm dagadbm added the bug 🐛 Oh no! A bug or unintented behaviour. label Apr 27, 2021
@kitten kitten added needs more info ✋ A question or report that needs more info to be addressable and removed bug 🐛 Oh no! A bug or unintented behaviour. labels Apr 27, 2021
@kitten
Copy link
Member

kitten commented Apr 27, 2021

I assume this is an issue with the build tool you're using. These imports are from the wonka module, which does have mjs and ESM files available. So, I'm not sure what tool is building this and running into these issues, but it'll be mostly up to that tool

@dagadbm
Copy link
Author

dagadbm commented Apr 27, 2021 •
edited
Loading

its good ol' webpack (v4.18.1) basically. do i need to do some additional configuration I wonder.

@dagadbm
Copy link
Author

dagadbm commented Apr 27, 2021 •
edited
Loading

0no-co/wonka#97 i found this but i switched to node 12.14.1 and still nothing get the same compile error.

I also tried commenting out most of my vue.config.js (which you can use to manipulate webpack) and the result is the same.

@JoviDeCroock
Copy link
Collaborator

JoviDeCroock commented Apr 27, 2021 •
edited
Loading

Would you mind trying to add this as a plugin: https://github.com/lukeed/webpack-modules that way we can see where your issue actually comes from. It could be that your resolve.extensions config is set to not accept .mjs or your loaders are set to ignore .mjs.

(example) - Set a loader for mjs: https://github.com/JoviDeCroock/POC-ModularLegacyBuild/blob/master/webpack.config.js#L80

@dagadbm
Copy link
Author

dagadbm commented Apr 27, 2021 •
edited
Loading

I dont want celebrate yet but: vuejs/vue-cli#2626
I added this line to my vue.config.js

    config.resolve.extensions.prepend('.mjs');

and stuff seems to be compiling now :D

Let me just check if I can ping my graphQL server and I will close the issue still today if this fixes the problem.

Thank you so much! There are so many moving parts I had a hard time understanding wtf was even going on!

@dagadbm
Copy link
Author

dagadbm commented Apr 27, 2021

Its working. Just have to fight CORS but at least the requests are happening.
Thank you so much for your help :)

@dagadbm dagadbm closed this as completed Apr 27, 2021
@merlox
Copy link

merlox commented Feb 22, 2022 •
edited
Loading

For those of you that have this error, add this to your webpack config rules, no matter the webpack version to fix it:

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

It worked for me!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs more info ✋ A question or report that needs more info to be addressable
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kitten @merlox @dagadbm @JoviDeCroock