Rails / Webpack(er) / yarn Cannot assign to read only proper


Topic: Rails / Webpack(er) / yarn Cannot assign to read only property 'exports'

erikmjacobs pro premium asked 4 months ago

I am trying to migrate my app to using webpack(er) and Rails 5.2.4 and am having similar issues to ones reported previously. However I am not (to my knowledge) using Laravel or Symphony. I have a very simple/vanilla Rails installation.

I tried to follow some of the instructions here as they made sense for Rails to the best of my abilities: https://mdbootstrap.com/articles/jquery/md-bootstrap-webpack-tutorial/

I also looked at his code repo. I was trying to make 4.8.9 work but was hitting the _classCallCheck issue reported here: https://mdbootstrap.com/support/jquery/identifier-_classcallcheck-has-already-been-declared/

I tried to update to 4.15.0 and that solved the _ClassCallCheck issue, but then I hit: https://mdbootstrap.com/support/jquery/uncaught-typeerror-cannot-assign-to-read-only-property-exports-of-object-object/

This doesn't appear to be resolved.

https://mdbootstrap.com/support/jquery/issue-with-4-9-0-webpack-typescript/

The above refers to attempting to modify the Babel config, which I did, and my .babelrc looks like the following:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "3.0.0"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    [
      "@babel/plugin-proposal-decorators",
      {
        "decoratorsBeforeExport": true
      }
    ],
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-function-bind",
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-json-strings",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-transform-arrow-functions"
  ]
}

Most of the above exists because the webpack config post suggests it.

if you scroll down to the post by joulien moulin where he manually imports mdb from the zip file, I tried just using MDB and that didn't work -- I still got the error.

However, I then did both bootstrap.min and mdb from the zip, and removed bootstrap from my package.json, and that seemed to work.

Now, I don't get any explicit error, but I do see a warning:

Velocity is already loaded. You may be needlessly importing Velocity again; note that Materialize includes Velocity.

Any thoughts? This doesn't seem serious. However not being able to install mdbootstrap-pro via Yarn is kind of annoying.


Grzegorz BujaƄski staff commented 4 months ago

Hi. Do you use materialize css on You project? Can you show me dependencies and dev-dependencies from your package.json file?


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.15.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: Yes