How to import node module or JavaScript file without webpack dependency when using create-react-app?

manpreet Best Answer 3 years ago

I'm trying to include a separate JavaScript file (server.js) from my index.js file using create-react-app. This server.js file uses the npm zeromq node module which doesn't seem to play well with webpack. Because of this, I'm either trying to exclude the zeromq node module or server.js.

I'm made attempts to edit webpack.config.js with no luck. Some of what I I've tried:

{
  ...
  test: /\.(js|mjs|jsx)$/,
  exclude: /server\.js$/,
  ...
}

Unfortunately all the examples I have found look nothing like the config file I currently have. My generated config from project/node_modules/webpack/config looks something like this...

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

// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
  const isEnvDevelopment = webpackEnv === 'development';
  const isEnvProduction = webpackEnv === 'production';
...

I import the server.js file from index.js in a standard way.

import './server.js'

manpreet 3 years ago

So it's possible that your issue is that you just need to have

import server from './server.js';

Or whatever specific module it is you need. That being said, if you are having issues with something being incompatible with webpack it might be worth trying a require statement instead. So something like:

const server = require('./server.js');

Also have you ejected your react app? It's often easier to modify parts of your build scripts if you've ejected an app created with create-react-app.