Skip to content

Instantly share code, notes, and snippets.

@ramhoj
Last active June 5, 2020 08:37
Show Gist options
  • Save ramhoj/4f1750d021914a6be7b13a4f54600aff to your computer and use it in GitHub Desktop.
Save ramhoj/4f1750d021914a6be7b13a4f54600aff to your computer and use it in GitHub Desktop.
ActionText issue

Steps to reproduce

  1. rails new actiontexttest --webpacker
  2. cd actiontexttest
  3. rails action_text:install
  4. rails db:migrate RAILS_ENV=development
  5. Add a root route, controller and view file
  6. bin/rails server
  7. bin/webpack-dev-server
  8. goto http://localhost:3000 (in Internet Explorer 11)

Expected behavior

No error to be raised.

Actual behavior

Error being raised in Internet Explorer 11's console:

SCRIPT1002: Syntax error
File: application.js, Line: 10452, Column: 1

Line 10452 in my case being:

/***/ "./node_modules/@rails/actiontext/app/javascript/actiontext/attachment_upload.js":
/*!***************************************************************************************!*\
  !*** ./node_modules/@rails/actiontext/app/javascript/actiontext/attachment_upload.js ***!
  \***************************************************************************************/
/*! exports provided: AttachmentUpload */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AttachmentUpload", function() { return AttachmentUpload; });
/* harmony import */ var _rails_activestorage__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @rails/activestorage */ "./node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js");
/* harmony import */ var _rails_activestorage__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_rails_activestorage__WEBPACK_IMPORTED_MODULE_0__);

class AttachmentUpload {
  constructor(attachment, element) {
    this.attachment = attachment
    this.element = element
    this.directUpload = new _rails_activestorage__WEBPACK_IMPORTED_MODULE_0__["DirectUpload"](attachment.file, this.directUploadUrl, this)
  }

Reflections

Works fine with above reproduction steps (rails 6.0.1) but not on Dockspot with 6.0.0) It looks like the class keyword was not transpired, causing a syntax error in IE's old parser.

System configuration

Rails version: 6.0.0

Ruby version: 2.6.3p62

package.json:

{
  "engines": {
    "node": "10.16.0",
    "yarn": "^1.17.3",
    "npm": "^6.11.2"
  },
  "dependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-react": "^7.6.3",
    "@rails/actiontext": "^6.0.0",
    "@rails/webpacker": "^4.0.7",
    "@stimulus/polyfills": "^1.1.1",
    "mutationobserver-shim": "^0.3.3",
    "stimulus": "^1.1.1",
    "trix": "^1.2.1",
    "uglifyjs-webpack-plugin": "^2.2.0"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

.browserslistrc

defaults

npx browserslist

chrome 78
edge 18
firefox 70
ie 11
opera 62
safari 13

… (and more)

Question

Has anyone else encountered errors with ActionText not transpiling to compatible javascript defined by

@cis-deepesh
Copy link

Thanks for detailing this issue, we are facing the same issue and removing @rails/actiontext makes our application work. Did you succeed in finding a fix for this issue?

@cis-deepesh
Copy link

In enviornment.js we had this: environment.loaders.delete("nodeModules"); due to which actiontext was not being compiled, so we have added actiontext to enviornment.loaders which fixed the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment