Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE11 - SCRIPT0: Syntax error #95

Closed
stanyq4 opened this issue Jun 16, 2020 · 10 comments
Closed

IE11 - SCRIPT0: Syntax error #95

stanyq4 opened this issue Jun 16, 2020 · 10 comments
Labels
bug Something isn't working

Comments

@stanyq4
Copy link

stanyq4 commented Jun 16, 2020

Does the library work with IE 11?

I am getting the following error when trying to test with IE11:

SCRIPT0: Syntax error 
File: 3d577878351523fb68dd.worker.js, Line: 919, Column: 1

My worker setup is very minimal as it's shown in the demo.
export.service.js:

import worker from 'workerize-loader!./worker'

workerInstance.generateCsv(data).then((blob) => {
      // save generated blob to a file
      saveAs(blob, filename)
      resolve()
    }).catch((error) => {
      console.log('error: ', error)
      reject(error)
    })

worker.js:

export const generateCsv = async (data) => {
  // console.log('got here!!')
  if (!data) {
    return
  }

  const res = csvFormat(data)
  return new Blob([res], { type: 'text/csv;charset=utf-8;' })
}
@stanyq4
Copy link
Author

stanyq4 commented Jun 16, 2020

The error occurs somewhere along thus lines:


addEventListener('message', e => {
    let {
        type,
        method,
        id,
        params
    } = e.data, f, p;
    if (type === 'RPC' && method) {
        if (f = __webpack_exports__[method]) {
            p = Promise.resolve().then(() => f.apply(__webpack_exports__, params));
        } else {
            p = Promise.reject('No such method');
        }
        p.then(result => {
            postMessage({
                type: 'RPC',
                id,
                result
            });
        }).catch(e => {
            let error = {
                message: e
            };
            if (e.stack) {
                error.message = e.message;
                error.stack = e.stack;
                error.name = e.name;
            }
            postMessage({
                type: 'RPC',
                id,
                error
            });
        });
    }
});
postMessage({
    type: 'RPC',
    method: 'ready'
});

developit added a commit that referenced this issue Jun 16, 2020
This should fix the issue noted in #95.
@developit
Copy link
Owner

Ooof - good catch! The untransformed let and destructuring syntax wasn't supposed to end up in dist/rpc-worker-loader.

@developit developit added the bug Something isn't working label Jun 16, 2020
@developit
Copy link
Owner

I'll get a release out shortly!

@stanyq4
Copy link
Author

stanyq4 commented Jun 16, 2020

Thanks a ton! I'll test it out once it's released.

@yellott
Copy link
Contributor

yellott commented Jun 16, 2020

@developit not sure if browserslist can work with target node, I had similar issue here #94

@developit
Copy link
Owner

This is fixed in 1.3.0.

@stanyq4
Copy link
Author

stanyq4 commented Jun 17, 2020

The original issue is now resolved, seems like we are getting closer.
However, IE11 still doesn't like the fact that Promise is used somewhere along the lines.

I made the worker function as simple as possible but IE still throws the error: 'Promise' is undefined

Attaching screenshot:

Screen Shot 2020-06-17 at 2 07 30 PM

@developit
Copy link
Owner

@stanyq4 you'll need to include a Promise polyfill in the worker module - not just for workerize, but also because Webpack itself requires it.

I'd recommend installing promise-polyfill, then importing it as the first line of your worker module:

// my-worker.js
import 'promise-polyfill';

export const generateCsv = (data) => {
  console.log('doing work');
};

@stanyq4
Copy link
Author

stanyq4 commented Jun 18, 2020

That worked, thank you again @developit

Just FYI for others, you gotta use the following import syntax as described in docs:

import 'promise-polyfill/src/polyfill';
or
import Promise from 'promise-polyfill';

@developit
Copy link
Owner

developit commented Jun 18, 2020

Awesome! I've just added that to the readme.

I'd strongly recommend the first form (import 'promise-polyfill/src/polyfill') since it allows webpack's chunk loading to access the polyfill too.

developit added a commit that referenced this issue Jun 18, 2020
This was the last fix necessary for #95.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants