Webpack exported variable is not visible by browser

Question

Here is my bundle file, i have included components here.

import Container from './Components/Container/Container.component.js'; import Heading from './Components/Heading/Heading.component.js'; const Components = { Container: Container, Heading: Heading } module.exports = Components;

the goal is to make this Components variable visible in the browser tag. so far console.log(Components) is undefined.

module.exports = { entry: { bundle: "./src/bundle.js" }, output: { path: path.resolve(__dirname, "dist/js"), filename: "bundle.js", library: "Components", libraryTarget: "var", }, module:{ rules: [ { test: /\.js$/, exclude: path.resolve(__dirname, "node_modules"), use: { loader: "babel-loader", options: { presets: ["env", "react"] } } } ] }, target: "web" }

And this is my webpack config file. what do i do inside my webpack config to make Components to be visible in browser without assigning it to window object. in other words, make it global and beign able to import it via webpack into other js files.

How is <Components.Container> and <Components.Heading> being rendered? — Xenyal
– Xenyal, Commented Aug 20, 2018 at 5:49
i didnt get to render yet. i want to export it first. but render is standart, ReactDOM.render() — Anton Stafeyev
– Anton Stafeyev, Commented Aug 20, 2018 at 5:51
i just ran renderer, react throws and error "expected string or object etc..." it is undefined — Anton Stafeyev
– Anton Stafeyev, Commented Aug 20, 2018 at 5:53
Ahh, then I guess there's two questions here: 1) Is the bundle being properly loaded onto your site? and 2) if 1 is true, then it'll probably be an issue with your webpack config — Xenyal
– Xenyal, Commented Aug 20, 2018 at 5:54
if i ran console.log(Components) inside of the bundle file it works. but if i call it from an external script in browser it says it is undefined, i have the answer for it already./ web pack puts it in namespace. so the question was how to bundle with global variables available from another script tag in browser — Anton Stafeyev
– Anton Stafeyev, Commented Aug 20, 2018 at 5:56

Anton Stafeyev · Accepted Answer · 2018-08-20 06:09:57Z

SOLUTION (as i understood it and here is a duplicate actually, answered by @dreyescat)

1) Output target must be a library. so webapck output should look like

output: { path: path.resolve(__dirname, "dist/js"), filename: "Bundle_name", library: "Library_name", libraryTarget: "var" //See below },

libraryTarget: "var" - (default) When your library is loaded, the return value of your entry point will be assigned to a variable - https://webpack.js.org/configuration/output/#output-librarytarget

For those who are looking to do the same make sure you export your varibale as

module.exports = your_variable;

So for some reason i had it all in my file and it didn't work, and i used webpack --watch. i ran webpack without watch to compile it once and it worked. not sure why.

it just doesn't work with webpack-cli --watch, while webpack --watch is totaly fine

Collectives™ on Stack Overflow

Webpack exported variable is not visible by browser

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related