Discussion :

[dosy07]

Bonjour tous,

Cela faisait des années que je n'étais pas revenu sur dev.com.
donc 10x Bonne années
10x joyeux noel histoire de rattraper le temps

Je suis novice sur le dev javascript et je tente de faire un plugin grafana par rapport à mon métier initial, c'est à dire l'exploit.
J'ai un soucis sur l'import d'un JS
J'ai un script A avec un import B, ma complie Grunt fonction sans erreur

Si B contient un class Oject style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
class B extends BaseObject {
  constructor(args) {
    super(args)
 
  }
}

A :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var B = require('./B');

export default Mx;
Et je me chope à chaque fois un
Uncaught (in promise) Error: Cannot read property 'A' of undefined
Loading plugins/agenty-flowcharting-panel/module
s @ system.js:4

Si je remplace B par des simples var et function sans le
B :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var B = { var a, var b, init : function ... }
export B

Plus de soucis,
Je ne comprends pas pourquoi A ne fonctionne par au require de B
Je pense que mon pb provient de babel :
.babelrc :
{ "presets": ["@babel/preset-env"] }

Le code (A c'est flowchartingCtrl.js et B mxgraph.js)
https://github.com/algenty/grafana-f...ree/webpack_v2

Mon Grunfile

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
var path = require("path"),
  fs = require("fs");
 
module.exports = (grunt) => {
  require('load-grunt-tasks')(grunt);
 
  grunt.loadNpmTasks('grunt-execute');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-sass');
  const sass = require('node-sass');
  grunt.initConfig({
 
    clean: {
      options: {
        force: true
      },
      stuff: ['dist']
    },
 
    copy: {
      src_to_dist: {
        cwd: 'src',
        expand: true,
        src: ['**/*', '!**/*.js', '!**/*.scss', '!img/**/*', '.*'],
        dest: 'dist'
      },
      externals_to_dist: {
        cwd: 'src',
        expand: true,
        src: ['externals/**/*'],
        dest: 'dist'
      },
      libs_to_dist: {
        cwd: 'node_modules',
        expand: true,
        src: ['mxgraph/javascript/dist/**/*', 'mxgraph/javascript/src/**/*'],
        dest: 'dist/libs'
      },
      readme: {
        expand: true,
        src: ['README.md'],
        dest: 'dist',
      },
      img_to_dist: {
        cwd: 'src',
        expand: true,
        src: ['img/**/*'],
        dest: 'dist/'
      },
    },
 
 
 
    watch: {
      rebuild_all: {
        files: ['src/**/*', 'README.md'],
        tasks: ['default'],
        options: {
          spawn: false
        }
      },
    },
 
 
    sass: {
      options: {
        sourceMap: true,
        implementation: sass,
      },
      dist: {
        files: {
          'dist/css/diagram.css': 'src/css/diagram.scss'
        }
      }
    },
 
    babel: {
      dist: {
        files: [{
          cwd: 'src',
          expand: true,
          src: ['*.js'],
          dest: 'dist',
          ext: '.js'
        }]
      },
    },
 
    webpack: {
      mxgraph: {
        entry: "./src/mxgraphinterface.js",
        mode: "development",
        module: {
          rules: [
              {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components|externals)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
            ]
        },
        output: {
          path: path.resolve(process.cwd(), "./dist"),
          filename: "mxgraphinterface.js"
        }
      }
    },
 
  });
 
  grunt.registerTask('default', ['clean', 'copy:src_to_dist', 'sass', 'copy:readme', 'copy:img_to_dist', 'babel', webpack, 'copy:libs_to_dist', ]);
};

PS : je tiens à préciser que B est bien importer car console.log apparaît dans la console

Si vous avez une idée, je suis preneur.

Bien cordialement
Arnaud

[dosy07]

Je pense que c'est le extends BaseObject qui me pose pb
Si je le retire, plus de soucis