DEV Community: Jakob von der Haar

[Fix][Azure DevOps] React with babel - No "exports" main resolved in @babel/helper-compilation-targets/package.json

Jakob von der Haar — Sat, 06 Jun 2020 15:16:42 +0000

Situation

Having a react app setup with create-react-app, using babel v7.8.3 and having a CI/CD pipeline in Azure DevOps, I noticed builds failing whilst trying to run npm install.

What happened?

The standard node version in Azure DevOps was increased from v12.16.3 to v12.17.0 which resulted in the error.

Trying to locate the actual problem I stumbled upon the following issue in the babel repository:

No "exports" main resolved in @babel/helper-compilation-targets/package.json #11216

Drogglbecher posted on Mar 05, 2020

Bug Report

Current Behavior Since an update to node 13.10.1 I have a problem while building an application with babel-loader:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in node_modules/@babel/helper-compilation-targets/package.json

Expected behavior/code It should build correctly

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

Filename: babel.config.js

const baseConfig = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry',
        corejs: 3,
      },
    ],
    '@babel/preset-react',
    '@babel/preset-flow',
    '@babel/preset-typescript',
  ],
  plugins: [
    'react-hot-loader/babel',
    'babel-plugin-styled-components',
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-syntax-dynamic-import',
    isTesting && 'babel-plugin-dynamic-import-node-babel-7',
  ].filter(Boolean),
};

module.exports = {
  sourceType: 'unambiguous',
  ...baseConfig,
  plugins: [
    'idx',
    '@babel/plugin-syntax-import-meta',
    '@babel/plugin-proposal-json-strings',
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
    '@babel/plugin-proposal-function-sent',
    '@babel/plugin-proposal-export-namespace-from',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-throw-expressions',
    'babel-plugin-macros',
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        root: ['./'],
        alias: {
          'react-router-dom': './packages/components/Router',
          '@@react-router-dom': './node_modules/react-router-dom',
        },
      },
    ],
  ],
  env: {
    test: {
      plugins: [
        ...baseConfig.plugins,
        '@babel/plugin-transform-modules-commonjs',
      ],
    },
  },
};

Environment

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 13.10.1 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.2 - /usr/local/bin/npm
  Monorepos:
    Yarn Workspaces: 1.22.0
  npmPackages:
    @babel/core: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-class-properties: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-decorators: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-export-namespace-from: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-function-sent: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-json-strings: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-numeric-separator: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-optional-chaining: ^7.8.3 => 7.8.3
    @babel/plugin-proposal-throw-expressions: ^7.8.3 => 7.8.3
    @babel/plugin-syntax-dynamic-import: ^7.8.3 => 7.8.3
    @babel/plugin-syntax-import-meta: ^7.8.3 => 7.8.3
    @babel/preset-env: ^7.8.3 => 7.8.3
    @babel/preset-flow: ^7.8.3 => 7.8.3
    @babel/preset-react: ^7.8.3 => 7.8.3
    @babel/preset-typescript: ^7.8.3 => 7.8.3
    babel-eslint: ^10.0.3 => 10.0.3
    babel-loader: ^8.0.6 => 8.0.6
    babel-plugin-idx: ^2.4.0 => 2.4.0
    babel-plugin-lodash: ^3.3.4 => 3.3.4
    babel-plugin-macros: ^2.8.0 => 2.8.0
    babel-plugin-module-resolver: ^4.0.0 => 4.0.0
    babel-plugin-styled-components: ^1.10.7 => 1.10.7
    eslint: ^6.8.0 => 6.8.0
    jest: ^25.1.0 => 25.1.0
    webpack: ^4.41.5 => 4.41.5

Possible Solution snowpack resolved the error like this. Maybe this could work here too.

Edits by @jlhwung

Solution This is a regression in Node.js. If you hit this issue from search engines, please choose one of the following solutions

update @babel deps to v7.8.7
use Node < 13.9
wait until nodejs/node#32107 is fixed! (Probably in the next Node.js patch release).

View on GitHub

Fastest Solution

The fastest solution was to simply define the node.js version in the build pipeline.

