search

krasimir / webpack-library-starter

Webpack based boilerplate for producing libraries (Input: ES6, Output: universal library)
MIT License
1.36k stars 290 forks source link

Unable to use produced library.js as 3rd party. #37

Closed kfirm closed 3 years ago

kfirm commented 6 years ago

Hi, I cloned the the project and added the following html page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="module" src="run.js">
</script>
<body>

</body>
</html>

and run.js: 

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

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

And tried running in in Chrome, But I keep getting Uncaught SyntaxError: The requested module does not provide an export named 'Cat' I can't figure out why this is....

alvisisme commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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:

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

npm install --save git+ssh://git@my-gitlab-server.net: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://git@github.com: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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 3 years ago

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.