在Webpack项目中获取“未捕获的TypeError：path.parse不是函数”

Question

I am trying to setup a React project using Webpack. It's a simple app that loads an mdx file and parses it. When I try to run the app it returns 'Uncaught TypeError: path.parse is not a function'

I have tried importing parse from 'path' and importing parse from 'path-browserify' but it's still not working

index.js:

import React, { lazy, Component, Suspense } from "react";
import { importMDX } from "mdx.macro";
import ReactDOM from "react-dom";
// import path from "path";
// import { parse } from "path";
import path from "path-browserify";
// import { parse } from "path-browserify";

const Content = lazy(() => importMDX("./index.mdx"));

class App extends Component {
    render() {
        return (
            <div>
                <Suspense fallback={<div>Loading...</div>}>
                    <Content />
                </Suspense>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
    entry: "./index.js",
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.mdx?$/,
                use: ["babel-loader", "@mdx-js/loader"]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./index.html",
            filename: "./index.html"
        })
    ],
    node: {
        fs: "empty",
        module: "empty"
    }
};

package.json:

{
    "name": "doc",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "webpack-dev-server --open --mode development",
        "build": "webpack --mode production"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.5.5",
        "@babel/preset-env": "^7.5.5",
        "@babel/preset-react": "^7.0.0",
        "@mdx-js/loader": "^1.4.0",
        "babel-loader": "^8.0.6",
        "fs": "0.0.1-security",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "path": "^0.12.7",
        "path-browserify": "^1.0.0",
        "webpack": "^4.39.2",
        "webpack-cli": "^3.3.7",
        "webpack-dev-server": "^3.8.0"
    },
    "dependencies": {
        "@mdx-js/react": "^1.4.0",
        "mdx.macro": "^0.2.8",
        "react": "^16.9.0",
        "react-dom": "^16.9.0"
    }
}

Error:

Uncaught TypeError: path.parse is not a function
    at Function.module.exports.sync (index.js:28)
    at Function.module.exports.sync (index.js:8)
    at module.exports (index.js:17)
    at eval (mdx.macro.js:11)
    at Object../node_modules/mdx.macro/mdx.macro.js (main.js:11066)
    at __webpack_require__ (main.js:20)
    at eval (index.js:4)
    at Module../index.js (main.js:97)
    at __webpack_require__ (main.js:20)
    at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:2:18)

Answer 1

You don't need to include extra dependency for path . path is global dependency of node js.

npm remove path or yarn remove path

and

npm remove path-browserify or yarn remove path-browserify

and clear node cache

npm clear cache

can you try this?