It doesn't work with the latest react-app-rewire and customize-cra

[baurine]

Hi @raodurgesh , I just need this kind feature recently so I tried this lib, but unfortunately, it doesn't work for my project, report the following error message after running yarn start:

.../node_modules/webpack/lib/Compiler.js:713
		throw this._error();
		^

Error: Content and Map of this Source is no longer available (only size() is supported)
    at SizeOnlySource._error (.../node_modules/webpack/lib/Compiler.js:699:10)
    at SizeOnlySource.source (.../node_modules/webpack/lib/Compiler.js:713:14)
    at .../node_modules/react-app-rewire-build-dev/dist/write-file.js:151:47
    at .../node_modules/lodash/lodash.js:4905:15
    at baseForOwn (.../node_modules/lodash/lodash.js:2990:24)
    at .../node_modules/lodash/lodash.js:4874:18
    at Function.forEach (.../node_modules/lodash/lodash.js:9342:14)
    at handleAfterEmit (.../node_modules/react-app-rewire-build-dev/dist/write-file.js:131:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.../node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (.../node_modules/tapable/lib/Hook.js:154:20)
    at asyncLib.forEachLimit.err (.../node_modules/webpack/lib/Compiler.js:482:27)
    at .../node_modules/neo-async/async.js:2818:7
    at done (.../node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.../node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at outputFileSystem.writeFile.err (.../node_modules/webpack/lib/Compiler.js:447:33)
    at MemoryFileSystem.writeFile (.../node_modules/memory-fs/lib/MemoryFileSystem.js:328:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: .../.nvm/versions/node/v10.15.3/bin/node
Arguments: /usr/local/Cellar/yarn/1.21.1/libexec/lib/cli.js run watch

Can you have a look when you are free, thanks!

My project use:

"react-app-rewired": "^2.1.5",
"customize-cra": "^0.9.1",

The config-overrides.js:

const { override } = require('customize-cra')
const addYaml = require('react-app-rewire-yaml')
const reactAppRewireBuildDev = require('react-app-rewire-build-dev')

const watchDev = () => (config) => {
  console.log(process.env.NODE_ENV)
  if (process.env.NODE_ENV === 'development') {
    const options = {
      outputPath: './build',
      basename: '/dashboard',
    }
    config = reactAppRewireBuildDev(config, process.env, options)
  }
  return config
}

module.exports = override(watchDev(), addYaml)

[raodurgesh-zz]

Hi @baurine,I apologize for the inconvenience. This plugin is not updated to work with latest version of webpack-dev-server.
Now, Webpack-dev-server has inbuilt feature for writeToDisk option.

Below are the steps, If use want this feature with react-app-rewire :

You have to create a 'config-overrides.js' as suggested by react-app-rewire

and paste the following code in config-overrides.js:

/* config-overrides.js */

const fs = require('fs');
const path = require('path');
let outputPath = '../my-server/dist';
module.exports = {
  webpack: function(config, env) {
    const appDirectory = fs.realpathSync(process.cwd());
    const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
    config.output.path = resolveApp(outputPath);
    return config;
  },

  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.writeToDisk = true;
      return config;
    };
  }
};

[baurine]

Hi @raodurgesh , thanks for your reply, I will have a try later.