1. Add Node.js tool installer

Before running any npm comands in your pipeline add te Node.js tool installer as a task.

2. Configure Task

In the Node.js tool installer you are able to simply set the node version to for example 12.16.3.

Using the Node.js tool installer can add up to 10 seconds to your build process depending on the used agent.

React js ➡ Azure Devops ➡ Azure Storage ➡ Azure CDN (Part 1/2)

Jakob von der Haar — Wed, 20 May 2020 20:09:09 +0000

How to use Azure DevOps to build and release your static React js Web App to an Azure Storage Account which is made public using an Azure CDN profile, part 1:

Part 1 guides you step by step through a simple process of using Azure DevOps to build and release a static React js Web App (or any other Node.js based Web App), which is then hosted using an Azure Storage Account.

~~Part 2 guides you through creating an Azure CDN profile and connecting it to our storage account and release pipeline.~~

⚠ Part 2 is not yet available and might not will be finalized, as of writing this post in January 2020, Azure Static Web Apps was not yet publicly announced. Azure Static Web Apps was globally announced yesterday at the BUILD 2020 (19th of May, 2020) and is basically a very similar approach to the approach explained in this post with the difference that Azure Static Web Apps might be more comfortable to use, as it has all components of the explained approach in a single service. At the writing of this (20th of May, 2o20) Azure Static Web Apps is in preview and able to use, give it a try. I will not remove this blog post yet, so this alternative approach is explained for the moment. Please keep this in mind when reading this post, thank you! ⚠

✅ Requirements:

Azure Account (If you are a student, click here to find out how to get free Azure Ressources)
A React Web App
An Azure DevOps Service Account

Azure Storage Account
Build Pipeline
Release Pipeline

1. Azure Storage Account

First we need to create an Azure Storage Account that is used to host our React Web App later on using the static website feature of the Storage Account.

Login to the Azure portal and start the process of creating an new Storage Account. Choose the wanted subscription, name, location, replication level etc. Just make sure, to choose StorageV2 as account type.

When the Storage Account is created, open the resource and open the Static Website settings in the left sidebar.
Enable the feature and set the 'Index document name' and 'Error document path' to your index file of your react js build. In my case it is index.html.

After saving the settings, Azure will give you an primary endpoint under which the website will be available in the end. Moreover, it gives you the Azure Storage container in which the website's files need be uploaded for being available at the endpoint later on.

Before setting up our build and release pipeline we need to save a few keys and ids of the storage account.
We should remember the following settings for our release process:

the STORAGE_ACCOUNT_NAME you set when creating the Storage Account
the STORAGE_ACCOUNT_KEY which can be found in the Access Keys settings of the Storage Account. You can either pick key1 or key2.

You can either leave the page open or save these settings. I will refer to them later on as STORAGE_ACCOUNT_NAME and STORAGE_ACCOUNT_KEY.

2. Build Pipeline

Now, let's head over to our Azure DevOps Account to create a build pipeline.

Open the pipelines menu and create a new pipeline.

To make creating the build process for the first time a bit easier choose Use the classic editor. You can still get the Yaml file of our build process afterwards for future processes.

After that, choose the your respository for example on Github and set a default branch for manual and scheduled builds (for example master, depending on your branch structure).
Having set up the source of our build, we are able to choose a template, but we want to build our pipeline from an empty job, as seen in the screenshot.

Set the name of your pipeline (for example Build react-<app name>) and set an agent specification.

ℹ: I like to use vs2017-win2016, but you can also choose ubuntu-18.04 for example, which will also work with the standard setup we are doing in this guide.

Then click on add task (take a look at the screenshot if you have not build a pipeline with the visual editor before).

By using the search in the task list, you can find and add the npm task which allows you to run all npm commands.
For the sample project of this guide I only need to run npm install and npm run build. If you have further commands that need to be run before the build you can add them here, like setting environmental variables or running additional npm commands.

Add npm install and npm run build as npm task as shown in the screenshots below.

