CODEWITHSUNDEEP
javascriptwebpack
Ala Eddine Menai
Ala Eddine Menai

Reputation: 2870

Functions are not available in webpack bundle

I'm working on Arrow project and I'm in phase to create the Bundle file using Webpack.

I grouped my modules in a folder. and for each folder I have index.js where I export all modules.

Also, I have global index.js that imports all index.js like this :

import * as Has from "./scripts/array/has"
import * as  Math from "./scripts/array/math"
import * as  Arrow from "./scripts/array"
export { Has, Math, Arrow }

Now, I want to create my bundle from this global index.js .

My Webpack configuration looks like :

const path = require("path")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
    mode: "development",
    entry: {
        arrow: "./src/1.x.x/index",
    },
    plugins: [
        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './build',
    },
    output: {
        filename: "[name]-alpha.js",
        path: path.resolve(__dirname, 'build'),
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
}

The Issue is when I try to import my functions from the build the functions do not appear in the Autocomplete and I received errors that these functions are undefined!

I have just ___esModule :

import { __esModule } from "./arrow-alpha"

I want to let developers use and import the functions like the example

import {omit} from "arrow" // arrow is the bundled file

const frameworks = ["react", "vue", "ember", "angular"];
const withoutAngular = omit(frameworks,"angular");

console.log(withoutAngular); // ["react", "vue", "ember"]

I blocked in this step for days and I could not figure out the issue.

Upvotes: 0

Views: 1783

Answers (2)

tmhao2005
tmhao2005

Reputation: 17474

It sounds like you are looking to export your code as library with webpack. In order to do so, you should export your library module as umd which can work for backend/client side so IDE can also understand what you export. Just add following configuration in your webpack.config.js:

output: {
  libraryTarget: 'umd', // style for your library
  library: 'yourLibName', // if you keen to have a name for library
  // ...
},

NOTE: this only works if you pass to webpack a cjs style code, otherwise it will convert to harmony module which you can't export accordingly (such as esm module)

In order to make sure babel would convert your esm module to commonjs, you have to set modules to commonjs like this:

babel.config.js or .babelrc

[
  "@babel/preset-env",
  {
    "modules": "commonjs",
  }
]

Upvotes: 3

Dolly
Dolly

Reputation: 2572

Adding below Configuration. Will eject your final bundle to be accessed as Window.Arrow on adding script to index.html page

output: {
        filename: "[name]-alpha.js",
        path: path.resolve(__dirname, 'build'),
        library: 'Arrow',
        libraryTarget: 'var'
    },

and your index.js page inside src folder to be as

module.exports = require('./scripts/array');

Upvotes: 0

Related Questions