Importing webpack bundle throws module.default is not a function - javascript

I've built a package A and trying to load and use from B.
A is being transpiled with Babel and then bundled with webpack.
A index.js:
function A_moduleFunction() { // A logic }
export default A_moduleFunction
webpack.config.js
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'transpile/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
}
}
On package B, I'm trying to import A and call A_moduleFunction:
import a_moduleFunction from 'A' // A is defined in package.json
a_moduleFunction()
But Then an error is thrown:
TypeError: (0 , _a_moduleFunction.default) is not a function
I used same definitions for webpack and Babel from another project of mine, which uses requires instead of imports..
What am I doing wrong ?

Related

Bundling of independent or dependent js files using webpack and exposing methods to other js files or html <script> code

I have simple three files.
one add.js
function add(x,y){
return x+y
}
two sub.js
function sub(x,y){
return x-y
}
three calc.js
console.log("Add : "+add(5,1))
console.log("Sub : "+sub(5,1))
entry.js
import 'add.js'
import 'sub.js'
import 'main.js'
after webpack when i see.
it tells add method is not found.
my webpack.config
const path = require('path');
module.exports = {
mode:'development',
entry: './entry.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
why the methods are not exposed to main.js.
if i add window.add = add and window.sub = sub then it is exposed, with plain js why the methods are not exposed by main.js.
The purpose of asking is i am having plenty of old js files which as multiple functions and inside html code also these functions are called.
Is there any simple configuration in webpack to expose these function?

Webpack Externals Configuration for a Local Library

I want to setup my Webpack config (v4+) to exclude an import that is referencing a local library. In my app, I import this library like so:
/src/index.js
import foo from '../foo/foo'
console.log(foo);
/foo/foo.js
export default foo = "bar";
webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
externals: {
"foo": path.resolve(__dirname, "./foo/foo"),
}
};
However, this library is actually already referenced globally in the site where I'm deploying my application. So I do not want this library bundled with my application (I still need to import it so that I can transpile my typescript without errors and use intellisense).
I found out that I can easily exclude a library from being bundled by utilizing the externals property like so:
module.exports = {
externals: {
"jquery": "jQuery"
}
}
I've been unsuccessful at doing the same with the library that I'm importing. How would I go about doing this? I've tried the following and the library is still included in my bundle:
I have been researching documentation and can only seem to find examples related to node modules and nothing specific to my requirements.
Please let me know if you need any additional details. Thanks in advance!
In order for WebPack to treat your import as external, your import declaration must be using the same alias you defined in the WebPack extenals configuration, and NOT a relative path:
import Foo from 'foo';
WebPack:
module.exports = {
externals: {
"foo": path.resolve(__dirname, "./path/to/foo")
}
}

Is webpack libraryTarget 'umd' supposed to work with ES6 modules?

I'm trying to distribute a node based library with webpack.
I've seen that most of js libraries around can be used both with:
commonJs syntax
const lib = require('library')
or ES6 syntax
import * as lib from "library"
I have followed this tutorial and my final webpack.config.js looks like this:
var path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'sepa.js',
library: 'sepajs',
libraryExport: 'default',
libraryTarget: 'umd',
umdNamedDefine: true,
globalObject: "typeof self !== 'undefined' ? self : this"
}
};
although on the browser this import statement results in an empty module:
import * as SepaJs from "./sepa.js"
Is webpack suppose to export a commonJs based library to ES6 module library?
Should I have to transcompile it with babel? Can I have one bundle file with both module solution?

how to import a webpack submodule?

in my setup, I have a react component as part of an npm package called 'share-sheet'. It's managed by webpack as such:
webpack.config.js
...
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
entry: path.join(__dirname, 'src/index')
...
package.json
...
"main": "dist/bundle.js",
...
index.js
import FancyButton from 'components/FancyButton'
import FancyHellicopter from 'components/FancyHellicopter'
console.log(`my fancy button component: ${FancyButton}`)
module.exports = { FancyButton, FancyHellicopter }
On the other hand I have a webapp, which also uses webpack, which is setup as such:
app.js
import _ from 'lodash'
import sharesheet from 'share-sheet'
console.log(_) // outputs the lodash object correctly.
console.log(sharesheet) // outputs empty object.
console.log(sharesheet.FancyButton) // outputs undefined.
Once I run the app.js, the lines inside the share-sheet's index.js get printed correctly in the console, but once inside the app.js itself, the sharesheet is an empty object. So somehow the object exported at module.exports doesn't get returned once the share-sheet module is imported. what is wrong exactly ?
It's because webpack doesn't know the exporting strategy of 'share-sheet' package. Configuring output.libraryTarget to commonjs2 should solve the problem.
webpack.config.js
...
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
libraryTarget: 'commonjs2' // <----------
},
entry: path.join(__dirname, 'src/index')
...
You can find more informations about building library with webpack in here.

How to require webpack generate js file with requirejs?I use vue-cli

I make my project by vue-cli.
vue init webpack vue-demo
cd vue-demo
npm install
npm run dev
Now I want to devolop some components. And i want to use them in requirejs.
webpack config
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js',
libraryTarget: 'umd',
library:'senyint'
}
Q1:It generate three files. app.js manifest.js vendor.js
The demo has a Hello.vue . I want to require the js file by what webpack generate.
But I require them,it's undefiend . Why? What's the wrong?
Where I should export ?
Now I export in main.js like this.
import Hello from 'components/Hello'
module.exports = {
Hello
}
Q2:I dont want to package without vue.
So i configure this
externals: {
vue: 'vue'
}
If i do this, when npm run dev show error "Uncaught TypeError: Cannot read property 'config' of undefined"
It cause cant find Vue.
If i configure externals vue how to make it run?
Q1:
Open the javascript file app.js i found
define("senyint", ["vue"], factory);
at this line. The 'senyint' is a package name,webpack generate the js,but it doesnt work.
I modify the code like this
define(["vue"], factory);
Require it and it works. But I dont know why.... I just can resolve this problem;
main.js export .vue components
import Hello from 'components/Hello.vue'
export const scom = {
Hello
}
requirejs config
requirejs.config({
baseUrl: 'js/common',
paths: {
module: '../modules'
},
shim: {
app: {
deps:['vue','manifest','vendor']
}
}
})
requirejs(['module/demo', 'app'], function (demojs, app) {
debugger
console.log(app)
})
Q2:
I builded my project with vue-cli webpack template. (not webpack-simple)
In build directory has 'webpack.base.conf.js' and 'webpack.prod.conf.js'
Modify webpack.prod.conf.js add
externals: {
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
},
and dont add the code in 'webpack.base.conf.js' .Then npm run build it will package without vue.js .Npm run dev use webpack.base.conf.js ,it will run with vue

Categories

Resources