CODEWITHSUNDEEP
javascriptnode.jsreactjswebpacksocket.io
Emily Soto
Emily Soto

Reputation: 41

"socket_io_client__WEBPACK_IMPORTED_MODULE_7__.io is undefined" when using SocketIO with React

So I've been trying to get this to work, but it keeps telling me that socket.io is undefined. I looked at some similar problems people have had with webpack and React, and have currently tried putting socket.io and all of node_modules in the externals part of webpack.config.js. At this point, I'm not quite sure what's going on. If it helps, I'm running a flask backend with flask_socketio running too.

webpack.config.js:


const appPackageJson = require(paths.appPackageJson);

// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

const webpackDevClientEntry = require.resolve(
'react-dev-utils/webpackHotDevClient'
);
const reactRefreshOverlayEntry = require.resolve(
'react-dev-utils/refreshOverlayInterop'
);

// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';

const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
);

// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);

// Get the path to the uncompiled service worker (if it exists).
const swSrc = paths.swSrc;

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
 return false;
}

try {
 require.resolve('react/jsx-runtime');
 return true;
} catch (e) {
 return false;
}
})();

var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
 return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
 nodeModules[mod] = 'commonjs ' + mod;
});

// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
externals: nodeModules;
//lots of webpack stuff
};

socketio initialization:

import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import './component_styling/main.scss'
import axios from 'axios'
import AppRouter from './Components/Router'
import {io} from 'socket.io-client'
export const axios_instance = axios.create({
  baseURL: 'http://127.0.0.1:5000'
});

const socket = io.connect("http://127.0.0.1:5000");

axios_instance.interceptors.request.use(
function(config) {
  const token = localStorage.getItem("token"); 
  if (token) {
    config.headers["Authorization"] = 'Bearer ' + token;
  }
  return config;
},
function(error) {
  return Promise.reject(error);
}
);

ReactDOM.render(
  <React.StrictMode>
    <AppRouter />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();
export default socket;

Upvotes: 1

Views: 1116

Answers (1)

Emily Soto
Emily Soto

Reputation: 41

If anyone was wondering, I fixed this.

Switched import {io} from 'socket.io-client' to import io from 'socket.io-client'

Upvotes: 1

Related Questions