Error when parsing Mobx

Environment

npm ls
├── @babel/core@7.18.13
├── @linaria/babel-preset@4.1.2
├── @linaria/core@4.1.1
├── @linaria/webpack-loader@4.1.2
├── babel-loader@8.2.5
├── webpack-cli@4.10.0
└── webpack@5.74.0

node -v
v16.13.1

On macOS Monterey

Description

When I tried to update to the latest Linaria version, I ran into a strange parsing bug. Originally it failed on dist/mobx.esm.js from the popular MobX library.

I’ve boiled down the code to the following example:

// main.js
import { css } from "@linaria/core";
import { b } from "./mobx.js";

css``;

// mobx.js
var _;

var a = void _;

function b(b) {
  void _;
}

export { a, b };

When trying to parse this, it will fail with:

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/jhnns/dev/jhnns/linaria-bug-repo/src/main.js: /Users/jhnns/dev/jhnns/linaria-bug-repo/src/mobx.js: Exporting local "b", which is not declared.
  7 | }
  8 |
> 9 | export { a, b };
    |             ^

Could be a Babel bug, but since it only happens in conjunction with Linaria I guess this is the right place to start 😁

Reproducible Demo

The example is pretty small and simple:

https://github.com/jhnns/linaria-bug-repo

[jhnns]

Yes, I also thought that this might be caused by multiple bugs.

I’ve fixed the problems

That sounds good 😃

but I think both of them have nothing to do with your issues with dist/mobx.esm.js since it doesn’t have any usages of void with identifiers. May I ask you to provide a broken repo with mobx?

I’m only using void in order to mark the variable as used. You could also do console.log(). I’ve added the original mobx.esm.js on a separate branch: https://github.com/jhnns/linaria-bug-repo/tree/with-mobx

Stack trace

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/jhnns/dev/jhnns/linaria-bug-repo/src/main.js: /Users/jhnns/dev/jhnns/linaria-bug-repo/src/mobx.js: Exporting local "allowStateChanges", which is not declared.
  6570 | }
  6571 |
> 6572 | export { $mobx, FlowCancellationError, ObservableMap, ObservableSet, Reaction, allowStateChanges as _allowStateChanges, runInAction as _allowStateChangesInsideComputed, allowStateReadsEnd as _allowStateReadsEnd, allowStateReadsStart as _allowStateReadsStart, autoAction as _autoAction, _endAction, getAdministration as _getAdministration, getGlobalState as _getGlobalState, interceptReads as _interceptReads, isComputingDerivation as _isComputingDerivation, resetGlobalState as _resetGlobalState, _startAction, action, autorun, comparer, computed, configure, createAtom, apiDefineProperty as defineProperty, entries, extendObservable, flow, flowResult, get, getAtom, getDebugName, getDependencyTree, getObserverTree, has, intercept, isAction, isObservableValue as isBoxedObservable, isComputed, isComputedProp, isFlow, isFlowCancellationError, isObservable, isObservableArray, isObservableMap, isObservableObject, isObservableProp, isObservableSet, keys, makeAutoObservable, makeObservable, observable, observe, onBecomeObserved, onBecomeUnobserved, onReactionError, override, apiOwnKeys as ownKeys, reaction, remove, runInAction, set, spy, toJS, trace, transaction, untracked, values, when };
       |                                                                                ^^^^^^^^^^^^^^^^^
    at File.buildCodeFrameError (/Users/jhnns/dev/jhnns/linaria-bug-repo/node_modules/@babel/core/lib/transformation/file/file.js:249:12)
    at NodePath.buildCodeFrameError (/Users/jhnns/dev/jhnns/linaria-bug-repo/node_modules/@babel/traverse/lib/path/index.js:145:21)
    at getLocalMetadata (/Users/jhnns/dev/jhnns/linaria-bug-repo/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:318:22)
    at /Users/jhnns/dev/jhnns/linaria-bug-repo/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:347:33
    at Array.forEach (<anonymous>)
    at /Users/jhnns/dev/jhnns/linaria-bug-repo/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:344:33
    at Array.forEach (<anonymous>)
    at getLocalExportMetadata (/Users/jhnns/dev/jhnns/linaria-bug-repo/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:331:27)
    at getModuleMetadata (/Users/jhnns/dev/jhnns/linaria-bug-repo/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:122:21)
    at normalizeModuleAndLoadMetadata (/Users/jhnns/dev/jhnns/linaria-bug-repo/node_modules/@babel/helper-module-transforms/lib/normalize-and-load-metadata.js:58:7)

That was the actual error that I saw in my application. It was caused by mobx-react-lite importing _allowStateChanges from the mobx library.

[jhnns]

Awesome, thank you 😃

allowStateChanges is used by mobx-react-lite which takes care of rerendering React components whenever Mobx observables change. Every React component will import mobx-react-lite which will import allowStateChanges from mobx. That’s why this code is evaluated by Linaria.