Can't import socket.io into Stencil app

[bitflower]

Repo with the problem outlined:
https://github.com/bitflower/stencil-socketio-problem

Current behavior:
Neither socket.io nor socket.io-client can be imported into Stencil.

Steps to reproduce:
See repo

... and then npm run dev

Hope you have a minute to check this out as I'm far from being an expert in rollup! :-)

[jthoms1]

Looks like this issue was reported with rollup here. rollup/rollup-plugin-commonjs#61

I tried the change outlined and it appears to work.

[cjorasch]

@jthoms1 I tried the changes that were outlined and still get an error. Is there anything special you did to get it to work?

I have tried:

// package.json
"socket.io-client": "2.0.4"

// app.tsx
import io from 'socket.io-client';

When I build the app I get a bunch of warnings:

[07:15.9]  @stencil/core v0.6.18 🗻
[07:15.9]  build, app, dev mode, started ...
[07:16.0]  compile started ...
[07:23.4]  compile finished in 7.39 s
preferring built-in module 'punycode' over local alternative at '/Users/.../punycode.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
preferring built-in module 'punycode' over local alternative at '/Users/.../punycode.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
preferring built-in module 'string_decoder' over local alternative at '/Users/.../string_decoder.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
preferring built-in module 'string_decoder' over local alternative at '/Users/.../string_decoder.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
[07:31.3]  generate bundles started ...
[07:31.4]  generate bundles finished in 40 ms
[07:31.4]  generate app files started ...
[07:31.4]  generate app files finished in 23 ms

[ WARN  ]  'bufferutil' is imported by node_modules/ws/lib/BufferUtil.js, but could not be resolved – treating it as an
           external dependency

[ WARN  ]  'bufferutil' is imported by commonjs-external:bufferutil, but could not be resolved – treating it as an
           external dependency

[ WARN  ]  'utf-8-validate' is imported by node_modules/ws/lib/Validation.js, but could not be resolved – treating it
           as an external dependency

[ WARN  ]  'utf-8-validate' is imported by commonjs-external:utf-8-validate, but could not be resolved – treating it
           as an external dependency

[07:32.1]  build finished, watching for changes... in 16.20 s

When I run the app, the app fails to load

app.core.js:1779 TypeError: Failed to resolve module specifier "bufferutil". 
Relative references must start with either "/", "./", or "../". 

[bitflower]

Hi @cjorasch,

I have it running for a couple of weeks with this code (Typescript):

// Socket.IO client
import io from 'socket.io-client';

const ioFunc: any = (io as any).default ? (io as any).default : io;
const socket: any = ioFunc('http://localhost:3030', {
  transports: ['websocket'],
  forceNew: true
});

EDIT:

I have added the module exclusively to my project as well (package.json):

"dependencies": {
   ...
    "bufferutil": "^3.0.3",
   ...
    "utf-8-validate": "^4.0.0"
  },

Anyway, it's a workaround. So rollup/Stencil don't seem to resolve this correctly....

[kirillgroshkov]

Same. Workaround didn't work for me, getting error in the console:

app.core.js:1814 TypeError: Cannot read property 'fd' of undefined
    at Function.useColors (app-footer.js:4645)
    at createDebug (app-footer.js:3968)
    at app-footer.js:5184
    at createCommonjsModule (app-footer.js:40)

[kirillgroshkov]

Sadly it's blocking us to continue using Stencil for our projects...

[bitflower]

Check this issue. The fd erro relates to th ‚debug‘ module: #494

As a heavy workaround I habe exchanged all node.js files of each debug copy in node_modules with browser.js.

Ugly I know.

But my gut feeling and trust in Stencil is just too good ;-)

[kirillgroshkov]

I came up with a workaround to load socketio-client dynamically (not to bundle it at all), like this: https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file

Then it exposes window.io and here we go.

Kind of defeats the purpose of stencil and bundling, but works for now.

[gabouh]

I came up with a workaround to load socketio-client dynamically (not to bundle it at all), like this: https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file

Then it exposes window.io and here we go.

Kind of defeats the purpose of stencil and bundling, but works for now.

Could you elaborate on how you had success with dynamic loading of the library?

[kirillgroshkov]

Approach similar to this:

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");  // create a script DOM node
    script.src = url;  // set its src to the provided URL

    document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

Loading from e.g unpkg.com

[danawoodman]

I too am unable to get this working

// package.json
"socket.io-client": "2.2.0"

import io from 'socket.io-client'

[ ERROR ]  Rollup: Missing Export: src/components/app-home/app-home.js:2:7
           'default' is not exported by
           ../node_modules/socket.io-client/lib/index.js

      L1:  import io from 'socket.io-client';
      L2:  export class AppHome {

[08:00.8]  rebuild failed, watching for
           changes... in 1.45 s

Is this the Rollup config that is the issue?

[m1nka]

I'm also having the issue that I cannot get stenciljs to work with socket.io-client. Any more suggestions how to solve this elegantly?

[bitflower]

Hey guys, I think the secret is a Stencil config like this:

import { Config } from '@stencil/core';
//import { sass } from '@stencil/sass';
import builtins from 'rollup-plugin-node-builtins';

export const config: Config = {
...
  plugins: [
    //sass(),
    builtins()
  ],
  nodeResolve: {
    browser: true,
    preferBuiltins: true // Workaround for https://github.com/ionic-team/stencil/issues/1326
  },
...
};

Note the browser: true.

[OgheneMichael]

@bitflower

The Stencil config fixed it for me...

Thank you

[AnonymousArthur]

@bitflower
This one works.
Thank you!

[jpchip]

The fix from @bitflower doesn't work in Stencil One (1.0.0-beta.2).

Using:

// package.json
"rollup-plugin-node-builtins": "2.1.2",
"socket.io-client": "2.2.0"

// app.tsx
import io from 'socket.io-client';

And the config from bitflower's post above, I get this error on npm start:

[ ERROR ]  Rollup: Invalid External Id
           'C:\workspace\my-components\node_modules\@stencil\core\dist\sys\src\empty.js' is imported as an
           external by
            C:\workspace\my-components\node_modules\@stencil\core\dist\sys\src\empty.js?commonjs-proxy, but is
           already an existing non-external module id.

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           'C:\workspace\my-components\node_modules\@stencil\core\dist\sys\src\empty.js' is imported by
            C:\workspace\my-components\node_modules\@stencil\core\dist\sys\src\empty.js?commonjs-proxy, but could
           not be resolved – treating it as an external dependency

Any thoughts?

[simonhaenisch]

@jpchip #1551 reports the same kind of error... I think it might be a bug.

[jpchip]

Hey, Stencil 1.0.0 still seems to have this issue (it works in 0.18.1-0). Any possible work arounds y'all can think of? I would love to upgrade to 1.0.0 but this is blocking me. I can throw together a repo with just this problem if that helps.

[jpchip]

I created a project recreating the specific problem, posting here so things don't get lost:

https://github.com/jpchip/stencil-socketio

[jpchip]

This issue is resolved in stencil v1.0.1! Thanks @manucorporat

8b4597c