Handling sourcemaps with Embroider

tags:  javascript, embroider, emberjs, webpack

Context

In EmberJSEmberJS
Ember Tools

Glint

Typechecker for Ember templates (Components, Helpers and Modifiers) similar to tsc in TypeScript. It specially oriented to Glimmer components in TypeScript, but it can work ...
, they have replaced Broccoli compilating library for Embroider that uses Webpack internally.

Problem

The interface for handling source maps in the EmberJSEmberJS
Ember Tools

Glint

Typechecker for Ember templates (Components, Helpers and Modifiers) similar to tsc in TypeScript. It specially oriented to Glimmer components in TypeScript, but it can work ...
builder has changed, even when the old interface is still compatible with the current versions of Embroider:

let app = new EmberApp(defaults, {
  sourcemaps: {
    enabled: false
  }
});

Solution

We need to start using the new interface for handling source maps, it responds to Webpack API:

const { Webpack } = require('@embroider/webpack');
return require('@embroider/compat').compatBuild(app, Webpack, {
  packagerOptions: {
    webpackConfig: {
      devtool: false 
    }
  }
});

References