Workarounds for trim ReDOS and Next JS Internal Server Errors

[samcodee]

Note:- This is not exactly a bug. This library is not maintained. I have found some workarounds and created this for people who use this library and face issues like npm audit reporting vulnerabilities, Next JS 11 Internal Server Error. Depending on the time, this may or may not work. Use it at your own risk. It is advised to backup your project.

Workaround for npm audit ReDOS flag:-

When I first used this, I found out that it had 2 severe vulnerabilities. I checked it out and found out that it had to do with the "trim" dependency of the package remark-parse.

The remark-parse package uses the old version of the trim package. Version 0.0.1 & 0.0.2 is flagged by npm audit due to ReDOS (Regular Expression Denial of service). This issue may also happen in the next-mdx-remote package. This flag can be ignored in most cases. If you would like to fix it, here is the workaround :-

1. Add the resolutions property in your package.json file. Add a object with the property of trim and the value of a version above 0.0.2. Here's my package.json file:-

{
  "name": "samcodee-blog",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
  },
  "dependencies": {
    "gray-matter": "^4.0.3",
    "next": "^10.0.0",
    "next-compose-plugins": "^2.2.1",
    "next-mdx-enhanced": "^5.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2"
  },
  "resolutions": {
    "trim": "^1.0.1"
  }
}

2. Install Yarn package manager. This is required for the next step. The next Step cannot be done using npm. For this workaround, Yarn should be used. After the workaround, you can use npm / Yarn, depending on your preference.

3. Delete the node_modules folder. Run yarn install to install the dependencies with the new version of trim. To maintain the lock file integrity, delete the existing package-lock.json file and run npm i --package-lock-only to generate the new lock file. Now, you can delete the yarn.lock file.

Here's a script doing all of this for you:-

del package-lock.json && rmdir /S node_modules && yarn && npm i --package-lock-only && del yarn.lock 

When running this, this will ask confirmation to delete the node_modules folder. You can enter "Y" to proceed

4. [Optional] Incase you lose the package-lock.json file, you will have to repeat the steps again. So, you can add a script in the package.json file. For example:-

"scripts": {
    "redos":"del /S package-lock.json && rmdir /S node_modules && yarn && npm i --package-lock-only && del yarn.lock "
  }

Now running npm run redos, will do all the steps above.

5. Run npm audit to check for vulnerabilities. It will not include the remark-parse ReDOS vulnerability. In some cases, it might be zero. Like mine:-

6. Now, if you lose the node_modules folder, don't worry. If you have the package-lock.json file you generated before, you can run npm install like every time you would do to install the dependencies. You should commit the package-lock.json file so that others using your project can just run npm install to install the correct dependencies instead of following the steps again. You will have to run npm run redos if you lose the package-lock.json file, as mentioned in Step 4.

Note:- “Regular Expression Denial of Service” means that there is a regex in the trim package that, with malicious input, could become very slow. So an attacker can craft a special configuration string that, when passed to trim, could slow it down exponentially. In some cases, this can be safely ignored.

Workaround for Internal Server Error on Next JS 11:-

I first came across this project through this post - https://spacejelly.dev/posts/how-to-source-mdx-content-in-next-js-to-dynamically-create-pages-for-a-blog/

I thought I will create blog with this package. I created a new Next app using npx create-next-app samcodee-blog as said in the post. It was smooth until Step 2. After following Step 2, I ran npm run dev to start the server as mentioned in the post and navigated to http://localhost:3000 . After it loaded, I only saw a text saying Internal Server Error :-

This happened with every route. Even http://localhost:3000/posts/hello-world . So, I thought it would be useful to check his GitHub repository and my local code for any mistakes/changes. Nothing was changed except the dependency version of Next JS. It was ^10.2.0 on his code and ^11.2.x on my code. I installed 10.2.0 on my code and suddenly, it worked !

This happens because Next JS adopted Webpack 5 in Versions above 11. This package does not support Webpack 5. There is only one way to overcome this - downgrade to Next JS Version 10.x.x. But, you might lose many new features in Next JS 11. I found out the you can disable Webpack 5 and use Webpack 4.

Workaround:-

First, upgrade your next package version to the latest by running npm install next@latest --force ( --force because in some new versions of npm, it will give a error. ). Next, add this line in your next.config.js - webpack5: false. I use next-compose-plugins package for my next.config.js. So, here's my next config file:-

const composePlugins = require("next-compose-plugins");
const withMdxEnhanced = require("next-mdx-enhanced");

module.exports = composePlugins(
  [
    withMdxEnhanced({
      // next-mdx-enhanced config
    }),
  ],
  {
    webpack5: false
  }
);

If you don't use next-compose-plugins package, yours might look something like this:-

const withMdxEnhanced = require('next-mdx-enhanced')

module.exports = withMdxEnhanced({
  // next-mdx-enhanced config
})({
webpack5: false
})

---

If you are a maintainer of this project and you are reading this, please add these workarounds in the README.md file so that people can use it more easily.

Anyways, thank you @hashicorp for developing such a amazing package! 😀

[YannickAWE]

This is so useful thank you so much @samcodee!
I'm now able to use this plugin on Next 11 with webpack5: false