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

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

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.

@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
}

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).