[webpack][4] Undefined module <NomDeClasse>

**Aizen64** · 17/12/2018, 12h36

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 :

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

import { Test } from "./Test";

Le code de la classe de test est

Code :

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

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

L'erreur est :

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 ?

**Marco46** · 17/12/2018, 13h51

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

**Aizen64** · 19/12/2018, 18h48

Ma config webpack via webpack.config.js :

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
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 :

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
 
{
  "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"
  }
}

**Marco46** · 19/12/2018, 20h37

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.

[webpack][4] Undefined module <NomDeClasse>

Outils

Discussions similaires

Partager

Partager