Configuring "writeToDisk" in Webpack Encore - javascript

Intuitively, I'd think that the writeToDisk option could be configured under configureDevServerOptions, but trying to do so yields this error:
Running webpack-dev-server ...
WARNING Webpack is already provided by Webpack Encore, also adding it to your package.json file may cause issues.
WARNING Passing an absolute URL to setPublicPath() *and* using the dev-server can cause issues. Your assets will load from the publicPath (http://localhost:9091/build/) instead of from the dev server URL.
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'writeToDisk'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
error Command failed with exit code 2.
The value has also been attempted to be set through the getWebpackConfig() object, but the same error gets generated.
The next way to attack this could then be through devMiddleware due to this writeToDisk option. This produces this error:
Running webpack-dev-server ...
WARNING Webpack is already provided by Webpack Encore, also adding it to your package.json file may cause issues.
WARNING Passing an absolute URL to setPublicPath() *and* using the dev-server can cause issues. Your assets will load from the publicPath (http://localhost:9091/build/) instead of from the dev server URL.
TypeError: Cannot set property 'writeToDisk' of undefined
- webpack.config.js:99 Object.<anonymous>
C:/path/to/project/webpack.config.js:99:41
- apply-options-callback.js:13 module.exports
[project]/[#symfony]/webpack-encore/lib/utils/apply-options-callback.js:13:36
- config-generator.js:616 ConfigGenerator.buildDevServerConfig
[project]/[#symfony]/webpack-encore/lib/config-generator.js:616:16
- config-generator.js:60 ConfigGenerator.getWebpackConfig
[project]/[#symfony]/webpack-encore/lib/config-generator.js:60:74
- config-generator.js:631 module.exports
[project]/[#symfony]/webpack-encore/lib/config-generator.js:631:22
- index.js:1634 Encore.getWebpackConfig
[project]/[#symfony]/webpack-encore/index.js:1634:16
- EncoreProxy.js:51 Proxy.minDistance
[project]/[#symfony]/webpack-encore/lib/EncoreProxy.js:51:53
- webpack.config.js:126 Object.<anonymous>
C:/path/to/project/webpack.config.js:126:25
- v8-compile-cache.js:192 Module._compile
[project]/[v8-compile-cache]/v8-compile-cache.js:192:30
- loader:1153 Object.Module._extensions..js
node:internal/modules/cjs/loader:1153:10
error Command failed with exit code 1.
Since publicPath is not in this dev server "schema," I have had to set the public path through setPublicPath to the value in the warning, causing that warning to be generated.
The first warning is from setting my package.json Webpack definition to webpack#^5.35 so other dependency warnings are not generated.
How can options not defined in the dev server schema be properly configured?

This can be accomplished using the copyFiles function by just ensuring the whole build directory gets copied over in the dev-server environment.

Related

When compiling Vue-cli project and serving with nginx, console prints " Uncaught SyntaxError: Unexpected token '<' "

I am trying to run my Vue-Cli project on my server with nginx. I am fairly certain my nginx is set up correctly but you can look it over.
This is on vue 3.2.13, nginx 1.18.0 and ubuntu 20.04.4
root /var/www/html/;
index index.html;
location /vueProject/ {
try_files $uri /vueProject/dist/index.html;
}
When visiting the page the console gives 2 errors
Uncaught SyntaxError: Unexpected token '<' both linking to Javascript files /js/chunk-vendors.44e4eb0a.js & /js/app.3856adea.js.
From what I have read it seems to not be able to fetch those files. When I view them in the dev tools they aren't loaded, they just appear as the index.html file.
I have tried changing publicPath: in vue.config.js but that didn't change it and adding . in front of the path to the files didn't change it either. So I am thinking the files might not be loaded by nginx and if that is the issue how would I solve that?

TypeError: Cannot assign to read only property 'children' of object '#<Object>'

Next js build with docker goes to internal server error on reload in all routes containing getServerSideProps
package.json
react: "17.0.2"
next: "^11.1.2"
Everything works fine locally and if I deploy it without docker.
but with docker after I open website. Everything is fine if I navigate with client side router. But as soon as I reload the page it goes to internal server error and does not rebuild the page
After checking docker logs I found this
TypeError: Cannot assign to read only property 'children' of object '#<Object>'
at /app/.next/server/chunks/6859.js:792:29
at /app/node_modules/react/cjs/react.development.js:1067:17
at mapIntoArray (/app/node_modules/react/cjs/react.development.js:964:23)
at mapIntoArray (/app/node_modules/react/cjs/react.development.js:1004:23)
at Object.mapChildren [as map] (/app/node_modules/react/cjs/react.development.js:1066:3)
at Head.makeStylesheetInert (/app/.next/server/chunks/6859.js:782:36)
at Head.render (/app/.next/server/chunks/6859.js:839:23)
at processChild (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3450:18)
at resolve (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
at Object.renderToStaticMarkup (/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:4314:27)
at Object.renderToHTML (/app/node_modules/next/dist/server/render.js:711:41)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async doRender (/app/node_modules/next/dist/server/next-server.js:1149:38)
That was so weird. I found the problem in my Dockerfile.prod. just changed my ENV NODE_ENV prod to ENV NODE_ENV production.
I did change that after I noticed that NODE_ENV have only 3 valid options
production
development
test

Vite for Nuxt.js : Error: ETXTBSY: text file is busy, unlink '/node_modules/.cache/vite/client/chunk-ZLOXRQYH.js.map'

I am using Nuxt Vite in a SSR project
everything rendered correctly when I enter the page by typing the url in browser address bar, but when I try to go to other page by click <nuxt-link/> inside of the website, errors appear in terminal
ERROR 12:29:42 PM [vite] error while updating dependencies: 12:29:42
Error: ETXTBSY: text file is busy, unlink '/project/node_modules/.cache/vite/client/chunk-ZLOXRQYH.js.map'
at Object.unlinkSync (fs.js:1035:3)
at emptyDir (/project/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:4293:25)
at optimizeDeps (/project/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:65308:9)
at Timeout.rerun [as _onTimeout] (/project/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:68848:67)
at listOnTimeout (internal/timers.js:531:17)
at processTimers (internal/timers.js:475:7)
Also in browser consloe:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
But once I use webpack instead of vite, errors gone, everythings go well.
I am sorry that I can't provide a smallest errors reproduction, because it only occured when the project is not samll and also I have no idea what caused it.
I try to run sudo npm run dev, but errors still exist.
How can I figure out what caused this, and how to solve it?

Gulp / Laravel Elixir - Deleting a local variable in strict mode error

I am working on a Laravel 5 project on a Windows machine and just encountered an error while attempting to run gulp-
events.js:85
throw er; // Unhandled 'error' event
^
SyntaxError: c:/Users/Benjamin/PhpstormProjects/essex-youth-footbal/resources/assets/bower/jquery/dist/vendor.js: Deleting local variable in strict mode (13795:23316)
13793 | //
Here is the entry in the gulpfile.js where this is being thrown:
mix.scripts([
'/assets/bower/jquery/dist/jquery.min.js',
'/assets/bower/bootstrap/dist/js/bootstrap.js',
'/assets/js/main.js',
'/assets/bower/bootbox/bootbox.js',
'/assets/bower/vue/dist/vue.min.js',
'/assets/bower/mustache/mustache.min.js',
'/assets/bower/bootstrap-multiselect/dist/js/bootstrap-multiselect.js',
'/assets/js/redactor.js',
'/assets/js/vendor/redactor/fontcolor.js',
'/assets/js/vendor/redactor/fontsize.js',
'/assets/js/vendor/redactor/imagemanager.js',
'/assets/js/vendor/redactor/video.js',
'/assets/bower/remarkable-bootstrap-notify/dist/bootstrap-notify.min.js',
'/assets/bower/jquery.maskedinput/dist/jquery.maskedinput.min.js',
'/assets/bower/moment/min/moment.min.js',
'/assets/bower/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
'/assets/bower/raphael/raphael-min.js',
'/assets/bower/morrisjs/morris.min.js'
], 'public/js/vendor.js', 'resources');
I also noticed that any merged JS files that ARE created have "use strict" prepended to the code.
gulp is working fine in another project on the same computer and this project's gulp configuration works fine on another computer. Any ideas what might be causing this?

Dotcloud nodejs supervisord.conf not working

I've been trying to get my nodejs server process to be monitored by supervisor, however I'm having issues getting supervisord.conf to work. When I deploy, I get the following error:
WARNING: The service crashed at startup or is listening to the wrong port. It failed to respond on port "node" (42801) within 30 seconds. Please check the application logs.
However when I ssh into the dotcloud server and manually start the nodejs process, it runs just fine, indicating that supervisor is failing to start the node instance.
My supervisord.conf looks like this:
[program:node]
command = node /home/dotcloud/current/app/server.js
autostart=true
autorestart=true
And my directory structure is as follows:
.dotcloudignore
dotcloud.yml
.gitignore
app/
app/package.json
app/server.js
app/supervisord.conf
At this point, I can't see what I'm doing wrong, as this appears to be the same directory structure as outlined here, so I'm kind of at a loss as to what the solution is. Any ideas?
Edit:
After trying a supervisorctl status I get the following:
node FATAL Exited too quickly (process log may have details)
I've found that in /var/log/supervisor, I'm getting the following error message:
module.js:337
throw new Error("Cannot find module '" + request + "'");
^
Error: Cannot find module '/home/dotcloud/current/app/server.js'
at Function._resolveFilename (module.js:337:11)
at Function._load (module.js:279:25)
at Array.0 (module.js:484:10)
at EventEmitter._tickCallback (node.js:190:38)
I'm not sure what is causing this.
After investigating the issue, it looks like the issue came from the fact that dotcloud.yml specified approot: app. In that case, it is useful to note that:
/home/dotcloud/code will point to the whole code repository;
/home/dotcloud/current will point to the approot (more specifically, /home/dotcloud/current will be a symlink to the approot, i.e. code/app in that case).
Therefore, supervisord.conf should not contain:
command = node /home/dotcloud/current/app/server.js
But, instead:
command = node /home/dotcloud/current/server.js
The key was in the Node.js logs themselves, since Node.js was complaining about being unable to locate /home/dotcloud/current/app/server.js.

Categories

Resources