After the npm run build command finished, the build files will be available in the Build.SourcesDirectory of the build process. In this sample the build will be available in the build folder accessible via $(Build.SourcesDirectory)/build. Depending of your project the build files could also lie for example under $(Build.SourcesDirectory)/dist.
This is important for our next step as we will archive the build folder and drop it as artifact, which the release then will be able to use.

Firstly, add the Archive files task and configure it with the reference to the build folder as Root folder or file to archive - in our case $(Build.SourcesDirectory)/build - and $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zipas theArchive file to create`. Take the screenshot below as reference.

Secondly, add the Publish build artifacts task, which has no settings that we need to change.

Now our build pipeline is finished and we create our release.
‼ Do not forget to save the pipeline.

3. Release Pipeline

To create a release choose the Releases menu in the left sidebar and create a new release pipeline (shown in the screenshot below).

After creating a new release pipeline start with an Empty job again and add an artifact.

Choose the build pipeline we just created as source for the release's artifact.

Add a trigger to the release by enabling the Continuous deployment trigger and open the taks of the first and currently only stage of our release pipeline, as shown in the screenshot below.

Add a Extract files tasks and set the Archive file patterns to **/$(Build.BuildId).zip and the Destination folder to $(System.DefaultWorkingDirectory)/build.

Now we will deal with updating the files in our Azure Storage Account. Before uplaoding the files we first have to remove all files that are currently in the $web container of the Storage Account.

We can do that via the Azure CLI. Add the Azure CLI task and set the following properties:

Azure subscription: Choose the Azure subscription of your storage account. (ℹ You might have to authorize a connector.)
Script Location: 'Inline Script'
Inline Script: az storage blob delete-batch --account-name <STORAGE_ACCOUNT_NAME> --account-key <STORAGE_ACCOUNT_KEY> --source $web - remember the storage account information from step 1? You need to set these here.

For uploading our build files we will use another Azure CLI task with the following properties:

Azure subscription: Choose the Azure subscription of your storage account. (ℹ You might have to authorize a connector.)
Script Location: 'Inline Script'
Inline Script: az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --account-key <STORAGE_ACCOUNT_KEY> --destination $web --source $(System.DefaultWorkingDirectory)\build\build

Now you can access your React app via the primary endpoint. The next step would be to connect the static website with a content delivery network, which additionally gives us the option to connect a custom domain and a SSL certificate for the custom domain.

React js ➡ Azure DevOps ➡ Azure App Service

Jakob von der Haar — Fri, 31 May 2019 07:18:05 +0000

How to use Azure DevOps to build and deploy your React js Web App to Azure

This Post guides you step by step through a simple process of using Azure DevOps to deploy a React js Web App (or any other Node.js based Web App) to an Azure Web App Service.

✅ Requirements:

Azure Account (If you are a student, click here to find out how to get free Azure Ressources)
A running Azure Web App Service
A React Web App
An Azure DevOps Service Account

Build and Deployment

In the Azure DevOps portal go to the Builds tab of the Pipelines page. There you will have an overview of your previous builds and will later on also find the build status of your React Web App builds.

Create a new build pipeline and choose the location/service of your web app's repository. You will have to authorize the repository access if you are not using Azure Repository and do not have authorized your access before.

Then select the repository of your web app from the list (in the screenshot I am using Azure repositories, so the look of this menu might vary depending on your repository).

After choosing the repository Azure DevOps is trying to automatically create a Yaml file. In our case, it first defines which kind of VM-Pool we will be using to build our web app. Then it defines the steps of our build starting with installing Node.js and going on with installing the dependencies of our web app (npm install) and then running the build command of our web app (npm run build).
In end, the standard output is set to archiving the working directory or in other words our build.

Our goal is to also directly trigger a deployment to our Azure Web App Service, so we need to change the last task to:

- task: AzureRmWebAppDeployment@3
  displayName: 'Azure App Service Deploy: <YourWebAppNameHere>'
  inputs:
    azureSubscription: <YourAzureSubscriptionId>
    WebAppName: <YourWebAppNameHere>
    Package: '$(System.DefaultWorkingDirectory)/build'

You still need to put in your Azure Subscription Id and the name of your web app, so Azure DevOps knows where you want to deploy the build. Moreover, we define in the last line where our build is located, to make sure only our final build is deployed.

The Yaml file you just created will be added to the repository as azure-pipelines.yml. So if you need to configure additional steps like tests you just have to edit the Yaml file in your repository. Furthermore, if you are editing the file online in Azure DevOps it will show you a list of tasks to add in which you also are able to configure each task using a UI.

Of course, you could (and for bigger projects should) explicitly divide the build and deployment.
Now every time you merge new commits into your production branch, a new build will be triggered.

And that is everything you need to do to have a basic build and deployment process running, have fun! 🐱‍💻

How to: Let's Encrypt Certificates for Azure Web App Service

Jakob von der Haar — Thu, 30 May 2019 19:01:36 +0000

How to secure your Azure Website with SSL for free in minutes 🔒

In this post, I will guide you step by step through the process of including free Let's Encrypt Certificates for any Web App hosted by the Web App Service on Azure.
The catch with Let's Encrypt SSL Certificates is that they only last for 90 days. But hey, nothing automation couldn't solve.

This tutorial will be based on the Azure Web App Site Extension "Azure Let's Encrypt" by Simon J.K. Pedersen.
(Small Disclaimer: The site extension is not supported by Microsoft, I am using it for many smaller projects and it is working great so far).

sjkp / letsencrypt-siteextension

Azure Web App Site Extension for easy installation and configuration of Let's Encrypt issued SSL certifcates for custom domain names.

Important

You should migrate off this extension and instead use the free SSL certificates offered by Microsoft https://learn.microsoft.com/en-us/azure/app-service/configure-ssl-certificate?tabs=apex#create-a-free-managed-certificate If you feel like you still need the extension, let me know why.

Let's Encrypt Site Extension

This Azure Web App Site Extension enables easy installation and configuration of Let's Encrypt issued SSL certificates for you custom domain names.

The site extension requires that you have configured a DNS entry for your custom domain to point to Azure Web App.

November 2019 - Microsoft finally acknowledge that maybe it is in due time that they add first level support for free SSL certificates, see this announcement about App Service Managed Certificates, be aware that it is in preview and currently doesn't support the apex/naked domain.

How to install

https://github.com/sjkp/letsencrypt-siteextension/wiki/How-to-install

Known Issues

This site-extension is NOT supported by Microsoft it is my own work based on https://github.com/fszlin/certes - this means don't expect…

View on GitHub

✅ Requirements:

An Azure Account (If you are a student, click here to find out how to get free Azure Ressources.)
A Web Application hosted using the App Service Web Apps (Could be simple HTML and CSS or something like React)
Your own custom DNS entry configured to point to your Web App.

⚠ Ideally, your App Service Plan and your App Service are in the same resource group.

Azure Storage Account

First of all, we are going to create an Azure Storage Account so the extension is able to renew the Let's Encrypt Certificates every 3 months by using Azure WebJobs.

"The storage account must be of kind Storage or StorageV2, BlobStorage will not work."

Now we will need to add 2 application settings called AzureWebJobsDashboard and AzureWebJobsStorage with the connection string of our previously created Storage Account. The connection string should look for example like this: DefaultEndpointsProtocol=https;AccountName=[myaccount];AccountKey=[mykey];.

Azure Service Principle

For the extension to work unattended and without our manual interference we need to create an Azure Service Principle, which works basically as an "on behalf of" delegate Azure AD entry.

Go into the Azure Active Directory (AAD) directory you want to use to create your new application.
In the panel of the directory select App Registrations.
Create a new application and set it up like shown in the picture.
Create a new client secret for the application. Make sure you save the generated secret, as you will not be able to access it in clear text again!
Go back to the Overview tab and also save the Application (Client) ID. To continue you should now have the client secret and the Application ID.
Now the Service Principle needs "Contribute" Access for the Resource Group of your App Service and App Service Plan.
This is done by accessing the Access control (IAM) menu of the resource group and then clicking the 'Add' button.
In the upcoming menu, choose the Contributor role and add it to the created service principle.

⚠ If you have further services in the resource group, you are also able to add the Contributor role only to the App Service and Service Plan.

Installing the Lets Encrypt Site Extension

Now that we set up all the necessities for the extension to work, we are able to install and configure it.

Head over to your App Service and search in the App Service menu for the extensions site. On the site add the extension Azure Let's Encrypt by SJKP.

Configuring the Lets Encrypt Site Extension

To configure the extension we need to head over to the Advanced Tools page of our App Service. You find it by searching for Advanced Tools in the menu's search bar and it will take you to a site like https://<yourDomain>.scm.azurewebsites.net.
To get to the extension settings you just have to click at the Site extensions button in the menu at the top and click on the 'Launch' button of the extension. It will take you to the configuration page of the extension, shown in the picture below.

Tenant: is the Azure AD directory (tenant) that the service principal was created in - <yourTenantDomain>.onmicrosoft.com.
SubscriptionId: is the Id of the subscription you used for the resource group (the Id is also displayed on the 'Overview' page of your Resource Group). Also, you can get the Ids you are able to access from (https://portal.azure.com/#blade/Microsoft_Azure_Billing/SubscriptionsBlade)[https://portal.azure.com/#blade/Microsoft_Azure_Billing/SubscriptionsBlade].
ClienId and ClientSecret: are the Id and secret you hopefully still got from the Service Principle we created.
ResourceGroupName: is the name of the Resource Group of your App Service.
ServicePlanResourceGroupName: if the Service Plan and the App Service are in the same Resource Group, this name is identical to the ResourceGroupName. Otherwise, you have to enter the name of the Resource Group that the Service Plan is located in (if so, remember to grant the Service Principle access to this Resource Group as well).
Update Application Settings: should be set to true at the first run to save all the settings as web application settings. This is required so the settings are available when the WebJob renews the certificates.

After you have done so, you will see an overview of your custom domains, SSL Bindings, and Certificates. Since you still need to generate them, you should continue to the next page. There you are able to choose your domains (you can select several by holding the Ctrl key) you want to request an SSL certificate for.
Before doing so, you need to provide an email address, which will receive warnings by Let's Encrypt, for example in case a certificate was not renewed.

And that is everything you need to do, have fun! 🐱‍💻

⚠ Troubleshooting ⚠

Because Let's Encrypt needs to reach your page, to authorize your domain, make sure this URL is accessible to the public: http://<yourDomain>.com/.well-known/acme-challenge/. In most cases of an error, this URL cannot be reached, for example, because of a rule-set in a web.config or because https is enforced in the App Service Settings.

DEV Community: Jakob von der Haar

[Fix][Azure DevOps] React with babel - No "exports" main resolved in @babel/helper-compilation-targets/package.json

Situation

What happened?

No "exports" main resolved in @babel/helper-compilation-targets/package.json #11216

Bug Report

Fastest Solution

1. Add Node.js tool installer

2. Configure Task

React js ➡ Azure Devops ➡ Azure Storage ➡ Azure CDN (Part 1/2)

How to use Azure DevOps to build and release your static React js Web App to an Azure Storage Account which is made public using an Azure CDN profile, part 1:

✅ Requirements:

Table of Contents

1. Azure Storage Account

2. Build Pipeline

3. Release Pipeline

React js ➡ Azure DevOps ➡ Azure App Service

How to use Azure DevOps to build and deploy your React js Web App to Azure

✅ Requirements:

Build and Deployment

How to: Let's Encrypt Certificates for Azure Web App Service

How to secure your Azure Website with SSL for free in minutes 🔒

sjkp / letsencrypt-siteextension

Azure Web App Site Extension for easy installation and configuration of Let's Encrypt issued SSL certifcates for custom domain names.

Let's Encrypt Site Extension

How to install

Known Issues

✅ Requirements:

Azure Storage Account

Azure Service Principle

Installing the Lets Encrypt Site Extension

Configuring the Lets Encrypt Site Extension

⚠ Troubleshooting ⚠