MODULE_NOT_FOUND Cannot find module 'vue'

[romsar]

Hey
After I setup SSR and run "node ssr.js" it throws errors like MODULE_NOT_FOUND Cannot find module 'vue'.
I have only vue-server as prod dependency in package.json.
All other packages are dev dependencies.
Should I move Vue and other packages to dependencies from devDepencendies?
p.s. I compile my assets in development env.

[secondmanveran]

Having the same issue more or less. Are you using vite, or webpack or what?

[romsar]

Having the same issue more or less. Are you using vite, or webpack or what?

Webpack. I fix that problem by making dev dependencies available on production in package.json

[secondmanveran]

So you're saying you have node_modules installed in production servers? Or maybe I'm misunderstanding ...

[romsar]

So you're saying you have node_modules installed in production servers? Or maybe I'm misunderstanding ...

I just moved my devDependencies to dependencies in package.json and now its working.
That's happened probably because we compile our js & css assets somewhere else than inertia project folder (in my case its github actions).

Btw also you can try to remove externals: [webpackNodeExternals()], in webpack.mix.js - that should include vue and other vendors in your ssr.js, but in my case it does not work (i don't have much time to find why).

[secondmanveran]

I use Vite, not Webpack, but I do use Github Actions to compile all my assets for both my app and ssr but on my Ubuntu server it won't start up. Says it can't find vue.

I wonder if I need to somehow build a vendors javascript file that I can point the vue alias at for ssr? I'm really not understanding why it's not working.

[secondmanveran]

@RomanSarvarov

Can you be explicit please about which dev dependencies you moved to dependencies?

Nothing seems to work for me except actually installing node_modules on my server.

The SSR compilation should bundle all dependencies into the ssr.js file so that no other files are required to run. It's only loaded once, and done so via a background process so size isn't an issue.

[munkeywolf00]

@secondmanveran Have you figured this out? Also having this issue with Laravel Jetstream SSR

[secondmanveran]

@munkeywolf00

Yeah as far as I've found, you have to have a node_modules directory installed on your server.

It does become a little tricky in that you need to run npm install on your server to get all the dependencies, but that will create files you likely don't have in version control.

Let me know if you need a Forge deploy setup, I can share mine with you.

[munkeywolf00]

@secondmanveran In out setup in Forge, we install the packages, run build, then remove the node_modules. We found that removing node_modules does not make it work. So after remove node_modules, we install vite, npm install vite --save-dev. Then it works.

That is the best we found so far.

[munkeywolf00]

Whether it should be vite installed right after or can be other packages. We haven't tested it.

[secondmanveran]

Then why the hell did you ask if you have a solution?

[munkeywolf00]

Then why the hell did you ask if you have a solution?

Sorry. I didn't mean to say that in a bad way. My apologies. I was asking because, you might have other solution that could be better. And really looking to a solution where it does not need to install vite right after. My bad.

[munkeywolf00]

Thank you for the response by the way. I appreciate it.

[secondmanveran]

Ah. Nope. I'm not sure what vite would have to do with it, if you run build before you delete the node_modules, then your build is done. Vite is a build tool, it isn't used in production that I'm aware of ... so no ... I have nothing for you.

Best.

[munkeywolf00]

Ah. Nope. I'm not sure what vite would have to do with it, if you run build before you delete the node_modules, then your build is done. Vite is a build tool, it isn't used in production that I'm aware of ... so no ... I have nothing for you.

Best.

Yeah was thinking it might not be about Vite at all. But thank you for the responses. I appreciate it.

[munkeywolf00]

@secondmanveran If you don't mind, can you share your Forge deploy setup for this? It would really help it case our solution won't work anymore.

[secondmanveran]

Sure.

This specific site uses Jetstream and Octane so you'll see the octane command here as well, which of course you can just ignore. Also we deploy the latest tag so you can also remove that part if you don't need it.

The important part is to reset your local git repo to remove any uncommitted files so git will actually pull your files down.

cd /home/forge/example.com
git reset --hard
git fetch origin $FORGE_SITE_BRANCH --tags
latest=$(git describe --tags `git rev-list --tags --max-count=1`)
git checkout $latest
git reset --hard $latest 

$FORGE_COMPOSER install --no-dev --no-interaction --prefer-dist --optimize-autoloader

( flock -w 10 9 || exit 1
    echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9>/tmp/fpmlock

if [ -f artisan ]; then
    $FORGE_PHP artisan down
    $FORGE_PHP artisan migrate --force
    $FORGE_PHP artisan optimize:clear
    
    npm install
    npm run prod

    ! $FORGE_PHP artisan octane:status || $FORGE_PHP artisan octane:reload
    
    $FORGE_PHP artisan horizon:terminate
    $FORGE_PHP artisan inertia:stop-ssr
    
    $FORGE_PHP artisan up 
fi

Hope some of this can be of use for you.

Best.

[munkeywolf00]

Got it. Thank you