0

I have a fresh Laravel 9 app with Vue 3 SPA built with TS (using Metronic 8.1 template) and I'm using webpack. Whenever I try to build the assets, it stays stuck at 12% and then does absolutely nothing.

Running Laravel using Sail on WSL2. After doing some research I found out that it could be a memory issue, so I tried to change this like so:

.wslconfig

[wsl2]
memory=10GB 
localhostForwarding=true

And then running Restart-Service LxssManager as administrator.

However, nothing I've tried so far seems to work. I have another Laravel 9 app in a different container, which does not use any framework and uses vanillaJS and that compiles no problem. Any help here?

webpack.mix.js

const mix = require("laravel-mix");
const path = require("path");

mix.ts("resources/ts/app.ts", "public/js")
    .vue({ version: 3 })
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /.mjs$/i,
                    resolve: {
                        byDependency: { esm: { fullySpecified: false } },
                    },
                },
            ],
        },
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "resources/ts/src/"),
            },
        },
    });

.tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitAny": false,
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "resources/ts/src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "resources/ts/src/**/*.ts",
    "resources/ts/src/**/*.tsx",
    "resources/ts/src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}
pu4cu
  • 155
  • 5
  • 19
  • https://stackoverflow.com/questions/40112279/npm-install-javascript-heap-out-of-memory has instructions on how to also increase the memory for npm commands. Increasing WSL memory does not translate to NPM using as much memory as is available – apokryfos Jul 10 '22 at 09:41
  • @apokryfos Since I'm using Sail, I'm not sure which command to use and where? Do I do it within the project directory? Or within the docker root directory? – pu4cu Jul 10 '22 at 12:22
  • Try putting `NODE_OPTIONS=--max_old_space_size=8000` in your containers environment configuration – apokryfos Jul 10 '22 at 13:56
  • How do I go about doing that? Do you mean `docker-compose.yml`? My file does not have a npm service – pu4cu Jul 12 '22 at 16:24
  • Reading https://docs.docker.com/compose/environment-variables/#set-environment-variables-in-containers i would imagine you'd need to put it under the `environment` section of your corresponding container – apokryfos Jul 13 '22 at 13:25

0 Answers0