Does not work in IE11 #268

makotot · 2019-03-28T05:51:38Z

Current behavior

In IE11, cash does not work bacause of Expected identifier error.
This error is caused by remaining class syntax in ./dist/cash.esm.js (I'm using webpack v4 and it imports esm version of cash).
https://github.com/kenwheeler/cash/blob/fbe3dc0966653b67e464f32f5efa3b1f5e3a68c4/dist/cash.esm.js#L16

class syntax seems to be appeared from 3.0.0( 1eaddca#diff-33b3d582ba732231f8b49c1ba1fcf7f8R16 ). Is it what should be?

Expected behavior

Works well in IE11.

The text was updated successfully, but these errors were encountered:

mkusaka · 2019-03-28T06:19:22Z

I have the same issue.

Following is a minimum example.

app.js

import $ from 'cash-dom';

$('#cash').on('click', (e) => {
  $('#body').toggle()
});

webpack.config.js

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'app.js'),
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader'
          },
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [
      '.js'
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

index.html

<html>
  <head></head>
  <body>
    <div id="cash" style="width:100%; height: 50%; background: black;"></div>
    <div id="body" style="width:100%; height: 50%; background: black;"></div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

package.json

{
  "scripts": {
    "build": "webpack --mode development"
  },
  "dependencies": {
    "@babel/core": "^7.4.0",
    "cash-dom": "^3.1.0"
  },
  "devDependencies": {
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  }
}

npm install && npm run build

This may fix by changing pacco plugin settings (enable babel or typescript target to es5 ).

fabiospampinato · 2019-03-28T15:26:20Z

The esm build is meant to be used in esm-supporting environments. If you want to use it in IE11 I think you'd have to configure webpack to transpile it to ES5 via babel or something. But I'm not hugely familiar with webpack in this regard, am I missing something?

Alternatively I think one could instruct webpack to load the cash/dist/cash.min.js file, which is already transpiled for ES5 environements, when requiring cash, but that would be more of a workaround then the proper way of doing this.

makotot · 2019-03-28T16:26:42Z

@fabiospampinato Thanks, It makes sense :)
Exactly as you said, IE11 is not esm-supporting environment and importing cash/dist/cash.min.js works in IE11. I have not tried to transpile with babel yet but it probably works too.

fabiospampinato · 2019-03-28T16:28:11Z

I'm closing this then. It will be helpful to other users if you guys shared a webpack configuration that handles the transpilation properly.

mkusaka · 2019-03-28T16:43:14Z

@fabiospampinatoThanks, I understand. I'm grateful for your support.

makotot · 2019-03-29T02:08:48Z

Using resolve.mainFields like mainfilelds: ["main", "module"] may be the optimal solution for this issue.
ref: webpack/webpack#1979

ipavlic · 2019-05-23T17:17:00Z

@fabiospampinato I'd like to reopen this. Webpack relies on package.json of various packages to be able to resolve the module. It has a sensible default for web target: browser followed by module and finally main.

cash advertises support for "modern browsers (IE10+)" and its package.json contains just main and module.

"main": "./dist/cash.js",
"module": "./dist/cash.esm.js"

The proposed solution (@makotot) suggests changing the Webpack configuration for every package to look at main field first and module field next, which would work for cash, given the contents of its package.json file.

However, adding a browser field to point to dist/cash.js would work just as well, and would work with no global changes required on Webpack configuration.

"browser": "./dist/cash.js",
"main": "./dist/cash.js",
"module": "./dist/cash.esm.js"

fabiospampinato · 2019-05-23T17:20:14Z

@ipavlic Oh cool, do you happen to know where this "web" property is documented?

fabiospampinato · 2019-05-23T17:23:49Z

@ipavlic Wouldn't this mean though that dist/cash.js will basically always be the file that will be used by webpack? I'm not sure this will work if the file is being imported as 'import $ from 'cash-dom'` for instance 🤔 Unless maybe webpack can just figure things out?

ipavlic · 2019-05-23T17:31:26Z

Sorry, it's browser, not web. Webpack documents resolve at https://webpack.js.org/configuration/resolve/

resolve.mainFields
[string]
When importing from an npm package, e.g. import * as D3 from 'd3', this option will determine which fields in its package.json are checked. The default values will vary based upon the target specified in your webpack configuration.

webpack.config.js

module.exports = {
//...
resolve: {
mainFields: ['browser', 'module', 'main']
}
};

ipavlic · 2019-05-24T13:06:42Z

@ipavlic Wouldn't this mean though that dist/cash.js will basically always be the file that will be used by webpack? I'm not sure this will work if the file is being imported as 'import $ from 'cash-dom'` for instance 🤔 Unless maybe webpack can just figure things out?

I think it just works.

ipavlic · 2019-05-24T14:22:11Z

