TypeError: d.m_ is not a function after upgrading to @sentry/ember 7.100.1

Is there an existing issue for this?

I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
I have reviewed the documentation https://docs.sentry.io/
I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/ember

SDK Version

7.100.1

Framework Version

7.100.1

Link to Sentry event

https://codecrafters.sentry.io/issues/4953498292/?project=5922961&query=is%3Aunresolved&referrer=issue-stream&statsPeriod=24h&stream_index=0

SDK Setup

Sentry.init({
    autoSessionTracking: true,
    dsn: config.environment === 'production' ? sentryDSN : '',
    environment: config.environment,
    tracesSampleRate: 0.01,
});

Steps to Reproduce

Load any page with Sentry enabled.

Expected Result

No errors in console

Actual Result

Errors are present in the console.

Hey, can you double check that all @sentry/xxx packages you have installed have the same/correct version? This smells to me like there may be an outdated dependency somewhere that is being picked up, possibly, as this method was added in an recent version.

@mydea

@mydea from the looks of it everything does seem to have the correct version:

The only entry in package.json is @sentry/ember, I looked in package-lock.json and found these:

This should be exported:

sentry-javascript/packages/ember/addon/index.ts

Line 120 in 737fb0e

export * from '@sentry/browser';

sentry-javascript/packages/browser/src/index.ts

Line 64 in 737fb0e

startBrowserTracingPageLoadSpan,

sentry-javascript/packages/ember/addon/instance-initializers/sentry-performance.ts

Line 9 in 737fb0e

import * as Sentry from '@sentry/browser';

If you do

import * as Sentry from '@sentry/ember';

console.log(Sentry.startBrowserTracingPageLoadSpan);

what gets emitted?

I'm having the same issue here. Here's the output with the log:

I'm on ^7.102.1 for all dependencies

Here's a slightly minified output:

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const { Webpack } = require('@embroider/webpack');
const Funnel = require('broccoli-funnel');
const MergeTrees = require('broccoli-merge-trees');
const { WatchedDir } = require('broccoli-source');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PostProcessPlugin = require('./lib/embed-script-build/lib/post-process');

const environment = process.env.EMBER_ENV;
const cioEnvironment = process.env.CIO_ENV ?? 'development';
const isProduction = environment === 'production';
const skipFingerprint = process.env.SKIP_FINGERPRINT === 'true';
const forceFingerprint = process.env.FORCE_FINGERPRINT === 'true';
const publicAssetUrl = process.env.PUBLIC_ASSET_URL ?? null;

