mjs modules aren't compatible with react-create-app about mobx-sync HOT 4 CLOSED

.mjs file is treated as strict EcmaScript Module in webpack(and Node.js), and its specification disallowed to use import to import a Non-EcmaScript Module, so, .mjs files cannot import any CommonJS modules, such as tslib, it is standard.

So, in actually, we cannot use EcmaScript Module syntax in Node.js, even if we provide --experimental-modules option to allow it, because we cannot use any packages in node_modules, all of them is not standard. Except for we import .mjs file in node_modules directly, such as import { inject } from 'mobx-sync/lib/inject'.

But webpack use EcmaScript Module to Tree-Shaking, it treat .js file as Non-strict EcmaScript Module, which is called javascript/auto, (and standard EcmaScript Module is called javascript/esm, .mjs is treated as it default).

This creates a conflict: Node.js cannot use EcmaScript Module, but webpack want to use EcmaScript Module. So, powerful community invented something for npm packages: build two different version's code into two different directory(such as esm and cjs) from source code before publish it to npm, and add a field module to point to esm, and main to cjs in package.json. And then, Node.js will use cjs version's code because it use CommonJS, webpack will use esm version's code because it APPROVES module field.

Please note module in package.json is not a standard, it is out of expediency. This will lead a new problem(in philosophical): deno's author ry thinks index.js is a bad design, and I agree it absolutely! You cannot see any other language (except for Python) suggest you to compose your exports into one index file! So, EcmaScript Module does not resolve index.js automatically, it is CommonJS's standard(or Node.js). If you want to import an EcmaScript Module, you must import a file explicitly, as you see it in p2 upon.

If we agree it(do not resolve index.js), and want ours npm package supports to works in both Node.js and webpack, we cannot use two directory to separate the two version's code, because its path is different.

I agree it, and do it and promoted it to my company. We use one single directory(lib) to hold two different version's code, the different version's code file ends with different extension: .js and .mjs.
And this is the reason lead to the problem.

In general, I don't know why webpack treat .mjs as strict esm internally when it resolves modules as commonjs, it is incompatible. And I don't know why create-react-app resolved .mjs, but does not set its type(see https://github.com/facebook/create-react-app/blob/e59e0920f3/packages/react-scripts/config/paths.js#L50-L51).

from mobx-sync.

Two ways to resolve this problem:

1. eject your create-react-app, (I experienced create-react-app just now, it is awesome except for disallow you to customize webpack config!)
2. wait for all the npm packages upgrade to EcmaScript Module

from mobx-sync.

After a bit of tinkering I did get it to work. It is resolving the mjs files for mobx-sync, however from there the references to mobx & tslib seem to be ignoring the fact it should be looking at ES6 modules and is loading the .js flavours rather than the es6 ones. To work around the issue I removed the .js files from mobx and tslib and put copies of the es6 flavours in their place. There was one misleading bug left that it was complaining about .index() though that was due to a typo in my code with a comma. :{ I've raised an issue with react-create-app/react-script as they had been doing some pondering and back & forth around mjs files and it looks like it should be supported, but seems to still have issues. (Oh the joys of trying to bring standards to JavaScript! :) So in the end I have been able to get it running, though one remaining small question: When wired up with localForge the persistence is persisting to Local Storage on Chrome rather than IndexDB which was expected. I've been replacing Redux /w MobX and the redux persistence /w localForge went to an IndexDB store by default. Just curious if this is configurable?

from mobx-sync.

You can try timarney/react-app-rewired to customize your webpack config without ejecting.

from mobx-sync.