fuzzy-search icon indicating copy to clipboard operation
fuzzy-search copied to clipboard

ESM and IE support

Open romulof opened this issue 5 years ago • 0 comments

When building for browsers, the default behavior of Webpack when resolving package's main module is to look in package.json for these fields (in order):

  • browser: Browser-targeted module. Good to differentiate from Node targets.
  • module: Module using ESM syntax (discussion is in progress and stuff might change with Node 14)
  • main: Module using good-old CommonJS

https://webpack.js.org/configuration/resolve/#resolvemainfields

Also, it's very common to make babel-loader skip node_modules dir, to save some build time. Their own example instructs that.

https://github.com/babel/babel-loader#usage

FuzzySearch correctly points to a valid module, but that file not only contains ESM syntax, but lots of ES2015+ stuff.

Webpack handles ESM, but the other ES2015+ stuff passes straight through and IE does what it does best.

I suggest you to either:

  • Replace current module (or create a browser), with a ES5 module, keeping ESM declarations
  • Explain that the module webpack is going to use is not IE-ready and will require adjustments to support it. Here are a couple of possible fixes for their build config:
    • Force babel-loader to run in fuzzy-search directory;

      module: {
          rules: [
              {
                  test: /\.js$/,
                  include: ['src', 'node_modules/fuzzy-search'],
                  use: ['babel-loader'],
              },
          ],
      },
      
    • Create an alias, replacing fuzzy-search with a direct path to dist/FuzzySearch.js:

      resolve: {
          alias: {
              'fuzzy-search': 'fuzzy-search/dist/FuzzySearch',
          },
      },
      

romulof avatar Sep 11 '20 20:09 romulof