[webpack][4] Undefined module <NomDeClasse>

Hello,

je vais essayer de donner une explication claire, petite précision, Webpack et JS me donnent des boutons alors, une explication claire serait appréciée.

J'essaie de faire des classes en JS pour avoir un code plus maintenable et pourtant le chargement ne fonctionne pas.

Le code :

Code:

import { Test } from "./Test";

Le code de la classe de test est
Code:

1 2 3 4 5 6 7 export class Testouille { static test() { console.log( "test" ); } }
L'erreur est :

Citation:

ERROR in ./assets/js/src/Test.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null

J'utilise babel 7.1 avec Webpack 4.1.

Une idée ?

Pourrais-tu poster ton package.json et tes confs webpack et babel stp ?

Ma config webpack via webpack.config.js :

Code:

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
"use strict";
const webpack              = require( 'webpack' );
//var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CleanWebpackPlugin     = require( 'clean-webpack-plugin' );
var AutoCleanBuildPlugin   = require( 'webpack-auto-clean-build-plugin' );
const MiniCssExtractPlugin = require( "mini-css-extract-plugin" );
 
var path       = require( "path" );
module.exports =
    {
        entry  : {
            'css'        : [ './assets/css/common.scss' ],
            'common'     : [
                'babel-polyfill',
                "use strict";
const webpack              = require( 'webpack' );
//var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CleanWebpackPlugin     = require( 'clean-webpack-plugin' );
var AutoCleanBuildPlugin   = require( 'webpack-auto-clean-build-plugin' );
const MiniCssExtractPlugin = require( "mini-css-extract-plugin" );
 
var path       = require( "path" );
module.exports =
    {
        entry  : {
            'css'        : [ './assets/css/common.scss' ],
            'common'     : [
                'babel-polyfill',
                './assets/js/components/app.js',
                './assets/js/components/form.js'
            ],
            'home'   : [ './assets/js/home.js' ],
            'account'    : [ './assets/js/login.js' ],
            'login'      : [
                './assets/js/services/login/login.js',
                './assets/js/services/login/passwordReset.js'
            ]
        },
        output : {
            path    : path.resolve( __dirname, 'dist' ),/*,
            filename: "js/[name].[hash].min.js"*/
        },
        watch  : true,
        mode: 'development',
        module : {
            rules:
                [
                    {
                        test: /\.scss$/,
                        use :
                            [
                                MiniCssExtractPlugin.loader,
                                'css-loader',
                                'sass-loader'
                            ]
                    },
                    {
                        test   : /\.(eot|ttf|svg|woff|woff2)(\?v=(.*))?$/,
                        exclude: path.resolve( __dirname, "assets/img" ),
                        use    : [
                            'file-loader?name=fonts/[name].[ext]&publicPath=/dist/'
                        ]
                    },
                    {
                        test   : /\.svg$/i,
                        include: path.resolve( __dirname, "assets/img" ),
                        use    : [
                            'url-loader?limit=10000&name=img/[hash].[ext]&publicPath=/dist/&img?progressive=true',
                        ]
                    },
                    {
                        test: /\.(jpe?g|png|gif)$/i,
                        use : [
                            'url-loader?limit=10000&name=img/[hash].[ext]&publicPath=/dist/&img?progressive=true',
                        ]
                    },
                    {
                        test   : /\.js$/,
                        exclude: /(node_modules|bower_components)/,
                        use    : {
                            loader : 'babel-loader',
                            options: {
                                presets: [
                                    [
                                        "env",
                                        {
                                            "targets": {
                                                "ie": 11
                                            }
                                        }
                                    ]
                                ],
                                filename: 'js/[name].[hash].js'
                            }
                        }
                    }
                ]
        },
        plugins:
            [
                new webpack.ProvidePlugin( {
                    $     : "jquery",
                    jQuery: "jquery"
                } ),
                new CleanWebpackPlugin( [
                    'dist/js',
                    'dist/css'
                ], {
                    root   : __dirname,
                    verbose: true,
                    dry    : false,
                    exclude: []
                } ),
                new AutoCleanBuildPlugin(),
                new MiniCssExtractPlugin
                (
                    {
                        filename: 'style.[hash].css',
                        publicPath: 'dist/'
                    }
                ),
                //new ExtractTextPlugin( {filename: "css/style.[hash].css"} ),
                function () {
                    this.plugin( "done", function ( stats ) {
                        require( "fs" ).writeFileSync(
                            path.join( __dirname, "assets/config", "version.json" ),
                            JSON.stringify( stats.toJson().assetsByChunkName ) );
                    } );
                }
                // Minify assets.
                // new webpack.optimize.UglifyJsPlugin( {
                //   compress: {
                //     warnings: false // https://github.com/webpack/webpack/issues/1496
                //   }
                // } )
            ]
    }

et le package.json

Code:

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
 
{
  "name": "mon-projet",
  "version": "1.0.0",
  "description": "A package",
  "author": "55555>",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "array-foreach": "1.0.2",
    "babel-core": "^6.26.3",
    "babel-loader": "latest",
    "babel-polyfill": "latest",
    "babel-preset-env": "^1.7.0",
    "chart.js": "2.4.0",
    "classlist-polyfill": "1.2.0",
    "clean-webpack-plugin": "latest",
    "core-js": "2.5.1",
    "css-loader": "latest",
    "custom-event-polyfill": "latest",
    "es6-symbol": "latest",
    "extract-text-webpack-plugin": "latest",
    "file-loader": "latest",
    "formdata-polyfill": "3.0.7",
    "glob": "7.1.1",
    "gulp-babel": "^8.0.0",
    "img-loader": "latest",
    "imports-loader": "latest",
    "list.js": "1.5.0",
    "mini-css-extract-plugin": "latest",
    "moment": "^2.22.2",
    "node-sass": "latest",
    "resolve-url-loader": "latest",
    "sass-loader": "6.0.2",
    "style-loader": "latest",
    "url-loader": "latest",
    "webpack": "^4.17.2",
    "webpack-auto-clean-build-plugin": "latest",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "chart.js": "2.4.0",
    "glob": "7.1.1",
    "node-sass": "latest",
    "sass-loader": "6.0.2",
    "css-loader": "latest",
    "url-loader": "latest",
    "img-loader": "latest",
    "file-loader": "latest",
    "style-loader": "latest",
    "imports-loader": "latest",
    "resolve-url-loader": "latest",
    "extract-text-webpack-plugin": "latest",
    "webpack-auto-clean-build-plugin": "latest",
    "clean-webpack-plugin": "latest",
    "list.js": "1.5.0",
    "formdata-polyfill": "3.0.7",
    "babel-loader": "latest",
    "babel-polyfill": "latest",
    "custom-event-polyfill": "latest",
    "es6-symbol": "latest",
    "array-foreach": "1.0.2",
    "classlist-polyfill": "1.2.0",
    "core-js": "2.5.1",
    "mini-css-extract-plugin": "latest"
  }
}

Tu as une tonne de dependencies qui devraient être des devDependencies (les loaders, node-sass, glob, les webpack, etc ...) et tu as des dépendances (dev et projet) importées en double avec des versions différentes.

Je te suggère de commencer par nettoyer tout ça en faisant le point package par package. On verra ensuite ce que ça dit.