Another alternative is to polyfill in Webpack:

entry: ["@babel/polyfill", 'your-entry-file.js']

limonte · 2019-06-02T08:34:41Z

Facing the same issue here. @fabiospampinato could you please merge and release #291 ? I can confirm that it's the correct solution for this issue.

limonte · 2019-06-02T11:08:33Z

Right now, I have to use import $ from 'cash-dom/dist/cash.js' instead of import $ from 'cash-dom' to make webpack happy.

fabiospampinato · 2019-06-04T20:03:26Z

@limonte I'm quite busy right now, I can't properly test this at the moment. I'd be happy to merge the change if it allows the library to be imported under all the following scenarios:

CommonJS environment (require)
ESM in Node.js (import)
ESM in TypeScript (import)
Script modules (script[type="module"])

If somebody could provide me some sample configs/projects that show that these all work, so that I could just try them very quickly, I'll probably be able to merge the change in faster.

fabiospampinato · 2019-07-12T22:36:49Z

I've build a thing for checking that cash can be properly imported under the most common environments (attached below, it may come in handy in the future).

This issue has ben fixed by #291. Basically the only problem was when importing cash via require and when bundling that with webpack. I'm not quite sure why that was happening to be honest.

The bottom line is that importing cash should now work everywhere, and when explicitly importing cash it won't pollute the global namespace. If you want $ to be globally available just expose it yourself: window.$ = $.

New release coming soon (I want to take care of a few other issues first).

cash-dom-import-test.zip

limonte · 2019-07-13T15:37:43Z

Isn't zip too old-school? :) Why not the repo under your username?

fabiospampinato · 2019-07-13T15:39:29Z

I don't know it's probably garbage, but I didn't want to just delete it.

makotot mentioned this issue Mar 28, 2019

Remove Class syntax from esm #269

Closed

fabiospampinato added the needs more info label Mar 28, 2019

fabiospampinato closed this as completed Mar 28, 2019

ipavlic mentioned this issue May 23, 2019

Add web field to package.json to support Webpack defaults for bundling #290

Closed

ipavlic mentioned this issue May 23, 2019

Add web field to package.json to support Webpack defaults for bundling #291

Merged

limonte mentioned this issue May 23, 2019

Revert the 'module' field, add the 'browser' field to package.json sweetalert2/sweetalert2#1599

Merged

limonte mentioned this issue Jun 12, 2019

How to use with laravel-mix (webpack) #292

Closed

fabiospampinato reopened this Jul 12, 2019

fabiospampinato added bug and removed needs more info labels Jul 12, 2019

fabiospampinato closed this as completed Jul 12, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Does not work in IE11 #268

Does not work in IE11 #268

makotot commented Mar 28, 2019

mkusaka commented Mar 28, 2019

fabiospampinato commented Mar 28, 2019 •

edited

makotot commented Mar 28, 2019 •

edited

fabiospampinato commented Mar 28, 2019

mkusaka commented Mar 28, 2019

makotot commented Mar 29, 2019

ipavlic commented May 23, 2019 •

edited

fabiospampinato commented May 23, 2019

fabiospampinato commented May 23, 2019

ipavlic commented May 23, 2019

ipavlic commented May 24, 2019

ipavlic commented May 24, 2019

limonte commented Jun 2, 2019 •

edited

limonte commented Jun 2, 2019 •

edited

fabiospampinato commented Jun 4, 2019

fabiospampinato commented Jul 12, 2019 •

edited

limonte commented Jul 13, 2019

fabiospampinato commented Jul 13, 2019

Does not work in IE11 #268

Does not work in IE11 #268

Comments

makotot commented Mar 28, 2019

Current behavior

Expected behavior

mkusaka commented Mar 28, 2019

fabiospampinato commented Mar 28, 2019 • edited

makotot commented Mar 28, 2019 • edited

fabiospampinato commented Mar 28, 2019

mkusaka commented Mar 28, 2019

makotot commented Mar 29, 2019

ipavlic commented May 23, 2019 • edited

fabiospampinato commented May 23, 2019

fabiospampinato commented May 23, 2019

ipavlic commented May 23, 2019

ipavlic commented May 24, 2019

ipavlic commented May 24, 2019

limonte commented Jun 2, 2019 • edited

limonte commented Jun 2, 2019 • edited

fabiospampinato commented Jun 4, 2019

fabiospampinato commented Jul 12, 2019 • edited

limonte commented Jul 13, 2019

fabiospampinato commented Jul 13, 2019

fabiospampinato commented Mar 28, 2019 •

edited

makotot commented Mar 28, 2019 •

edited

ipavlic commented May 23, 2019 •

edited

limonte commented Jun 2, 2019 •

edited

limonte commented Jun 2, 2019 •

edited

fabiospampinato commented Jul 12, 2019 •

edited