Webpack error in CRA after adding react-markdown-CodePudding

I'v added a library called "react-markdown" and now it doesn't compiles and shows this error. How can I fix it?

 The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

config-overried.js:

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  ]);
  return config;
};

CodePudding user response：

Without seeing your webpack.config.js it is hard to say, but I've come across something similar in the past.

Try adding to your webpack.config.js:

resolve: {
  // add '.mjs' (make sure to include your other file types)
  extensions: ['.mjs'],
},
module: {
  rules: [
    // ...existing rules

    {
      test: /\.m?js/,
      resolve: {
        fullySpecified: false,
      },
    }
  ]
},

Hopefully this helps

CodePudding user response：

config-overrides:

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  ]);
  config.resolve.extensions.push('.mjs');
  config.module.rules.push({
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  })
  return config;
};