Is the release of 1.2.0 correct?

[nodepond]

I have an issue, when I try to install @react-pdf/renderer, read about it here: diegomura/react-pdf#643

After doing some research, I have the suspicion, that with the release of 1.2.0 maybe something went wrong. In the example above, the @render-pdf/fontkit wants to import the StateMachine from index.js of this repo in the node_modules folder. At the 1.2.0 version the compiler (i.e. webpack) complains, that it is unable to import the StateMachine correctly.

When I use the contents of the older (1.1.0) index.js from node_modules the project compiles and runs without any problems.

Can someone confirm this? Or am I doing something horrible wrong? I guess, there might be some issues in the compile-section of the 1.2.0 release.

[devongovett]

This was the change: eed4375

cc @blikblum

[devongovett]

What error do you get @nodepond?

[nodepond]

I tried to compile with @react-pdf/renderer. This is the webpack-error:

ERROR in ./node_modules/@react-pdf/fontkit/dist/fontkit.browser.es.js 8713:23-35 "export 'default' (imported as 'StateMachine') was not found in 'dfa'

Here the complete bug-report: diegomura/react-pdf#643

[blikblum]

Seems that @react-pdf is doing a custom build of fontkit since there's no fontkit.browser.es.js file in official release (1.8.0).

This error occurs when trying to import a common js module using native es module import.

Look at fontkit.browser.es.js and see how dfa is imported:

import StateMachine from 'dfa'

or

var StateMachine = require('dfa')

or

var StateMachine = _interopDefault(require('dfa')); // like fontkit 1.8.0

The later two should work

[devongovett]

Cc @diegomura

[blikblum]

Also, dfa 1.1 and 1.2 is exporting StateMachine the same way:

module.exports = StateMachine;

So should not be difference regarding this issue

[wernerfinck]

Hi,
Do you have any other suggestions to face this issue ?
I tried to downgrade to dfa 1.1.0,
and i also tried to change the import of dfa in @react-pdf fontkit.browser.es.js file (following the @blikblum instructions)
but the bug is remaining...

[wernerfinck]

finally i had to:

• import dfa StateMachine like this
  var StateMachine = require('dfa')
  in react-pdf's node-module fontkit.browser.es.js file

• add sourceType: 'unambiguous' in babel.config.js

[relightme]

I have this issue too while using react-pdf.

Perhaps need to add IE to the list of browsers in .babelrc
"browsers": [ "Firefox 57", "Chrome 60", "iOS 10", "Safari 10" ]

In yarn.lock with
dfa@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/dfa/-/dfa-1.1.0.tgz#d30218bd10d030fa421df3ebbc82285463a31781" integrity sha1-0wIYvRDQMPpCHfPrvIIoVGOjF4E= dependencies: babel-runtime "^6.11.6"

it works great, instead of:

dfa@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/dfa/-/dfa-1.2.0.tgz#96ac3204e2d29c49ea5b57af8d92c2ae12790657" integrity sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==

My app crashes on IE11 and it's impossible to create a build of the app with error:

