Is there a way to exclude files from the bundle in production?

[lukesmurray]

I have some mock data which I use for testing in dev but it's getting bundled with the rest of my code in the production build. Is there a way to avoid bundling mock files in production?

// in file which imports a mock server

if (process.env.NODE_ENV === "development")) {
  const { worker } = require("../mocks/browser");
  worker.start();

// in file which starts a mock server
import { setupWorker } from "msw";
import { handlers } from "./handlers"; // handlers import the mock data

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers);

[ChristianMurphy]

Use code splitting https://create-react-app.dev/docs/code-splitting to keep the part you don't want to load in production, in it's own chuck that only loads when the conditional allows it to.

[lukesmurray]

Thank you that is the answer.

Changing the require to an import solved the issue.

if (process.env.NODE_ENV === "development")) {
  const { worker } = import("../mocks/browser").then(({worker}) => { worker.start()});

[pikilon]

Thank you that is the answer.

Changing the require to an import solved the issue.

if (process.env.NODE_ENV === "development")) {
  const { worker } = import("../mocks/browser").then(({worker}) => { worker.start()});

I had your same problem with the imports (I was using dexie and it was blocked, the async imports where not compiled the same way and lot's of errors) this solution, include less test code in production and also hide the file path.

if (process.env.REACT_APP_MOCK_SERVER) require(process.env.REACT_APP_MOCK_SERVER);

// package.json
  "scripts": {
    "start": "react-scripts start",
    "start:mock": "REACT_APP_MOCK_SERVER=./mocks/browser yarn start",

the browser.js has a self executing async function and does all the worker.start() stuff

[florianmatz]

@pikilon Could you provide your browser.js file for further knowledge sharing? That would be highly appreciated!

[tabareptr]

Thanks for the insight @pikilon ! Putting the dir on an env var worked like a charm.

[pikilon]

@pikilon Could you provide your browser.js file for further knowledge sharing? That would be highly appreciated!

I can't, sorry. But instead of importing and executing the code like this

// in file which imports a mock server

if (process.env.NODE_ENV === "development")) {
  const { worker } = require("../mocks/browser");
  worker.start();

Inside the browser.js execute the worker.start() and you only need the require to work

[dwjohnston]

Assuming this is following the MSW setup instructions, isn't your service worker still going to be running in this scenario?

[pikilon]

Assuming this is following the MSW setup instructions, isn't your service worker still going to be running in this scenario?

When I tested it, it worked in development but it didn't in production as intended.