npm link nollup build to my app

[itaydafna]

Should I be able to npm link a library I'm building and serving with nollup to my app?

If so, what are the steps I should take in order to achieve this?

When I'm using npm link to link my library's rollup build dist to my app it works fine. However, if I try to do the same using nollup -c --watch to build and serve my library, my app stops recognizing my lib.

[PepsRyuu]

Do you have an example project of this with the Rollup version? Off the top of my head it sounds like some sort of issue resolving symlinks. Is there a particular error that's coming up from Nollup? How is the library imported?

[itaydafna]

I created 2 demo projects to demonstrate my issue:

Demo lib: https://github.com/itaydafna/demo-nollup-lib

Demo App: https://github.com/itaydafna/demo-nollup-app

Steps to reproduce:

1. Clone both repos into the same root directory
2. Run npm install in both repos
3. In demo-nollup-lib run npm run start:watch (runs rollup watch)
4. In demo-nollup-app run npm start
5. This works and the lib is linked properly to the app
6. In demo-nollup-lib delete the dist folder and run npm run start:nollup
7. In demo-nollup-app terminate and restart the app using npm start
8. The app doesn't recognize the lib, error I'm getting: Module not found: Can't resolve 'demo-nollup-lib' in '{root-path}/demo-nollup-app/src'

Thanks! 🙏

[PepsRyuu]

Great! Will give it a try later today! :)

[PepsRyuu]

Ah okay, I see what you're trying to do now. From my initial look at it, unless I'm misunderstanding something, this is expected behaviour. Nollup doesn't generate anything to the disk by design, all generated files are stored in memory and served by the Nollup web server. So when the other project (Webpack) tries to look for the library using fs, it won't be able to find it which is entirely expected.

You've a few options to handle this, but it would involve creating custom tooling:

• Rather than using the Nollup CLI, consider using the Nollup API directly instead with custom file watchers. https://github.com/PepsRyuu/nollup/blob/master/docs/compiler.md

• Write a custom development plugin for Nollup that outputs everything to disk in the expected locations using the generateBundle hook.

• Write a custom development plugin for Webpack that pulls in the library from a URL rather than disk, and then from disk during production builds.

Hope this makes sense and helps!

[itaydafna]

Awesome, thanks for the detailed response!

I'll explore the solutions you suggested and post here in case I get one of them to work for me.

[skedaddleconnect]

@PepsRyuu Would you be able to provide some info on how to output to disk when using the generateBundle() hook? Currently facing the same issue in that I need the files on disk.

Thanks!

[PepsRyuu]

Off the top of my head, something like the following:

rollup.config.js

import fs from 'fs';

export default {
    plugins: [
        process.env.NODE_ENV === 'development' && {
            generateBundle (outputOptions, bundle) {
                if (!fs.existsSync('dist')){ 
                    fs.mkdirSync('dist');
                }

                for (let key in bundle) {
                    let obj = bundle[key];
                    fs.writeFileSync('dist/' + obj.fileName, obj.code || obj.source);
                }
            }
        }
    ],
    watch: {
        exclude: ['dist']
    }
}

[skedaddleconnect]

Ah - just tried this, seems to be outputting it correctly, but I get a -[hash].js at the end. Is there any way to resolve this hash?

Thanks again

[PepsRyuu]

No, it's an intentional design choice in order to maintain a predictable filename and simplify configuration between dev and prod. You can always use string replace and replace it with whatever you want based on the setup.