question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warning related to webpack source maps: WARNING in ./node_modules/base64-arraybuffer/dist/base64-arraybuffer.es5.js

See original GitHub issue

Describe the bug

When using version 4.4.0 of socket.io-client in a React app created with create-react-app, which in turn uses webpack for creating source maps, I get the following warning when starting the app with npm run start:

WARNING in ./node_modules/base64-arraybuffer/dist/base64-arraybuffer.es5.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from ‘/project-directory/node_modules/src/index.ts’ file: Error: ENOENT: no such file or directory, open ‘/project-directory/node_modules/src/index.ts’ @ ./node_modules/engine.io-parser/build/esm/decodePacket.browser.js 2:0-44 38:20-26 @ ./node_modules/engine.io-parser/build/esm/index.js 2:0-45 27:26-38 39:0-68 @ ./node_modules/engine.io-client/build/esm/socket.js 6:0-44 113:16-24 586:18-26 @ ./node_modules/engine.io-client/build/esm/index.js 1:0-37 2:0-18 3:24-39 @ ./node_modules/socket.io-client/build/esm/manager.js 1:0-75 23:4-25 116:22-28 @ ./node_modules/socket.io-client/build/esm/index.js 2:0-39 26:13-20 29:22-29 45:2-9 63:0-79 @ ./src/services/SocketClient.js 3:0-34 9:25-27 @ ./src/components/App/App.js 17:0-59 84:35-48 @ ./src/index.js 9:0-39 12:33-36

1 warning has detailed information that is not shown. Use ‘stats.errorDetails: true’ resp. ‘–stats-error-details’ to show it.

webpack 5.65.0 compiled with 1 warning in 2358 ms

To Reproduce

Socket.IO client version: 4.4.0

Client

import io from 'socket.io-client';
import {isAPIBaseURLValid} from '../utilities';

const API_BASE_URL = 'http://localhost:8080';

let socketClient;
if (isAPIBaseURLValid(API_BASE_URL)) {
    socketClient = io(API_BASE_URL);
    socketClient.on('connect', () => {
        console.log(socketClient.id);
    });
}

export default socketClient;

Expected behavior No warning should be displayed

Platform:

  • Device: Mac
  • OS: macOS Monterey 12.1

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:12
  • Comments:19 (6 by maintainers)

github_iconTop GitHub Comments

4reactions
darrachequesnecommented, Jan 17, 2022

OK, so we went ahead and forked the base64-arraybuffer package.

This should be fixed by https://github.com/socketio/base64-arraybuffer/commit/d30e7cc877d6fd68555856b611e3f22940b00f4d, included in engine.io-parser@5.0.3 (and thus in latest socket.io-client version, as it is a transitive dependency).

2reactions
darrachequesnecommented, Jan 12, 2022

@kaaax0815 unfortunately, I don’t think this is possible.

We are waiting for a response from the maintainer of the base64-arraybuffer package. Else, I think we will have to temporarily fork the project to include it here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack Module Warning: Failed to parse source map from ...
js ): Failed to parse source map from "data" URL: data:application/json;charset=utf-8;base64,eyJ2ZXJza [...] My webpack.config.js looks like ( ...
Read more >
webpack 5: Failed to parse source map from "@mswjs ...
I've the same warning after updating create react app. I see the warnings after npm start. All the warning are about @mswjs/interceptors at ......
Read more >
source-map-loader - webpack
The source-map-loader extracts existing source maps from all JavaScript entries. This includes both inline source maps as well as those linked via URL....
Read more >
JavaScript Debugging with Sourcemaps - TrackJS
We're using Webpack, so in our case, generating a sourcemap is a simple configuration tweak. Within our webpack config file, we set devtool:...
Read more >
Problem loading source maps in blockly-webpack sample
I am trying to test a plugin that I've been working on. Testing it in the environment set up by @blockly/create-package is working...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found