Packing socketio client with webpack causes warning about no src\index.ts?

[joezappie]

I'm trying to package socket.io-client with webpack but its spitting out a warning. Seems to work, but I want to know why the warning is occuring.

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 'C:\Users\Joe\projects\mrp\node_modules\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\Joe\projects\mrp\node_modules\src\index.ts'
 @ ./node_modules/engine.io-parser/build/esm/decodePacket.browser.js 2:0-44 33:24-30
 @ ./node_modules/engine.io-parser/build/esm/index.js 2:0-45 23:30-42 32:0-68
 @ ./node_modules/engine.io-client/build/esm/socket.js 6:0-44 112:20-28 551: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-76 20:8-29 108:26-32
 @ ./node_modules/socket.io-client/build/esm/index.js 2:0-39 25:17-24 29:28-35 41:4-11 57:0-80
 @ ./app/app.js 1:0-38 6:15-17
 @ ./app/index.js 1:0-22 79:0-10 86:25-50 100:0-7 101:0-13

Its complaining that it cant find a typescript file in the src package. I checked my node_modules folder, and I do not have a src module. Installing 'src' from npm doesnt fix it. Is this the package its looking for?

https://www.npmjs.com/package/src

The line of code that's causing this warning is just an import of socket.io-client:

import { io } from 'socket.io-client';

[darrachequesne]

Hi! I was not able to reproduce the issue. Could you please provide your complete webpack configuration?

Update: I could in fact reproduce, please check there: niklasvh/base64-arraybuffer#32

[joezappie]

Here is my webpack config. I did just add the ignoreWarnings flag for source maps which has silenced it and is good enough for me to close this unless you have any ideas.

import path from 'path';
import { fileURLToPath } from 'url';

// Plugins
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CopyPlugin from 'copy-webpack-plugin';
import FaviconsWebpackPlugin from 'favicons-webpack-plugin';

const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename);

export default {
  entry: {
    app: path.resolve(dirname, 'app', 'index.js'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './app/template.html',
      filename: 'index.html',
    }),
    new CopyPlugin({
      patterns: [
        { from: './app/assets' },
      ],
    }),
    new FaviconsWebpackPlugin('./app/assets/svg/favico.svg'),
  ],
  module: {
    rules: [
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules(\/|\\)(?!(@feathersjs))/,
        loader: 'babel-loader',
      },
      {
        test: /\.js$/,
        enforce: 'pre',
        use: ['source-map-loader'],
      },
    ],
  },
  resolve: {
    modules: [path.resolve(dirname, './app/'), path.resolve('./node_modules')],
  },
  ignoreWarnings: [/Failed to parse source map/],
};

This might also be better off as an issue in the source-map-loader repo? Didn't realize it was generated from that module at the time and forgot I posted an issue.

[mraible]

I saw this in my console when updating this tutorial today and using the latest version of Create React App. https://developer.okta.com/blog/2021/07/14/socket-io-react-tutorial

…

On Wed, Dec 15, 2021 at 15:01 joe Jankowiak ***@***.***> wrote: Here is my webpack config. I did just add the ignoreWarnings flag for source maps which has silenced it and is good enough for me to close this unless you have any ideas. import path from 'path'; import { fileURLToPath } from 'url'; // Plugins import HtmlWebpackPlugin from 'html-webpack-plugin'; import CopyPlugin from 'copy-webpack-plugin'; import FaviconsWebpackPlugin from 'favicons-webpack-plugin'; const filename = fileURLToPath(import.meta.url); const dirname = path.dirname(filename); export default { entry: { app: path.resolve(dirname, 'app', 'index.js'), }, plugins: [ new HtmlWebpackPlugin({ template: './app/template.html', filename: 'index.html', }), new CopyPlugin({ patterns: [ { from: './app/assets' }, ], }), new FaviconsWebpackPlugin('./app/assets/svg/favico.svg'), ], module: { rules: [ { test: /\.m?js/, resolve: { fullySpecified: false, }, }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.jsx?$/, exclude: ***@***.***))/, loader: 'babel-loader', }, { test: /\.js$/, enforce: 'pre', use: ['source-map-loader'], }, ], }, resolve: { modules: [path.resolve(dirname, './app/'), path.resolve('./node_modules')], }, ignoreWarnings: [/Failed to parse source map/], }; This might also be better off as an issue in the source-map-loader repo? Didn't realize it was generated from that module at the time and forgot I posted an issue. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#4209 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAELZHSWOIUUPOQD4MVWFTUREF5FANCNFSM5JVKDFTA> .

[Aeden-B]

I have also the same warning since updating react-scripts to 5.0.0 (webpack 5.64.4)

[darrachequesne]

OK, I was finally able to reproduce, thanks 👍

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