jointjs+ in angular project v8.2.14

srikanthgarimilla1996 commented 2 months ago

What happened?

Hi, I am trying the angular tutorial from your website: https://resources.jointjs.com/tutorial/angular These are the versions i have got: Angular CLI: 8.3.29 Node: 10.16.0 OS: win32 x64

I am getting these errors as soon as i run the code: Can't import the named export 'util' from non EcmaScript module (only default export is available) ERROR in ./node_modules/@joint/plus/packages/joint-shapes-record/record.mjs 723:21-25 Can't import the named export 'util' from non EcmaScript module (only default export is available) ERROR in ./node_modules/@joint/plus/packages/joint-shapes-chart/chart.mjs 1754:14-18

In your website you've stated that it is compatible with all versions of angular : https://www.jointjs.com/angular-diagrams Any help would be appreciated! Thanks errors folder

Version

4.0.0

What browsers are you seeing the problem on?

Chrome

What operating system are you seeing the problem on?

Windows

jamesgeorgewilliams commented 2 months ago

This issue is not related to Angular, but to Webpack. Angular v8 is using Webpack v4 which can cause numerous issues.

Ideally, you would update your Angular project(v8 is not supported) to a version which uses Webpack v5, but if that is not possible, you will have to try some alternatives below.

In your project, it's likely Webpack cannot locate/recognize .mjs files. To address this issue you have to update the Webpack config.

If you have access to the webpack.config.js file, you could add the following:

resolve: {
    extensions: ['*', '.mjs', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      }
    ]
  }

Additional Problem

If you have created your Angular 8 project with the angular cli, it's likely you don't have access to this config file as it is hidden from the user.

ng eject is not available in Angular 8(This was a command to expose the webpack.config.js file). There is a package which allows you to create a custom webpack config without "ejecting" the angular cli project. https://www.npmjs.com/package/@angular-builders/custom-webpack

It can be added to your project via npm i @angular-builders/custom-webpack@8.4.1 -D

This will allow you to create a webpack configuration in the angular.json file. You have to update the build and serve sections as follows:

"architect": {
  ...
  "build": {
    "builder": "@angular-builders/custom-webpack:browser"
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js",
        "mergeStrategies": {
          "externals": "replace"
        }
        ...
      }
    },
  ...
  "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
    },
 }

You can find more information at the following link. https://github.com/just-jeb/angular-builders/blob/8.x.x/packages/custom-webpack/README.md

Now, you should create the webpack config file extra-webpack.config.js in the root of your project. It can contain the following:

module.exports = {
  mode: 'production', // "production" | "development" | "none"
  resolve: {
    extensions: ['*', '.mjs', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ]
  }
};

At this point, if you run npm run start, the errors in your screenshot above should be fixed, but you will have some new errors related to some JavaScript features.

Webpack v4 doesn't support newer JavaScript features, es2020 for example.

You should add some babel packages to your project to support this, and update the extra-webpack.config.js .

npm i babel-loader@8.2.5 -D
npm i @babel/plugin-proposal-nullish-coalescing-operator -D

extra-webpack.config.js

module.exports = {
  mode: 'production', // "production" | "development" | "none"
  resolve: {
    extensions: ['*', '.mjs', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: "defaults" }]
            ],
            plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
          }
        }
      }
    ]
  }
};

Running npm run start should be successful now. As mentioned above, ideally you would just update to a supported version of Angular that uses webpack v5 if possible as it would solve all of these issues.

srikanthgarimilla1996 commented 2 months ago

Thanks a ton @jamesgeorgewilliams. The solution you've provided above is working.

clientIO / joint