tons of import errors about mobx-sync HOT 6 CLOSED

If you use webpack to bundle your project with es module tree shaking(use .mjs files), you may need to add the following configurations:

// webpack.config.ts
export default {
  // ...
  resolve: {
      extensions: ['.ts', '.tsx', '.jsx', '.mjs', '.js', '.json'],
  },
  module: {
    rules: [
        { test: /\.mjs$/, type: 'javascript/auto' },
        // ...
    ],
  }
}

from mobx-sync.

can you explain what exactly is the rule doing?
i dont see any .mjs files in the source tree. what are they?

from mobx-sync.

Because I added module as lib/index.mjs in package.json, and webpack will use it to find out the es module entry rather than main(lib/index.js) as commonjs module.

from mobx-sync.

use extensions .mjs and .js rather than use two directories cjs and esm is for we can import mjs and cjs modules in same format like this:

import { parseStore } from 'mobx-sync/lib/parse-store'

from mobx-sync.

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

from mobx-sync.

Just wanted to mention that the Webpack changes suggested above by acrazing worked for me.

Would be nice if there were a solution to this that doesn't require a change to one's Webpack config, but from @acrazing's commentary here, it seems that could be tricky.

from mobx-sync.