module.exports = function (defaults) {
  let appTree = new WatchedDir('app');

  // https://github.com/embroider-build/embroider/issues/758#issuecomment-983059421
  // workaround for .ts files in the mirage directories being ignored
  if (environment !== 'production') {
    appTree = new MergeTrees([
      appTree,
      new Funnel(new WatchedDir('mirage'), {
        destDir: 'mirage',
      }),
    ]);
  }

  let app = new EmberApp(defaults, {
    trees: { app: appTree },

    babel: {
      plugins: [require.resolve('ember-auto-import/babel-plugin')],
      sourceMaps: isProduction ? 'inline' : false,
    },
    autoImport: {
      watchDependencies: [
        '@customerio/fly-components',
        '@customerio/pluma-components',
        '@customerio/encompass',
        '@customerio/carta',
        '@customerio/carta-visualized',
        '@customerio/magic-html',
        '@customerio/marshaled-preview',
        '@customerio/process-conditional-comments',
        '@customerio/source-htmlparser2',
        '@customerio/event-emitter',
        '@customerio/hydra-nav-state',
        '@customerio/hydra-pluma-state',
        '@customerio/hydra-ember-test-helpers',
      ],
      forbidEval: true,
      webpack: {
        module: {
          rules: [
            // required for monaco-editor module bundling
            {
              test: /\.ttf$/i,
              use: ['file-loader'],
            },
          ],
        },
      },
    },

    sourcemaps: {
      enabled: environment !== 'test',
      extensions: ['js'],
    },

    minifyCSS: { enabled: false },

    'ember-cli-terser': {
      enabled: isProduction,

      terser: {
        compress: true,
      },
    },

    tests: process.env.EMBER_CLI_TEST_COMMAND || !isProduction,
    hinting: process.env.EMBER_CLI_TEST_COMMAND || !isProduction,

    fingerprint: {
      extensions: ['js', 'extcss', 'css', 'png', 'jpg', 'jpeg', 'gif', 'ico', 'eot', 'svg', 'ttf', 'woff', 'mp3'],
      enabled: (isProduction && !skipFingerprint) || forceFingerprint,
    },

    // third-party package configs
  });

  // various app.import calls

  let countryFlags = new Funnel('node_modules/flagpack', {
    srcDir: 'flags/4x3/',
    include: ['*.*'],
    destDir: '/assets/images/flags',
  });

  return require('@embroider/compat').compatBuild(app, Webpack, {
    extraPublicTrees: [countryFlags],
    staticAddonTestSupportTrees: true,
    staticAddonTrees: true,
    staticHelpers: true,
    staticModifiers: true,
    staticComponents: true,
    staticEmberSource: true,
    splitAtRoutes: ['internal-tools'],
    packagerOptions: {
      cssLoaderOptions: {
        import: false,
      },

      webpackConfig: {
        devtool: 'source-map',

        stats: {
          errorDetails: true,
        },

        plugins: [
          new PostProcessPlugin(app),
          new MiniCssExtractPlugin({
            filename: `assets/chunk.[chunkhash].css`,
            chunkFilename: `assets/chunk.[chunkhash].css`,
          }),
        ],

        output: {
          // Keep the output path of assets the same originally (without this,
          // all static assets are output at the root)
          // https://stackoverflow.com/a/68902490/12679717
          assetModuleFilename: (pathData) => {
            let filenameFormat = isProduction ? '[name].[contenthash][ext][query]' : '[name][ext][query]';
            let filepath = path.dirname(pathData.filename);

            // rename some ".css" assets,
            // saved as "app/assets/styles/*.extcss" to avoid default Embroider processing,
            // back to ".css" in the dist output:
            if ((pathData.filename ?? '').endsWith('.extcss')) {
              filenameFormat = isProduction ? '[name].[contenthash].css[query]' : '[name].css[query]';
            }

            return `${filepath}/${filenameFormat}`;
          },
        },

        module: {
          rules: [
            {
              test: /\.(extcss|png|jpg|jpeg|gif|ico|eot|svg|ttf|woff|mp3)$/i,
              type: 'asset/resource',
            },
            {
              test: /\.scss$/i,
              use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                  loader: 'postcss-loader',
                  options: {
                    postcssOptions: {
                      config: './postcss.config.js',
                    },
                  },
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sassOptions: {
                      implementation: require('sass'),
                      includePaths: [
                        'node_modules/@customerio/fly-components/app/styles',
                        'node_modules/ember-power-select/app/styles',
                        'node_modules/ember-basic-dropdown/app/styles',
                      ],
                    },
                  },
                },
              ],
            },
          ],
        },
      },
    },
  });
};

Thank you, I was able to reproduce this locally. Still no idea why it is doing that, but this PR fixed the issue for me locally, at least: #11026

fix(ember): Ensure browser tracing is correctly lazy loaded (#11026)

@mydea

Thanks for taking a look and for the fix @mydea! Looking forward to the v7 release with this!

Fix released with https://github.com/getsentry/sentry-javascript/releases/tag/7.107.0

@AbhiPrasad

Thanks for the heads up @AbhiPrasad! Looks like this fixes it 😄

Great to hear that! 🚀

Navigation Menu

Repository navigation

TypeError: d.m_ is not a function after upgrading to @sentry/ember 7.100.1 #10566

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

25 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

TypeError: d.m_ is not a function after upgrading to @sentry/ember 7.100.1 #10566

Description

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

Activity

mydea commented on Feb 8, 2024

rohitpaulk commented on Feb 8, 2024

AbhiPrasad commented on Feb 8, 2024

mike-engel commented on Feb 27, 2024

25 remaining items

mike-engel commented on Mar 11, 2024

mydea commented on Mar 11, 2024

mike-engel commented on Mar 12, 2024

AbhiPrasad commented on Mar 14, 2024

mike-engel commented on Mar 15, 2024

mydea commented on Mar 15, 2024

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions