Search code examples
typescriptwebpack

Webpack - path is not defined

I have axios library installed by npm, when I use webpack for importing axios in my Typescript file, I have configured webpack for my project but when I run npm run build I get weird error

this is what I get

EDITED:

> [email protected] build C:\Users\lenovo\Desktop\Web Dev Stuff\pentle
> webpack

[webpack-cli] Failed to load 'C:\Users\lenovo\Desktop\Web Dev Stuff\pentle\webpack.config.js' config
[webpack-cli] ReferenceError: path is not defined
    at Object.<anonymous> (C:\Users\lenovo\Desktop\Web Dev Stuff\pentle\webpack.config.js:17:11)
    at Module._compile (C:\Users\lenovo\Desktop\Web Dev Stuff\pentle\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (C:\Users\lenovo\Desktop\Web Dev Stuff\pentle\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at WebpackCLI.tryRequireThenImport (C:\Users\lenovo\Desktop\Web Dev Stuff\pentle\node_modules\webpack-cli\lib\webpack-cli.js:32:22)
    at loadConfig (C:\Users\lenovo\Desktop\Web Dev Stuff\pentle\node_modules\webpack-cli\lib\webpack-cli.js:1536:38)
    at WebpackCLI.resolveConfig (C:\Users\lenovo\Desktop\Web Dev Stuff\pentle\node_modules\webpack-cli\lib\webpack-cli.js:1639:44)     
npm ERR! code ELIFECYCLE
npm ERR! errno 2        
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lenovo\AppData\Roaming\npm-cache\_logs\2021-07-10T16_15_49_549Z-debug.log
PS C:\Users\lenovo\Desktop\Web Dev Stuff\pentle>

this is my package.json

{
  "name": "pentlee",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "axios": "^0.21.1",
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.5",
    "webpack-cli": "^4.7.2",
    "webpack": "^5.44.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "\"  \""
  },
  "author": "",
  "license": "ISC"
}

and this is my webpack.config.js

module.exports = {
  entry: "./public/ts/mainPage.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "mainPage.js",
    path: path.resolve(__dirname, "public/distSrc"),
  },
};

also I tried to change in webpack cofig file, / this to ./ but still doesn't work, what I do wrongly? enter image description here

Solution

  • You are using the path library without importing it.

    Add the following line to the top of your webpack.config.js file:

    const path = require('path');

    or

    import path from 'path';