Search code examples
reactjsnode.jsnpmwebpackbitbucket-pipelines

Bitbucket ci cd sh: 1: webpack: not found

I am trying to setup ci cd for my react project using bitbucket pipeline. The react project setup is done using webpack. But for some reason same is not working on bitbucket. Below is my package json

Package.json

{
  "name": "widget",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^6.0.1",
    "@mui/material": "^6.0.1",
    "axios": "^1.1.3",
    "copy-webpack-plugin": "^11.0.0",
    "dotenv-webpack": "^8.0.1",
    "jquery": "^3.6.1",
    "preact": "^10.11.1",
    "preact-router": "^4.1.0",
    "query-string": "^8.2.0",
    "react-masonry-css": "^1.0.16",
    "react-select": "^5.8.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/preset-env": "^7.19.3",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "style-loader": "^3.3.1",
    "svg-inline-loader": "^0.8.2"
  }
}

Below is my bitbucket-pipelines.yml

image: node:16

definitions:
  steps:
    - step: &install_dependencies
        name: Install Dependencies
        caches:
          - node
        script:
          - npm -v
          - node -v
          - npm install # Use npm ci for CI/CD environment
          - npm install -D webpack webpack-cli
          - ls -la node_modules
          - ls -la node_modules/.bin  # Verify that webpack is in node_modules/.bin
pipelines:
  branches:
    master:
      - step: *install_dependencies
      - step: 
          name: Build Dev
          script:
            - export CI=true 
            - export PATH=$PATH:$(pwd)/node_modules/.bin  # Ensure node_modules/.bin is in the PATH

            - |
              echo "CLINIC_APP_BASE_URL=https://api.review-manager.growthemr.com/" >> .env.development
              echo "CLINIC_APP_EMR_URL=https://api.growthemr.com/" >> .env.development
              echo "CLINIC_APP_FEEBACK_FORM_SCRIPT=https://devemr.growthemr.com/assets/js/form-tracking.js" >> .env.development
              echo "CLINIC_APP_FEEBACK_FORM_URL=https://devemr.growthemr.com/assets/static/form.html" >> .env.development
              echo "CLINIC_WEBAPP_BASE_URL=https://reviews.growthemr.com/" >> .env.development
              
            - npm run build  
            - ls -la dist
          artifacts:
            - dist/**

I am continously getting error

+ npm run build
> [email protected] build
> webpack --mode production
sh: 1: webpack: not found

I have also tried npx webpack --mode production but then it gives error on stderr

npx webpack --mode production
ls -la dist
npm WARN exec The following package was not found and will be installed: [email protected]
CLI for webpack must be installed.
  webpack-cli (https://github.com/webpack/webpack-cli)
We will use "npm" to install the CLI via "npm install -D webpack-cli".
2024-12-11T16:10:57.388070735Z stderr P Do you want to install 'webpack-cli' (yes/no):

Also below is the output in install phase where I can see that webpack is installed by doing ls -la node_modules enter image description here

enter image description here

Any help will be appreciated.

Solution

  • It seems that your Node modules (including dependencies like webpack and webpack-cli) are not shared between the different steps of your CI/CD pipeline runners. Specifically, you're running npm install in one step and npm run build in a separate step, where the build process is calling the webpack command.

    This can lead to issues where the necessary dependencies (such as webpackor webpack-cli) aren't available in the build step because they're not installed or cached properly in the second step.

    Suggested Solutions:

    1. Combine npm install and npm run build in the same step: This will ensure that all the necessary dependencies are available when you run the build command, and you won't run into issues with missing packages.
    2. Keep npm install and npm run build in separate steps, but install webpack and webpack-cli explicitly before the build step: If you prefer to keep the steps separate, ensure that you explicitly install webpack and webpack-cli before running the build. You can do this by adding the following command before your npm run build command:
    npm install -D webpack webpack-cli
npm run build

    While combining both steps into one is the most straightforward solution, installing the necessary build tools (like webpack and webpack-cli) explicitly before the build step should resolve your issue if you want to keep the steps separate. However, combining the steps is generally the preferred and cleaner approach.