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

erikmjacobs free asked 4 years 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 years 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.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.15.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: Yes
  • Provided link: Yes