Unable to use produced library.js as 3rd party. about webpack-library-starter

[alvisisme]

The produced library.js has been processed by the webpack.
I guess the import and export in the produced library.js in browser environment is not the same as the original ES6 import and export.

Import the source file should be OK.
tested run.js:

import {Cat, Dog} from './src/index.js';

const cat = new Cat();
const dog = new Dog();

[kfirm]

@alvisisme Yes, importing from the source would work. But what if I want someone else to use the bundled version as an ES6 module?

[alvisisme]

I tried these steps.

1. bundle the lib first (library.js / library.min.js)
2. append the following code at the end of these two files

...// the bundled code
export default  library;
// the end of file

3. update run.js

import lib from './library.js';
// import {Cat, Dog} from './library.js';

const cat = new lib.Cat();
const dog = new lib.Dog();

console.log(cat);

Maybe not a good way, but works(in the given html page).

[kfirm]

That didn't work either.

End of the bundled file:

....

exports.default = Dog;
module.exports = exports['default'];

/***/ })
/******/ ]);
});
//# sourceMappingURL=library.js.map

export default  library; 

Causes: Cannot set property 'library' of undefined

Tried a few other export default export default root['library'] and such, nothing worked.

[antondomratchev]

@kfirm Your module only exports a single default object in which case is Dog from

exports.default = Dog;
module.exports = exports['default'];

If you plan on using Cat and Dog then you should export those modules as non default exports

exports['Dog'] = Dog;
exports['Cat'] = Cat;
module.exports = exports;

EDIT:

In the above case webpack creates a modules map which is what is being loaded using the provided __webpack_require__ function.

Try doing this in your run.js

import * as library from './lib/library.js'

const dog = new library.Dog()
const cat = new library.Cat()

[quickshiftin]

I'm trying to version a fork of this library in a private Git repo and import it via npm. My goal is to have shared code between a NextJS frontend and an ExpressJS backend. Here's what I've done:

• Cloned this project
• Renamed the project in package.json from webpack-library-starter to my-lib
• Replaced occurrences of webpack-library-starter to my-lib in test/index.spec.js
• Delete all files in lib directory
• Run npm run build
• Pushed to a private Git repo

Now in one of my other projects (based on this boilerplate), I've added the module via:

npm install --save git+ssh://[email protected]:group/my-lib.git

There's a node_modules/my-lib directory after this command. Now in a file of said project I add:

import {Cat} from 'my-lib';

And the project fails to build with this error:

Error: Cannot find module 'my-lib'

Any ideas where I've gone wrong? Any help is greatly appreciated!

For What It's Worth, I also tried adding this project directly (just to eliminate other potential errors from above):

npm install --save git+ssh://[email protected]:krasimir/webpack-library-starter.git
import {Cat} from 'webpack-library-starter';

And a similar error when I try to build:

Error: Cannot find module 'webpack-library-starter'

[krasimir]

@quickshiftin can you please check what's behind the main field in my-lib/package.json. I just noticed that here it is a wrong file. I updated this repo but you may need to edit yours too.

[quickshiftin]

Ok, so I'm past that last issue - I've changed the main field in package.json to lib/my-lib.js. Now the error has become: ReferenceError: window is not defined

@krasimir I'm also getting the same result when I try using this project directly after your latest commit.

Line 10 of lib/webpack-library-starter.js

[quickshiftin]

Hey @krasimir

So I started looking around and found this Webpack issue Can't create UMD build which can be required by Node, which looks like what your library is suffering from.

I took this advice from that thread, adding this in webpack.config.js

Setting globalObject: 'typeof self !== 'undefined' ? self : this' produces exactly the same UMD header as in WebPack 3

Now your library is working from node and the browser. I'm not sure how it's working through node for other folks as it is though.

[krasimir]

The library has been updated to the latest webpack babel + typescript support. I'm not sure that the above problem exists now @quickshiftin. I just tested the following and it works:

const lib = require("./webpack-library-starter");

const d = new lib.Dog();
console.log(d.name);

the output is:

Hello world from the bundle!
Dog

My test file https://github.com/krasimir/webpack-library-starter/blob/master/lib/index.js which I run with node ./lib/index.js.

---

@kfirm maybe I'm mistaken but you misused the library. The idea is to publish and get your functionality from the bundled files in the lib folder. Not from the files under the src directory.

---

Closing this issue. Please ping me if there is still problems with the latest version.