Webpack error in CRA after adding react-markdown

Question

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;
};

Jak2k · Accepted Answer · 2022-07-28 19:14:48Z

2

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;
};

answered Jul 28, 2022 at 19:14

Jak2k

1451 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Dom · Accepted Answer · 2022-07-28 19:02:02Z

1

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

answered Jul 28, 2022 at 19:02

Dom

40.7k12 gold badges56 silver badges83 bronze badges

1 Comment

Jak2k Over a year ago

I use CRA. So I can't directly access that config, but I have an override.js

Collectives™ on Stack Overflow

Webpack error in CRA after adding react-markdown

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related