Signature_pad: Erro de sintaxe do IE11

Criado em 6 nov. 2018  ·  7Comentários  ·  Fonte: szimek/signature_pad

Deseja solicitar um recurso ou relatar um bug?
Erro

Qual é o comportamento atual?
Eu incluí "signature_pad": "^3.0.0-beta.3" em angular6 via package.json
Está funcionando bem em todos os navegadores, mas no IE11 o site não pode ser carregado devido a um erro.

image

"Syntaxerror" sem qualquer descrição do que está errado.

Comentários muito úteis

Tente importar desta forma:
mudar de:
import SignaturePad from 'signature_pad';
para:
import * as SignaturePad from 'signature_pad/dist/signature_pad';

Todos 7 comentários

Eu não tenho ideia de como é o processo de compilação do Angular 6, mas você deve compilá-lo usando a mesma configuração do Babel que você usa para compilar seu próprio código.

Você também pode usar o recurso webpack resolve.alias (não testado), que deve permitir que você carregue a versão já compilada:

module.exports = {
  //...
  resolve: {
    alias: {
      signature_pad: 'signature_pad/dist/signature_pad.js'
    }
  }
};

Obrigado pela sua resposta rápida.
Vou tentar. Também tentarei um polyfill babel se sua ideia não estiver funcionando. Eu nunca usei antes.

Tente importar desta forma:
mudar de:
import SignaturePad from 'signature_pad';
para:
import * as SignaturePad from 'signature_pad/dist/signature_pad';

função download(dataURL, nome do arquivo) {
if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
window.open(dataURL);
}
### //Adicione a instrução abaixo no app.js - funciona porque outros dois não são suportados no IE 11
else if(window.navigator && window.navigator.msSaveOrOpenBlob){var blobwin = dataURLToBlob(dataURL);window.navigator.msSaveOrOpenBlob(blobwin, nome do arquivo);}
outro {
var blob = dataURLToBlob(dataURL);
var url = window.URL.createObjectURL(blob);

var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;

document.body.appendChild(a);
a.click();

window.URL.revokeObjectURL(url);

}
}

A solução alternativa do @sdqwerty funcionou para mim. No entanto, vale a pena notar que o webpack tem um campo chamado mainFields cujo padrão é ['browser', 'module', 'main'] . Estes estão em ordem de prioridade, e signature_pad não inclui um browser em package.json , então o módulo é selecionado. Isso mapeia para o arquivo .m.js , que inclui sintaxe ES6 como classe -- que o IE11 não suporta.

@szimek Eu recomendo que você atualize o package.json para incluir um campo do navegador conforme as recomendações do npm aqui:
https://docs.npmjs.com/files/package.json#browser

Isso deve esclarecer esses problemas do IE11.

Isso funcionou para mim:

module.exports = {
  resolve: {
    alias: {
      'signature_pad': 'signature_pad/dist/signature_pad' // <- hier without '.js' at the end!
    }
  }
};

E com Laravel-Mix:

mix.webpackConfig({
    resolve: {
        alias: {
            'signature_pad': 'signature_pad/dist/signature_pad',
        }
    }
});

Eu não tenho ideia de como é o processo de compilação do Angular 6, mas você deve compilá-lo usando a mesma configuração do Babel que você usa para compilar seu próprio código.

Você também pode usar o recurso webpack resolve.alias (não testado), que deve permitir que você carregue a versão já compilada:

module.exports = {
  //...
  resolve: {
    alias: {
      signature_pad: 'signature_pad/dist/signature_pad.js'
    }
  }
};

A versão compilada v3.0.0-beta.4 não suporta IE11 por causa da palavra-chave class .

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

crazzeto picture crazzeto  ·  8Comentários

erangaapp picture erangaapp  ·  8Comentários

Sparticuz picture Sparticuz  ·  7Comentários

davidosuna1987 picture davidosuna1987  ·  11Comentários

kevinchung1026 picture kevinchung1026  ·  5Comentários