javascript - Webpack library function is not a function

As the title says, i'm getting an error in the browser Uncaught TypeError: MYLIB.init is not a function.

webpack.config.js:

As you can see i have set the library and libraryTarget, which is usually the problem with this.

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'mylib.min.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'MYLIB',
    libraryTarget: 'var'
  },
  devServer: {
    contentBase: './dist/demo',
    https: {
      key: fs.readFileSync(__dirname + '/certs/key.pem'),
      cert: fs.readFileSync(__dirname + '/certs/cert.pem'),
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            '@babel/preset-env',
            {
              "plugins": ['@babel/plugin-proposal-class-properties'],
            }
          ]
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js']
  },
};

index.js:

Here i'm exporting correctly the init function.

'use strict';

export function init(provider, options){
  alert('init!');
}

index.html:

The path to the js file is correct and is found by the browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lib Demo</title>

  <script src="../mylib.min.js"></script>
</head>
<body>
  <script>
    MYLIB.init('bla', {});
  </script>
</body>
</html>

package.json:

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production",
    "watch": "webpack --watch",
    "start": "webpack serve --open --host 0.0.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.13.9",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }

npm run build runs successfully: webpack 5.24.2 piled successfully

then npm run start, it opens the browser and i get that error Uncaught TypeError: MYLIB.init is not a function.. What am i doing wrong? i have a similar setup that works perfectly fine with older package versions so i'm guessing something changed with webpack and i don't know what.

As the title says, i'm getting an error in the browser Uncaught TypeError: MYLIB.init is not a function.

webpack.config.js:

As you can see i have set the library and libraryTarget, which is usually the problem with this.

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'mylib.min.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'MYLIB',
    libraryTarget: 'var'
  },
  devServer: {
    contentBase: './dist/demo',
    https: {
      key: fs.readFileSync(__dirname + '/certs/key.pem'),
      cert: fs.readFileSync(__dirname + '/certs/cert.pem'),
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: [
            '@babel/preset-env',
            {
              "plugins": ['@babel/plugin-proposal-class-properties'],
            }
          ]
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js']
  },
};

index.js:

Here i'm exporting correctly the init function.

'use strict';

export function init(provider, options){
  alert('init!');
}

index.html:

The path to the js file is correct and is found by the browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lib Demo</title>

  <script src="../mylib.min.js"></script>
</head>
<body>
  <script>
    MYLIB.init('bla', {});
  </script>
</body>
</html>

package.json:

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production",
    "watch": "webpack --watch",
    "start": "webpack serve --open --host 0.0.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.13.9",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }

npm run build runs successfully: webpack 5.24.2 piled successfully

Share Improve this question asked Mar 4, 2021 at 18:11 Julien 2,3293 gold badges30 silver badges53 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

Your webpack configuration is wrong where you are using babel-loader(plugins will not be inside presets).

Correct:

{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: [
                        '@babel/preset-env'
                    ],
                    "plugins": ['@babel/plugin-proposal-class-properties'], //<--Notice here
                }
},

Secondly:

Change the version of webpack dev server as stated here to "^4.0.0-beta.0" and More Detail on this is here at github page.

Final Configuration, I checked with:

const path = require('path');

module.exports = {
    entry: {
        mylib: ['./src/index.js']
    },
    output: {
        filename: 'mylib.min.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'MYLIB',
        libraryTarget: 'var'
    },
    devServer: {
        static: path.join(__dirname, 'public'),
        hot: true,
        port: 3000
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: [
                        '@babel/preset-env'
                    ],
                    "plugins": [
                        '@babel/plugin-proposal-class-properties'
                    ],
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['*', '.js']
    },
};

Package Json:

    "main": "dist/mylib.min.js",
    "description": "Light Weight Next Generation MAP-Renderer",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --mode=production",
        "watch": "webpack --watch",
        "start": "webpack serve --mode development --config webpack.config.js"
    },
"devDependencies": {
        "@babel/core": "^7.13.8",
        "@babel/plugin-proposal-class-properties": "^7.13.0",
        "@babel/preset-env": "^7.13.9",
        "babel-loader": "^8.2.2",
        "css-loader": "^5.1.1",
        "style-loader": "^2.0.0",
        "webpack": "^5.24.2",
        "webpack-cli": "^4.5.0",
        "webpack-dev-server": "^4.0.0-beta.0"
    },

Screenshot:

Thanks!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Webpack library function is not a function - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)