problem requiring modules inside bundles

[enricosapicco]

Hey people;

I have been developing a framework. I want to publish it as an npm package. I bundle my code with webpack on framework project and I am using bundled js file inside the game project which is bundled via browserify. I wanted to test it with different bundlers. My case is;

On framework;

the folder hieararchy is;

-src

--index.js

-release

--index.js

Webpack bundles ./src/index.js to ./release/indes.js

in ./src/index.js I have simplest code snippet as follows;

module.exports = 'tattaratatta';

on game project that I use framework, I have app.js and bundle.js. on app.js inside the game project I have the following code;

var fr = require('./../framework/release/index.js');

console.log(fr);

this logs out an empty object. but when I change it to;

var fr = require('./../framework/src/index.js');

console.log(fr);

it logs out tattaratatta correctly.

I watched some tutorials on youtube, read some tutorials online but can't find out what I am doing wrong. Appearently, I can't seem to require te module from the bundled file. Any idea?

[mattstyles]

You have a few potential issues:

The key one, I think, is that you aren't including your module properly, although you may also not be bundling it correctly.

The process should be as follows:

1) Create your source files using whatever language/language features you require

2) Your build step converts your source code into something the browser can use, additionally it may prepare this for a module system (this is where your issues are I believe).

3) Publish your module, if you are pushing to npm you can assume that the consumer is in a commonJS module world so you don't need to bundle at all. You only need to bundle if you are additionally shipping your module into a format that can be included directly within the browser, you can publish this version to npm also but you should be bundling it differently.

4) If publishing to npm your module package.json should contain a 'main' field, usually something like "main": "lib/index.js" or "main": "dist/index.js", or even "main": "src/index.js" if you are writing in straight JS (note that if your module targets node only and you specify and engine to use then there should be no need to transpile, just use language features that your specified engine version understands, with the browser this becomes trickier as you don't know what language features will be supported).

When you consume a module you should:

1) `npm install -S myAwesomeModule`

2) inside your code you use commonJS module spec to import the module: `var awesomeModule = require('myAwesomeModule')`. At no point should you be reaching in to a module to require it, you should have one point of entry into the module to import it into the project. In short, require('./../framework/release/index.js') is not a good way to include it, the "main": "release/index.js" is all that is needed to tell your module system where to include the dependency from (pretty sure its a required field for this very reason).

3) Now that you have littered your browser/project code base with `require('XXX')` you need to convert that into something the browser can use, browserify or webpack does this bundling/packaging.

You should not bundle your module if npm is your target. You may additional create a bundled version for use in the browser and your consumers may choose to use npm to manage those dependencies, at which point you may include <script src="node_modules/myAwesomeModule/release/bundle.js"></script> (it would be best you have an additional system that copies dependencies from node_modules into a build directory, but this is a separate concern).

In short, you should not be using webpack to create a bundle for your module, the only caveat is if you are creating a standalone build. If your project requires transpilation (from newer language features, or from typescript or whatever) than you should do that in your module and ship transpiled code (check out "jsmain" package field for places where this is not entirely true, not that it is non-standard), the bundling is a separate concern.

If you want a more specific answer paste in your `release/index.js`, I expect that you have used webpack to create a runnable version i.e. there will be no top-level export for you to import.