Module parse failed: Unexpected token (8:39)

Question

Not able to build the code in Azure build machines. It gives - Module parse failed: Unexpected token (8:39).You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file Node version - 12.x

enter image description here

Using node version 14.x

Answer 1

Make sure you install a necessary webpack loader in your project:-

npm install --save-dev babel-loader @babel/core @babel/preset-env

And then update your webpack.config.js like below:-

module.exports = {
    // other configuration options...
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            }
        ]
    }
};

I tried building one NodeJs app with webpack by Azure Devops Yaml pipeline below and it built successfully:-

Select > Pipelines > Nodejs with webpack >

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g webpack webpack-cli --save-dev
    npm install
    npx webpack --config webpack.config.js
  displayName: 'npm install, run webpack'

To Build and Deploy your app in Azure Web App:-

trigger:
- main

variables:

  azureSubscription: '6xxxxxxdaa10'

  webAppName: 'valleywxxx'

  environmentName: 'valleywebApp98'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

    steps:
    - task: ArchiveFiles@2
      displayName: 'Archive files'
      inputs:
        rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool:
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureRmWebAppDeployment@4
            displayName: 'Azure App Service Deploy: vallxxxxx'
            inputs:
              ConnectionType: 'AzureRM'
              azureSubscription: 'xxxxxxxxn (xxxxxxxx7cb2a7)'
              appType: 'webAppLinux'
              WebAppName: '$(webAppName)'
              packageForLinux: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              RuntimeStack: 'NODE|18-lts'
              StartupCommand: 'npm run start'
              ScriptType: 'Inline Script'
              InlineScript: |
                npm install
                npm run build --if-present