jaredpalmer / tsdx

Zero-config CLI for TypeScript package development
https://tsdx.io
MIT License
11.2k stars 505 forks source link

Error when using OTF fonts -- need to use a Rollup plugin #1111

Closed yunisdev closed 2 years ago

yunisdev commented 2 years ago

Current Behavior

I want to use otf fonts in my project. But when I import them, I get this error below:

✖ Failed to compile
Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)

at /mnt/Data Disk/Programming/side-projects/minimized/src/fonts/Montserrat-Bold.otf:1:4

1: OTTO
       �@CFF �W�3��;GDEF̻��!��GPOS
(headxy�6hhea�                   Dl/$T5$GSUB�/�fYx=@OS/2VئG�`cmap�/�t&@
              xt$hmtx��`k
                         hmaxp�P�name�{a<�Hpost��23h P�339��_<���M�M�����4K(������������������������������������������������������������������������������8��8���S�'�'�'�'�'�'�':S�SG:SG:S:SYS�S�S�S�S�S�S�S�S�S�S�S�S�S�S�S�S�S�S�S�S�S�S�S~~S'''''''+'(SB(S(S(S(SHS�=HIH��H��H��H��HHPHSH��H:H��HHRH���������S�S�S\SyS\I\S\S\S\S�S\Si���S�S(SES(S(S(S(S(S(S[S(S(SL'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'L'p'�S�SL'�S�S�S�S�S�S�S�S~~~)D~~~~~~~~
                                                                                              M1'jjjjjjjMMMMMMMMMM!M!M!M!M!M!MMMMMMMMM����������������������������������������&�&�&�&�&�=���MMMMMMMMMMMMMMMMMMMMMMMMMMMM>F>F�ScS�'�'�'�'�'�'�'�'�'�'�'�'�'�'�'�'�'�'�'�'�'�'�'gM'''''''0'�'�=�'�=�'�'����'�'�'�'��'�'�'�'�'�������S�S�SS8SSSSSSSOSSSL'17~��~��~��~��~��~��~��MMMMMMMMMMMMMMMMMMMMMMMM�M�M�M�M�MHHHHHHHHHH�+�+�+�+�+i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%i%�%�%�HO O O O O O O �"� �"�"�"�"�"w w w w w w w w w w w w w w w w w w w w w w w w *��*��� � � � � � � � �H��H�������H-5-H-;-��-��-��--��-B-5-��-,-��`5--5-��3��3��3��3���H����H�H-H-;-H-H�H-H`H-��G��HH�H�H4)�H�H�H�H�H�H�H�H� � � � � � � � � � � � � � � � � � � � ����E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�E�EV�������SV��V��V��V��V��V��V��V��V��V��#####^A� � � � � � � � � � � � � � � � � � � � � � � � � � �%�%�"w w w w w w w w w w w w w w w w w w w w w w w w!pH_H_;_H_H�H_HzH_ _��5 �E��E�E�E����E�7�E�E�E�E�E�@�@�@�@�@�@�@�@�@�@)()()()()(�H����G�G����������������������������������������������������������������������������������������Mr#r#r#r#r#r#r#�M��M��M�M�MBMBMBMBMBMBMBMBMBMBMBMB)BMBMBMBMBMBMBMBMBMBMBM�#??*M�#�#�#�#�#�#�#�#�#�M��M�M�M�M7M7M7@\*7��7��7��7��7G7M7��717��x277H7������������M�M�M�M
                                                        M
                                                         A
                                                          M
                                                           M
                                                            M
                                                             M�M
                                                                M
                                                                 ��;M;M�M�M�M�M�M�M�M�M�M�M�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#�#}M}M�#�M�M�M�M�C�M�M�M'''$D''''''''�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G��������iY��Y��Y��Y��Y��Y��Y��Y��Y��Y��A$A$A$A$A$�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�A�AM@@@@@@@@@@@@@@@@@@@@@@@�,G�#�#�#�#�#�#�#�#�1�1�1x*�1�0����1�1�1�
                                                  �1�1x2�1�1�1����������MMM�M�M�M�M�M�M�M�M�M�M�##��#��#��#��#��#��#��#���G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G�G
                                               G
                                                G
                                                 G
                                                  G
�5W5W5W\W�U�U�W1WJ&,W�W�'}�     �       �"�        G�B�B�B�B�B�B�B�B�B�BE&E&E&E&E&��W�WQWQWSW?�W�W�W7
       ^
2: �*IWJWjW(W�WMW��W�%�(�OWH��8
                               YZW�*Q=�
�UU�]TW6W�WOW�+�'}���                  J&       ��WW
�W��L�B�!MM>F�'1717MMHHHKL'�\ �.nKKK�K��HH�%�KpK�

Expected behavior

How can I fix this problem? This is link to my repo

My environment

System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 5.46 GB / 15.44 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
Binaries:
    Node: 14.18.2 - /usr/bin/node
    npm: 8.4.1 - /usr/bin/npm
Browsers:
    Chrome: 96.0.4664.110
    Firefox: 96.0
npmPackages:
    tsdx: ^0.14.1 => 0.14.1 
    typescript: ^4.4.3 => 4.4.3
iceniveth commented 2 years ago

@yunisdev have you managed to make it work?

I too struggled. I tried to follow the docs for customizing with this config:

tsdx.config.js

const url = require("rollup-plugin-url");

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      url({
        include: ["**/*.otf"],
        limit: Infinity,
      })
    );

    return config;
  },
};

It doesn't seem to work.

iceniveth commented 2 years ago

This did the trick: https://github.com/jaredpalmer/tsdx/issues/379#issuecomment-569011510

Not sure why config.plugins.push doesn't work but spread operator does. Maybe, the plugin-url must be the first plugin over the existing ones.

agilgur5 commented 2 years ago

Thanks for providing a link to the answer in the HOWTOs @iceniveth .

Not sure why config.plugins.push doesn't work but spread operator does. Maybe, the plugin-url must be the first plugin over the existing ones.

Yes, that would be why. Usually if a plugin introduces a new syntax (or entire file encoding in this case), it has to go early on in the plugin chain as it must parse that syntax before others try to (and error out trying to). This principle applies to Babel plugins and custom parsers too, as well as other similar tools.