SCRIPT1002: Syntax error
class StateMachine {...
^^^^

Failed to compile.
Failed to minify the code from this file:
./node_modules/dfa/index.js:10
Read more here: http://bit.ly/2tRViJ9

[parkerSmith725]

I have this issue too while using react-pdf.
My app crashes on IE11 and it's impossible to create a build of the app with error:

SCRIPT1002: Syntax error
class StateMachine {...
^^^^

I'm having the same issue as @relightme above. App is crashing on IE11 with the same syntax error, dfa is being imported by @react-pdf/renderer. Is there a resolution for this?

Thanks in advance!

[rdebeasi]

I'm also experiencing IE11 problems similar to the ones described above. Rolling back from 1.2.0 to 1.1.0 resolves the issue. I've filed #4 to make the build settings more like they were v1.1.0 and restore compatibility with older browsers.

Does the code in this PR resolve the problems that folks in this thread are having?

[rdebeasi]

Does anyone have time to test #4 using npm link and let us know whether these changes resolve the issues that you're experiencing? Thank you in advance! 😄 🚀

[PierreAndreis]

This dependency was failing es-check es5 check on my project.

Rolling back to 1.1.0 solved it. Using #4 didn't for some reason... Got this error on the build process.

Module not found: Error: Can't resolve 'dfa' in 'node_modules/@react-pdf/fontkit/dist'
 @ node_modules/@react-pdf/fontkit/dist/fontkit.browser.es.js 6:0-31 8428:23-35 9363:25-37
 @ node_modules/@react-pdf/renderer/dist/react-pdf.browser.es.js

[gazpachu]

Also not working for me in IE11

[rdebeasi]

@PierreAndreis What steps did you do to test with npm link? This issue may be related to the way the modules are linked rather than the PR itself. (I've found npm link to be useful but also kind of fiddly. 😅 )

[Ericxgao]

@rdebeasi I'm having trouble installing your branch on Windows - see below for logs:

npm ERR! prepareGitDep > [email protected] postinstall C:\Users\ericx\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-18f381a4\node_modules\core-js
npm ERR! prepareGitDep > node -e "try{require('./postinstall')}catch(e){}"
npm ERR! prepareGitDep
npm ERR! prepareGitDep Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
npm ERR! prepareGitDep
npm ERR! prepareGitDep The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
npm ERR! prepareGitDep > https://opencollective.com/core-js
npm ERR! prepareGitDep > https://www.patreon.com/zloirock
npm ERR! prepareGitDep
npm ERR! prepareGitDep Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > [email protected] prepare C:\Users\ericx\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-18f381a4
npm ERR! prepareGitDep > make
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-node-resolve.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: Please use the native JSON object instead of JSON 3
npm ERR! prepareGitDep 'make' is not recognized as an internal or external command,
npm ERR! prepareGitDep operable program or batch file.
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! [email protected] prepare: `make`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR!
npm ERR! prepareGitDep npm ERR! Failed at the [email protected] prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     C:\Users\ericx\AppData\Roaming\npm-cache\_logs\2020-02-10T22_01_31_696Z-debug.log
npm ERR! prepareGitDep
npm ERR! premature close

It did work successfully on Linux, but when I check node_modules/dfa I just see README.md and package.json - no other files present

[parth-ghinaiya]

Hello @nodepond
I found a temporary solution to it.

Go to ./node_modules/dfa/index.js
and change file to as per below :

(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==='object'&&typeof module==='object') module.exports=factory();else if(typeof define==='function'&&define.amd) define("StateMachine",[],factory);else if(typeof exports==='object') exports.StateMachine=factory();else root.StateMachine=factory()})(this,function(){return(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports} var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=!0;return module.exports} __webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.i=function(value){return value};__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{configurable:!1,enumerable:!0,get:getter})}};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module['default']}:function getModuleExports(){return module};__webpack_require__.d(getter,'a',getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=5)})([(function(module,exports,__webpack_require__){"use strict";module.exports=function(target,sources){var n,source,key;for(n=1;n<arguments.length;n++){source=arguments[n];for(key in source){if(source.hasOwnProperty(key)) target[key]=source[key]}} return target}}),(function(module,exports,__webpack_require__){"use strict";var mixin=__webpack_require__(0);module.exports={build:function(target,config){var n,max,plugin,plugins=config.plugins;for(n=0,max=plugins.length;n<max;n++){plugin=plugins[n];if(plugin.methods) mixin(target,plugin.methods);if(plugin.properties) Object.defineProperties(target,plugin.properties)}},hook:function(fsm,name,additional){var n,max,method,plugin,plugins=fsm.config.plugins,args=[fsm.context];if(additional) args=args.concat(additional) for(n=0,max=plugins.length;n<max;n++){plugin=plugins[n] method=plugins[n][name] if(method) method.apply(plugin,args)}}}}),(function(module,exports,__webpack_require__){"use strict";function camelize(label){if(label.length===0) return label;var n,result,word,words=label.split(/[_-]/);if((words.length===1)&&(words[0][0].toLowerCase()===words[0][0])) return label;result=words[0].toLowerCase();for(n=1;n<words.length;n++){result=result+words[n].charAt(0).toUpperCase()+words[n].substring(1).toLowerCase()} return result} camelize.prepended=function(prepend,label){label=camelize(label);return prepend+label[0].toUpperCase()+label.substring(1)} module.exports=camelize}),(function(module,exports,__webpack_require__){"use strict";var mixin=__webpack_require__(0),camelize=__webpack_require__(2);function Config(options,StateMachine){options=options||{};this.options=options;this.defaults=StateMachine.defaults;this.states=[];this.transitions=[];this.map={};this.lifecycle=this.configureLifecycle();this.init=this.configureInitTransition(options.init);this.data=this.configureData(options.data);this.methods=this.configureMethods(options.methods);this.map[this.defaults.wildcard]={};this.configureTransitions(options.transitions||[]);this.plugins=this.configurePlugins(options.plugins,StateMachine.plugin)} mixin(Config.prototype,{addState:function(name){if(!this.map[name]){this.states.push(name);this.addStateLifecycleNames(name);this.map[name]={}}},addStateLifecycleNames:function(name){this.lifecycle.onEnter[name]=camelize.prepended('onEnter',name);this.lifecycle.onLeave[name]=camelize.prepended('onLeave',name);this.lifecycle.on[name]=camelize.prepended('on',name)},addTransition:function(name){if(this.transitions.indexOf(name)<0){this.transitions.push(name);this.addTransitionLifecycleNames(name)}},addTransitionLifecycleNames:function(name){this.lifecycle.onBefore[name]=camelize.prepended('onBefore',name);this.lifecycle.onAfter[name]=camelize.prepended('onAfter',name);this.lifecycle.on[name]=camelize.prepended('on',name)},mapTransition:function(transition){var name=transition.name,from=transition.from,to=transition.to;this.addState(from);if(typeof to!=='function') this.addState(to);this.addTransition(name);this.map[from][name]=transition;return transition},configureLifecycle:function(){return{onBefore:{transition:'onBeforeTransition'},onAfter:{transition:'onAfterTransition'},onEnter:{state:'onEnterState'},onLeave:{state:'onLeaveState'},on:{transition:'onTransition'}}},configureInitTransition:function(init){if(typeof init==='string'){return this.mapTransition(mixin({},this.defaults.init,{to:init,active:!0}))} else if(typeof init==='object'){return this.mapTransition(mixin({},this.defaults.init,init,{active:!0}))} else{this.addState(this.defaults.init.from);return this.defaults.init}},configureData:function(data){if(typeof data==='function') return data;else if(typeof data==='object') return function(){return data} else return function(){return{}}},configureMethods:function(methods){return methods||{}},configurePlugins:function(plugins,builtin){plugins=plugins||[];var n,max,plugin;for(n=0,max=plugins.length;n<max;n++){plugin=plugins[n];if(typeof plugin==='function') plugins[n]=plugin=plugin() if(plugin.configure) plugin.configure(this)} return plugins},configureTransitions:function(transitions){var i,n,transition,from,to,wildcard=this.defaults.wildcard;for(n=0;n<transitions.length;n++){transition=transitions[n];from=Array.isArray(transition.from)?transition.from:[transition.from||wildcard] to=transition.to||wildcard;for(i=0;i<from.length;i++){this.mapTransition({name:transition.name,from:from[i],to:to})}}},transitionFor:function(state,transition){var wildcard=this.defaults.wildcard;return this.map[state][transition]||this.map[wildcard][transition]},transitionsFor:function(state){var wildcard=this.defaults.wildcard;return Object.keys(this.map[state]).concat(Object.keys(this.map[wildcard]))},allStates:function(){return this.states},allTransitions:function(){return this.transitions}});module.exports=Config}),(function(module,exports,__webpack_require__){var mixin=__webpack_require__(0),Exception=__webpack_require__(6),plugin=__webpack_require__(1),UNOBSERVED=[null,[]];function JSM(context,config){this.context=context;this.config=config;this.state=config.init.from;this.observers=[context]} mixin(JSM.prototype,{init:function(args){mixin(this.context,this.config.data.apply(this.context,args));plugin.hook(this,'init');if(this.config.init.active) return this.fire(this.config.init.name,[])},is:function(state){return Array.isArray(state)?(state.indexOf(this.state)>=0):(this.state===state)},isPending:function(){return this.pending},can:function(transition){return!this.isPending()&&!!this.seek(transition)},cannot:function(transition){return!this.can(transition)},allStates:function(){return this.config.allStates()},allTransitions:function(){return this.config.allTransitions()},transitions:function(){return this.config.transitionsFor(this.state)},seek:function(transition,args){var wildcard=this.config.defaults.wildcard,entry=this.config.transitionFor(this.state,transition),to=entry&&entry.to;if(typeof to==='function') return to.apply(this.context,args);else if(to===wildcard) return this.state else return to},fire:function(transition,args){return this.transit(transition,this.state,this.seek(transition,args),args)},transit:function(transition,from,to,args){var lifecycle=this.config.lifecycle,changed=this.config.options.observeUnchangedState||(from!==to);if(!to) return this.context.onInvalidTransition(transition,from,to);if(this.isPending()) return this.context.onPendingTransition(transition,from,to);this.config.addState(to);this.beginTransit();args.unshift({transition:transition,from:from,to:to,fsm:this.context});return this.observeEvents([this.observersForEvent(lifecycle.onBefore.transition),this.observersForEvent(lifecycle.onBefore[transition]),changed?this.observersForEvent(lifecycle.onLeave.state):UNOBSERVED,changed?this.observersForEvent(lifecycle.onLeave[from]):UNOBSERVED,this.observersForEvent(lifecycle.on.transition),changed?['doTransit',[this]]:UNOBSERVED,changed?this.observersForEvent(lifecycle.onEnter.state):UNOBSERVED,changed?this.observersForEvent(lifecycle.onEnter[to]):UNOBSERVED,changed?this.observersForEvent(lifecycle.on[to]):UNOBSERVED,this.observersForEvent(lifecycle.onAfter.transition),this.observersForEvent(lifecycle.onAfter[transition]),this.observersForEvent(lifecycle.on[transition])],args)},beginTransit:function(){this.pending=!0},endTransit:function(result){this.pending=!1;return result},failTransit:function(result){this.pending=!1;throw result},doTransit:function(lifecycle){this.state=lifecycle.to},observe:function(args){if(args.length===2){var observer={};observer[args[0]]=args[1];this.observers.push(observer)} else{this.observers.push(args[0])}},observersForEvent:function(event){var n=0,max=this.observers.length,observer,result=[];for(;n<max;n++){observer=this.observers[n];if(observer[event]) result.push(observer)} return[event,result,!0]},observeEvents:function(events,args,previousEvent,previousResult){if(events.length===0){return this.endTransit(previousResult===undefined?!0:previousResult)} var event=events[0][0],observers=events[0][1],pluggable=events[0][2];args[0].event=event;if(event&&pluggable&&event!==previousEvent) plugin.hook(this,'lifecycle',args);if(observers.length===0){events.shift();return this.observeEvents(events,args,event,previousResult)} else{var observer=observers.shift(),result=observer[event].apply(observer,args);if(result&&typeof result.then==='function'){return result.then(this.observeEvents.bind(this,events,args,event)).catch(this.failTransit.bind(this))} else if(result===!1){return this.endTransit(!1)} else{return this.observeEvents(events,args,event,result)}}},onInvalidTransition:function(transition,from,to){throw new Exception("transition is invalid in current state",transition,from,to,this.state)},onPendingTransition:function(transition,from,to){throw new Exception("transition is invalid while previous transition is still in progress",transition,from,to,this.state)}});module.exports=JSM}),(function(module,exports,__webpack_require__){"use strict";var mixin=__webpack_require__(0),camelize=__webpack_require__(2),plugin=__webpack_require__(1),Config=__webpack_require__(3),JSM=__webpack_require__(4);var PublicMethods={is:function(state){return this._fsm.is(state)},can:function(transition){return this._fsm.can(transition)},cannot:function(transition){return this._fsm.cannot(transition)},observe:function(){return this._fsm.observe(arguments)},transitions:function(){return this._fsm.transitions()},allTransitions:function(){return this._fsm.allTransitions()},allStates:function(){return this._fsm.allStates()},onInvalidTransition:function(t,from,to){return this._fsm.onInvalidTransition(t,from,to)},onPendingTransition:function(t,from,to){return this._fsm.onPendingTransition(t,from,to)},} var PublicProperties={state:{configurable:!1,enumerable:!0,get:function(){return this._fsm.state},set:function(state){throw Error('use transitions to change state')}}} function StateMachine(options){return apply(this||{},options)} function factory(){var cstor,options;if(typeof arguments[0]==='function'){cstor=arguments[0];options=arguments[1]||{}} else{cstor=function(){this._fsm.apply(this,arguments)};options=arguments[0]||{}} var config=new Config(options,StateMachine);build(cstor.prototype,config);cstor.prototype._fsm.config=config;return cstor} function apply(instance,options){var config=new Config(options,StateMachine);build(instance,config);instance._fsm();return instance} function build(target,config){if((typeof target!=='object')||Array.isArray(target)) throw Error('StateMachine can only be applied to objects');plugin.build(target,config);Object.defineProperties(target,PublicProperties);mixin(target,PublicMethods);mixin(target,config.methods);config.allTransitions().forEach(function(transition){target[camelize(transition)]=function(){return this._fsm.fire(transition,[].slice.call(arguments))}});target._fsm=function(){this._fsm=new JSM(this,config);this._fsm.init(arguments)}} StateMachine.version='3.0.1';StateMachine.factory=factory;StateMachine.apply=apply;StateMachine.defaults={wildcard:'*',init:{name:'init',from:'none'}} module.exports=StateMachine}),(function(module,exports,__webpack_require__){"use strict";module.exports=function(message,transition,from,to,current){this.message=message;this.transition=transition;this.from=from;this.to=to;this.current=current}})])})

[mzzfederico]

That is not a solution.

[rdebeasi]

@Parth477, thanks for sharing that tip! Unfortunately, the change that you described will only fix the problem locally. This change won't be included in source control, and the change may be lost with a subseqent npm install.

If you're looking for a workaround, consider using npm-force-resolutions to keep dfa at 1.1.0.

[mzzfederico]

I have successfully added this to my babel-loader config:

include: [
    path.join(__dirname, 'node_modules/@react-pdf/fontkit'),
    path.join(__dirname, 'node_modules/dfa'),
]

And it did fix my issue when using that