Need Help to sort out my issue ''Uncaught SyntaxError

[suriyaJaay]

Hi @abraham , @xdamman , @vidartf , @tokrsen, Could someone please help me out for below issue?

I'm trying to solve the issue am facing since last week. Currently, I'm trying to integrate and use https://github.com/zxing-js/library library in my Angular.JS 1.3 application, which is completely working fine.

But facing the Uncaught SyntaxError: Unexpected token 'export' at assets/@zxing/library/esm/browser.js:2 whenever I run gulp karmaRunDebug . Due to this, CI/CD getting failed.

Kindly help me solve this issue.

karma.config.js

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            'assets/1.angular.min.js',
            'assets/angular-idle.js',
            'assets/angular-route.min.js',
            'assets/angular-shims-placeholder.min.js',
            'assets/disableconsolelog.js',
            'assets/**/*.js',
            'app/**/*.html',
            'app/**/!(*spec).js',
           // 'node_modules/@zxing/library/*.js'
           // 'assets/@zxing/library/esm/browser/BrowserMultiFormatReader.js'
           'vendor/**/*.ts',
           'assets/@zxing/library/*.js',

        ],
    
        exclude: [
            "assets/other.min.js"
        ],
        preprocessors: {
            'app/**/*.html': "ng-html2js",
            'app/views/**/!(*spec).js': ['coverage']
            'assets/**/*.ts': ["karma-typescript"]
        },
    
        reporters: ['progress', 'kjhtml', 'html', 'coverage'],
        
        
        karmaTypescriptConfig: {
            tsconfig: './tsconfig.json'
        },


        port: 3000,
        colors: true,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: true,
        concurrency: Infinity,
        coverageReporter : {
          type : 'html',
          dir : 'coverage/',
          subdir: '.',
          check: {
                global: {
                    ....,
                    .....
                },
                each: {
                   ....,
                   ....
                }
            }
        },
        htmlReporter: {
            outputDir: 'karma_html',
            namedFiles: true, 
            reportName: 'sample_spec_report' 
        }
    })

tsconfig.json

{
       "compileOnSave": false,
       "compilerOptions": {
           "target": "ES5",
           "lib": ["es5", "es6", "dom"],
           "module": "commonjs",
           "sourceMap": true,
           /* "types" : [
               "angular",
               "jasmine"
           ] */
       },
       "exclude": [
           "node_modules"
       ]
   }

Could you pls tell me what needs to be modify here?

Thanks you so much for helping me

[07akioni]

set tsconfig.module to CommonJS

[suriyaJaay]

@07akioni thanks for the heads up. I'm sorry, i really dont understand what you're trying to say. !! can you pls explain it clearly?
would be better if share you share structure..

Thanks

[07akioni]

@07akioni thanks for the heads up. I'm sorry, i really dont understand what you're trying to say. !! can you pls explain it clearly?
would be better if share you share structure..

Thanks

It seems your tsconfig module is already common js. I've run into your problem to and solved it by changing module to CommonJS.

However I can't figure out what happened to your project. Sorry for that.

[suriyaJaay]

just found couple of below exports from @zxing\library\esm\browser.js

is this the problem why am getting Uncaught SyntaxError: Unexpected token 'export' at assets/@zxing/library/esm/browser.js:2 ?

// browser
export * from './browser/BrowserAztecCodeReader';
export * from './browser/BrowserBarcodeReader';
export * from './browser/BrowserCodeReader';
export * from './browser/BrowserDatamatrixCodeReader';
export * from './browser/BrowserMultiFormatReader';
export * from './browser/BrowserPDF417Reader';
export * from './browser/BrowserQRCodeReader';
export * from './browser/BrowserQRCodeSvgWriter';
export * from './browser/HTMLCanvasElementLuminanceSource';
export * from './browser/VideoInputDevice';
//# sourceMappingURL=browser.js.map

here your see the actual library zxing

[07akioni]

just found couple of below exports from @zxing\library\esm\browser.js

is this the problem why am getting Uncaught SyntaxError: Unexpected token 'export' at assets/@zxing/library/esm/browser.js:2 ?

// browser
export * from './browser/BrowserAztecCodeReader';
export * from './browser/BrowserBarcodeReader';
export * from './browser/BrowserCodeReader';
export * from './browser/BrowserDatamatrixCodeReader';
export * from './browser/BrowserMultiFormatReader';
export * from './browser/BrowserPDF417Reader';
export * from './browser/BrowserQRCodeReader';
export * from './browser/BrowserQRCodeSvgWriter';
export * from './browser/HTMLCanvasElementLuminanceSource';
export * from './browser/VideoInputDevice';
//# sourceMappingURL=browser.js.map

here your see the actual library zxing

Maybe you can try adding those files' path to

preprocessors: {
            'app/**/*.html': "ng-html2js",
            'app/views/**/!(*spec).js': ['coverage']
            'assets/**/*.ts': ["karma-typescript"]
        },

[tobiasschweizer]

@07akioni Sorry for stepping in like that, but does module have to be set to commonjs in karma config?

I now have a situation where the lib is built with module: es6 for production, but unit tested with commonjs.

[thw0rted]

@suriyaJaay The library you're trying to consume is provided in ES6 Module (ESM) format. The export keyword is only supported in Ecmascript version 6 and higher, and the ES module format is incompatible with CommonJS (CJS) format.

To load ESM-format dependencies in your CJS bundle, you need to "downlevel" (transpile) them to a CJS module format. That's what the karma-typescript-es6-transform is for. As part of the karma-typescript bundle creation process, it will run your dependencies through the Babel transpiler on the fly. That link includes instructions for including the es6 transform in your karma config.

[9inpachi]

Hi @thw0rted, if you're still around. I had a quick question. Does karma-typescript-es6-transform only transform the dependencies or the application source code as well?

The thing is, if I use commonjs as the module, the application ends up picking the dependency's main package.json field which results in an error because in my source code, I import from the paths specified in package.json's exports field which is only supported by ESM.

[thw0rted]

Yeah, unfortunately the ESM-vs-CJS thing has gotten really hairy since I wrote that previous post. I actually just got bitten a month or two ago, I burned a whole day debugging build issues that turned out to be because I have a dep that exports a Node-only build as exports.require and the browser build in exports.import, so my (CJS) tests tried to run the Node code in browser. I wound up having to use Webpack aliases (resolve.alias) to rewrite path specifiers for some-lib to ./node_modules/some-lib/index.mjs. (Relative imports ignore exports / main from package.json.)

[9inpachi]

I had to do exactly the same thing. Not sure which bundler karma-typescript uses but I had to specify the resolution of imports manually. HSF/phoenix@93a0718

With karma-typescript, I think it imports the typescript transpiled code in a CJS file and uses that as a hub. It's mentioned in the docs. Which pretty much blocks users from setting the typescript module option other than commonjs. But I guess most of the use cases don't need to change that.

[thw0rted]

I should have mentioned, I gave up on trying to use karma-typescript and went back to karma-webpack. Tests take a pretty long time to re-run after changes, because it has to do a full webpack build every time, but it works pretty consistently (other than the CJS-entry-point issue). I might try karma-typescript again on my next project, starting from the ground up...