Feathers: Babel runtime break import of @feathers/socketio-client

[magisters-org]

Steps to reproduce

1. Install vue webpack template with vue-cli tool
2. Install @feathersjs
3. In Home.vue script make imports:

import io from 'socket.io-client'
import feathers from '@feathersjs/feathers'
import socketio from '@feathersjs/socketio-client'

1. Use imported modules for init connection with feathers server
2. Change webpack.base.conf.js for include node_modules/@feathers in babel-loader options
3. Try to build for production
4. Got this warning:
   WARNING in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/Home.vue 28:21-29 "export 'default' (imported as 'socketio') was not found in '@feathersjs/socketio-client' @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/Home.vue @ ./src/pages/Home.vue @ ./src/router/index.js @ ./src/main.js
5. App not work, console is say:

browser.js:7 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Object.<anonymous> (browser.js:7)
    at Object.4xOZ (vendor.cd4c7d8b495220417c56.js:4358)
    at n (bootstrap d977c3f31dc58f86fcef:54)
    at Object.<anonymous> (application.js:1)
    at Object.JH5W (vendor.cd4c7d8b495220417c56.js:21367)
    at n (bootstrap d977c3f31dc58f86fcef:54)
    at Object.Vjoj (index.js:2)
    at n (bootstrap d977c3f31dc58f86fcef:54)
    at Object.NHnr (app.f50e60230f7066c3ae4e.js:79)
    at n (bootstrap d977c3f31dc58f86fcef:54)

If i change my .babelrc file and remove "plugins": ["transform-runtime"] everything is fine and build complete. App works fine, i get my messages from feathers server. What's wrong?

Thank you for your time!

Feathers latest stable Buzzard
OS Windows 10
Chrome Latest
Node 8.9.0

[daffl]

That still seems really strange. Would you mind sharing a repository where this breaks?

[leob]

I have exactly the same issue (also using vue, default generated Webpack config). Removing "transform-runtime" seems to solve it, that's brilliant ... isn't that the solution then?

[daffl]

I would say so, yes. We need the default exports for the TypeScript support. So the options are either removing the transform-runtime or using the pre-transpiled @feathersjs/client which shouldn't have that problem.

[magisters-org]

using feathers/client is to much expensive, so i waiting for default exports. @daffl can you tell, when you fix this?

[leob]

@magisters-org What is 'expensive' about it?

I'm not a Babel expert, but I've consulted this article:

https://medium.com/@jcse/clearing-up-the-babel-6-ecosystem-c7678a314bf3

and if I understand it correctly then transform-runtime is something that in most cases you can do without (and in any case seems to be needed only for development, not for production).

Alternatively you could consider switching from "babel-runtime" to "babel-polyfill" (in which case you won't need transform-runtime)?

But well maybe a Babel expert should be joining the party.

[magisters-org]

@leob feathers/client version include REST client and primus client, and i don't want to use it.
Babel-polyfill creates environment for all ES2015 features, but runtime will transpile only necessary parts of my code. So my opinion is that babel-runtime more effective.
May be i'm wrong :)

[leob]

@magisters-org So you want get the size of the client down ... would tree shaking help?

https://github.com/soenkekluth/babel-preset-es2015-tree-shaking

That would strip out unused code, I think based on "import" (e.g. Primus if you don't use it) ...

Yes, babel-runtime is probably more efficient.

[daffl]

@feathersjs/clientalso has individual builds that can be required e.g. via @feathersjs/client/core and @feathersjs/client/socketio.

[claustres]

Well I am not completely sure of this because babel and webpack are not so easy to manage but I had a similar issue, the setup which has proven to work fine in .babelrc was the following: "plugins": ["transform-runtime", "add-module-exports", "transform-export-extensions"]. transform-export-extensions mainly targets the correct support of export * syntax but this issue might be related to what add-module-exports do.

[leob]

@claustres thanks, I've tried this out but it didn't solve it for me ... same errors as before.

After some more googling, I found a configuration which apparently 'works', meaning the errors are gone. I'm pasting the complete .babelrc here:

{
"presets": [["es2015"], "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}

So the change is simply to replace ["es2015", {"modules": false}] with ["es2015"]. What this does is explained here:

https://ntucker.true.io/ntucker/webpack-2-uncaught-referenceerror-exports-is-not-defined/

So, in a nutshell: {"modules": false} means that import/export isn't handled by Babel but by Webpack. Apparently this has a number of advantages: Webpack can now assist in tree shaking, code splitting, HMR etc.

After removing {"modules": false} I got rid of those errors we've been seeing, without removing "transform-runtime". Babel then handles import/export ... is this in fact what @daffl meant by: "using the pre-transpiled @feathersjs/client which shouldn't have that problem" ?

However, we will then probably lose the claimed advantages of having Webpack rather than Babel handle import/export?

[claustres]

Thanks for your feedback, I should have given my whole .babelrc:

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime", "add-module-exports", "transform-export-extensions"],
  "comments": false
}

So yes I don't use the modules option. What I can say is that with the option I can see the export error but the bundle produced by webpack (v2.2.1) is exactly the same in both cases (I use code splitting and hot reload features).

[leob]

Right! Well that's it then, so it seems, omitting the modules option ... I'll keep the 2 additional plugins just in case. The whole Babel/Webpack thing gives me an iffy feeling because it all feels like voodoo incantations and I cannot accurately asses what adding or removing an option does but anyway for now it seems fixed. Time to study the fundamentals of Babel/Webpack I suppose ...

[magisters-org]

@claustres Thank you, now it work's fine! i need to save this config for future.

[leob]

@claustres @magisters-org Revisiting this issue again (last time now hopefully) ...

I found out (with the help from someone on the Feathers Slack) that we can do one better, by retaining the '"modules": false' option ... the advantage is that Webpack's "tree shaking" will be utilized (reducing the app's bundle size).

To do this I had to change my .babelrc as follows:

{
  "presets": [
    [
      "env",
      {
        "loose": true,
        "modules": false,
        "targets": {
          "browsers": ["> 1%"]
        },
        "exclude": [
          "transform-es2015-typeof-symbol"
        ]
      }
    ]
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-decorators-legacy",
    "transform-object-assign",
    "transform-class-properties",
    "transform-object-rest-spread"
  ],
  "comments": false
}

and in my package.json ("devDependencies") I removed these lines:

    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-es2015-rollup": "^3.0.0",
    "babel-preset-stage-2": "^6.17.0",

and replaced them by the following:

    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",

When doing a build and checking the size of the app bundle under 'dist' I could see that indeed the size was a bit smaller now (like 700K versus 800K before). Not spectacular but I suppose that as the app gets bigger then so might the advantages of tree shaking.

Oh and by the way, if you want to use async/await on the client then the .babelrc would need to look like this (adding the "fast-async" plugin):

{
  "presets": [
    [
      "env",
      {
        "loose": true,
        "modules": false,
        "targets": {
          "browsers": ["> 1%"]
        },
        "exclude": [
          "transform-async-to-generator",
          "transform-regenerator",
          "transform-es2015-typeof-symbol"
        ]
      }
    ]
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-decorators-legacy",
    "transform-object-assign",
    "transform-class-properties",
    "transform-object-rest-spread",
    ["fast-async", {
      "compiler": {
        "promises": true,
        "generators": false,
        "noRuntime": true,
        "wrapAwait": true
      },
      "useRuntimeModule": false
    }]
  ],
  "comments": false
}

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue with a link to this issue for related bugs.