[Bug]: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

[raobjm]

Braze Web SDK Version

4.0.2

Integration Method

NPM

Browser

Chrome

Steps To Reproduce

Adding braze integration:

Node Version: 12.0.0
Here is package.json: https://gist.github.com/raobjm/398ce330b863bbb90bdd1950e3dc50d1
Here is Gulp File: https://gist.github.com/raobjm/2dd4536b5c5609ae54884471cea43c95

and the contents of braze integration

import * as braze from '@braze/web-sdk';

// initialize the SDK
braze.initialize('API_KEY, {
    baseUrl: "BASE_URL"
});

// optionally show all in-app messages without custom handling
braze.automaticallyShowInAppMessages();

// optionally set the current user's External ID
if (isLoggedIn){
    braze.changeUser(userIdentifier);
}

Expected Behavior

No errors should be thrown at build

Actual Incorrect Behavior

Error we are getting while running the build

[SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'] {
  message: "'import' and 'export' may appear only with 'sourceType: module'",
  line: 1,
  column: 1,
  annotated: '\nD:\\laragon\\www\\now-finance-website\\node_modules\\@braze\\web-sdk\\src\\index.js:1\n' +
    'export*from"./Card/index.js";export*from"./ContentCards/index.js";export*from"./Core/index.js";export*from"./Feed/index.js";export*from"./InAppMessage/index.js";export*from"./Pu
sh/index.js";export*from"./User/index.js";export{WindowUtils}from"./util/window-utils.js";\n' +
    "^\nParseError: 'import' and 'export' may appear only with 'sourceType: " +
    "module'",
  stream: Labeled {
    _readableState: ReadableState {
      objectMode: true,
      highWaterMark: 16,
      buffer: BufferList { length: 0 },
      length: 0,
      pipes: [Labeled],
      pipesCount: 1,
      flowing: true,
      ended: false,
      endEmitted: false,
      reading: true,
      sync: false,
      needReadable: true,
      emittedReadable: false,
      readableListening: false,
      resumeScheduled: false,
      destroyed: false,
      defaultEncoding: 'utf8',
      awaitDrain: 0,
      readingMore: false,
      decoder: null,
      encoding: null
    },
    readable: true,
    _events: [Object: null prototype] {
      end: [Array],
      finish: [Function],
      error: [Function],
      data: [Function: ondata],
      _mutate: [Function]
    },
    _eventsCount: 5,
    _maxListeners: undefined,
    _writableState: WritableState {
      objectMode: true,
      highWaterMark: 16,
      finalCalled: false,
      needDrain: false,
      ending: false,
      ended: false,
      finished: false,
      destroyed: false,
      decodeStrings: true,
      defaultEncoding: 'utf8',
      length: 1,
      writing: true,
      corked: 0,
      sync: true,
      bufferProcessing: false,
      onwrite: [Function],
      writecb: [Function: nop],
      writelen: 1,
      bufferedRequest: null,
      lastBufferedRequest: null,
      pendingcb: 1,
      prefinished: false,
      errorEmitted: false,
      bufferedRequestCount: 0,
      corkedRequestsFree: [CorkedRequest]
    },
    writable: true,
    allowHalfOpen: true,
    _options: { objectMode: true },
    _wrapOptions: { objectMode: true },
    _streams: [ [DestroyableTransform] ],
    length: 1,
    label: 'syntax'
  }
}
[14:44:15] Finished 'js' after 688 ms

Verbose Logs

No response

Additional Information

No response

[wesleyorbin]

Hi @raobjm. Browserify's default behavior is to not transform anything in the node_modules folder. It will need to be configured to transform our SDK and may need some additional configuration to be able to parse and transform ES modules. One option would be to add global: true to your browserify config and then set an ignore path that ignores everything in node_modules but the Braze SDK.

The original post here has an example at the bottom.

[raobjm]

Even with ignore, I am still getting the same error.

This is how I am ignoring everything except braze:

const bundler = browserify({ entries: paths.srcJs }, { debug: true }).transform(babel, { global: true, ignore: [/\/node_modules\/(?!@braze\/web-sdk)/] });

[wesleyorbin]

There's likely some other babel/browserify configuration option that you need to use, but I'm not overly familiar with browserify. Using "sourceType": "unambiguous" as mentioned here may fix the issue. The Web SDK is a native ES module, so any configuration that allows browserify to work with ES modules should work.