I started my website project in Visual Studio Code and it worked fine for days. I found out about Atom and decided to move over to it. Somehow whenever I start the dev server in Atom, each Vue component spits out:
Console output (pastebin)
"Error: "extract-text-webpack-plugin" loader is used without the corresponding
plugin"
and the webpage only renders
Cannot GET /
The dev server starts fine in Visual Studio Code but not in Atom
I had the same problem with running npm run dev from CMD on Win7.
I dont know, as I did not require this plugin anywhere explicitly and when I started this error did not occure to me.
As i also started to get this error and I already tried setting NODE_ENV=development provided by this issue report from the official repo, I tried playing around.
Finally i ended up editing the webpack.dev.conf.js adding this specific plugin to the plugins key as follows:
// File header with other Imports
var utils = require('./utils')
// ...
var ExtractTextPlugin = require('extract-text-webpack-plugin')
// Then in Module definition
module.exports = merge(baseWebpackConfig, {
// ... other keys for module
plugins: [
// .. other plugins
// .. I copied this line from the webpack.prod.conf.js
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
Well there might be better and more beautiful solutions.
This is just the one that seems to fix it for me.
As I am new to VueJs and I am only using the dev server at the moment with autoreload, other answeres might be bit more polished.
Related
I'm trying to include a VLC video playing in my Electron app, which is possible through WebChimera.js. This package is distributed a bit weirdly (to me at least), to use it you need to require wcjs-prebuilt, specify some settings in package.json and configure Webpack to allow importing .node files as explained in this Wiki page for WebChimera.js.
However I believe this Wiki page is outdated, as loaders isn't a valid key anymore in a Webpack config. I'm not very experienced using Webpack so most of this is new to me. Also note that this Wiki explanation used a fork of node-loader, although this fork seems to be merged to the actual node-loader now (?).
I now use this Webpack config:
target: 'node',
node: {
__dirname: false,
},
module: {
rules: [
{
test: /\.node$/,
loader: 'node-loader',
},
],
},
externals: [
'wcjs-prebuilt',
],
Because that's how the Webpack page for node-loader seems to do it. However this doesn't work for me, as now I get the error: Uncaught ReferenceError: exports is not defined in the chunk-vendors.js:1 file. Which probably means it's trying to use require syntax somewhere it shouldn't, but I have no idea how to proceed here. This error still occurs in an otherwise empty vue-electron project (template here), when I comment out all WebChimera related code. WebChimera code I use for testing in this project (Right now I'm just trying to get it to work):
const wcjs = require("wcjs-prebuilt");
console.log(wcjs)
When I remove the webpack config I showed above, the error about exports is not defined goes away, which is why I believe it's something in my webpack config rather than my code causing that error.
Long story short, I want to know how configure webpack to allow me to import or a require a .node file.
I'm able to get vue electron building with wcjs-prebuilt using a vue.config.js like this. You will also need to set the VLC_PLUGIN_PATH correctly or video won't play.
module.exports = {
configureWebpack: {
externals: {
'wcjs-prebuilt': 'commonjs wcjs-prebuilt'
},
},
chainWebpack: (config) => {
config.module
.rule('node')
.test(/.node$/i)
.use('node-loader')
.loader('node-loader')
.end()
},
pluginOptions: {
electronBuilder: {
externals: ['wcjs-prebuilt']
}
}
}
Since posting the question I've switched to mpv.js for video playback so this isn't an issue for me anymore. However after posting this question I experimented a lot, after I finally got it working in Webpack somehow (see first link below), it worked for me but with distorted video. The node file added some properties to an array which Webpack somehow stripped away, causing some missing values in the video renderer. I fixed that by forking WebChimera and editing the C++ code so that the values weren't added as properties but as separate values.
I ended up forking WebChimera.js, wcjs-prebuilt, wcjs-renderer, and libvlc_wrapper to get VLC to finally work with Webpack+Electron, all that probably wasn't necessary but oh well..
Links for whoever might be interested:
https://github.com/RuurdBijlsma/vlc-video-demo (working demo project featuring VLC in an Electron+Webpack+Vue project.)
https://github.com/RuurdBijlsma/libvlc_wrapper
https://github.com/RuurdBijlsma/wcjs-renderer
https://github.com/RuurdBijlsma/WebChimera.js
https://github.com/RuurdBijlsma/wcjs-prebuilt
I am creating a body segmentation app using tensorflow bodypix model. It works fine in the browser. I am using webpack to use its modules(see below)
import * as wasm from "#tensorflow/tfjs-backend-wasm";
import * as tf from "#tensorflow/tfjs-core";
import * as bodyPix from "#tensorflow-models/body-pix";
wasm.setWasmPaths("./wasm/");
tf.setBackend("wasm").then(() => {
//some simple vanilla js code
});
//some more vanilla js code...
It works exactly fine in chrome and giving output as expected after running npx webpack .
However when irun it with electron simply by creating a main electron file it outputs nothing but a blank white screen with the following error in console-
Uncaught TypeError: this.util.TextEncoder is not a constructor
at new <anonymous> (main.js:2)
the line where it is pointing is from a minified codew which looks like this-
...SOME_CODE...&&Me().setPlatform("node",new class{
constructor(){this.util=n(758),this.textEncoder=new this.util.TextEncoder}...SOME_MORE_CODE...
i thought that electron is simply chrome without top bars, but this seems wrong. can someone help me here
i am using following versions-
"nodejs v12.16.3", "electron11.1.1", "tfjs2.8.2"
see the screen shot of chrome and electron-
IN CHROME(click to enlarge)
................................................
IN ELECTRON(click to enlarge)
THE SOLUTION
i previously had
wasm.setWasmPaths("./wasm/");
tf.setBackend("wasm").then(() => {
//some simple vanilla js code
});
in my main code, and i have copied the folder from wasm(dist/) to project's folder.
Deleting the same from my project's folder and changing the code to -
wasm.setWasmPaths("../node_modules/#tensorflow/tfjs-backend-wasm/dist/"); //or start from ./ if your main file is in same folder as node_modules
tf.setBackend("wasm").then(() => {
//...
});
How i recahed here?
at first thanks to #edkeveked for his effort and pointing me to
Error loading TensorflowJS in Electron App (Nodejs)
i got the solution by creating an electron hello world project and then adding tfjs, then tfjs-backend-wasm. the new project is working correctly but however even moving the node_modules from new project to older one is not working for the older. but as soon i changed the wasm path, it worked giving no error.
Update:
now I have encountered the problem several times and everytime it's solved by creating a new folder, first installing electron and creating a simple electron app first, and then installing other dependencies and copying old code in the new folder.(warning: don't copy the node modules folder)
It seems to be a bug in tfjs or electron
I am currently using a WebPack configuration that allows for the direct injection of ReactJS into a site. This compiles all of the React code into a single index.js, and I am trying to code split it because the file is getting very large. Without the code split, bootstrap is not loaded, because I have it as part of my WordPress theme. When I use React.lazy() though, I get 404 errors for 0.js which my developer tools say is caused by bootstrap. Here is my index.js:
const Register = lazy(() => import('./components/register/register')); // Import function
and for the rendering:
<Suspense fallback={<div><Loader/></div>}><div id="container"><Register /></div></Suspense>
With the module imported normally like import Register from './components/register/register'; it works perfectly fine, but as soon as I use lazy, the console begins throwing errors. WebPack compiles correctly either way. Here is a screenshot of the console error:
Any help would be appreciated because I usually use Create-React-App and don't know much about customizing WebPack. Thanks!
I worked very hard to figure out what the root of the issue was, and it turned out that the browser was looking for the 0.js chunk on the https://example.com/register/0.js when the file was in fact sitting at https://example.com/wp-content/themes/theme/build/0.js. A few google searches and some trial and error later I figured out a WebPack config that would allow for this to compile correctly. It is as follows:
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/wp-content/themes/theme/build/'
},
Just documenting this in case someone else has the same issue.
I am new to aurelia, and I need create a prototype project of the framework. At the beginning, I planed to use skeleton-typescript-aspnetcore skeleton, but when I tried the vs2017rc, I found it uses .csproj as the default format(while vs2015 is project.json/.xproj), I think we should follow the vs2017 because we will upgrade our IDE after it's been launched.
The vs2017 have a wizard to upgrade .xproj project, but after the upgrading(skeleton-typescript-aspnetcore), there still lots of error ahead me...
I also tried aurelia-cli, but seems it has not support vs2017 yet, does anyone could give a guide to create the prototype project? I will integrate some plugins like the skeleton mentioned above, such as gulp,karma,breeze...
thank you in advance.
Since Visual Studio 2017 just launched I thought I'd answer how I solved this, as there are still many errors when using "skeleton-typescript-aspnetcore".
Using https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 as a starting point, these are the steps to get it running:
When you first run the project you will get errors complaining that some files located in /test/ is not under 'rootDir'. In your tsconfig.json the rootDir is defined as "src/", this can be solved simply by moving your test folder inside your src folder. This will cause new errors because the paths defined in those files has now changed. You will need to edit app, child-router and users imports like this:
import {Users} from '../../users'; IntelliSense should help you out here.
The command gulp test will also not run before changing to the new path, you can change the path in karma.conf.js:
files: [
'src/test/unit/setup.ts',
'src/test/unit/*.ts'
],
Next the file users.ts will throw errors like Type 'Response' is not assignable to type 'any[]'. You will need to tell TypeScript what you're declaring like this: public users : Object = []; or simply: public users = {};
The final problem is that you're going to have a lot of duplicate identifier errors, at the time of writing this the cause of this seems to be from the changes brought on by TypeScript version 2.2.1. I don't know what specifically breaks, but I know that previous version 2.1.5 still works. So what you need to do is to run npm install typescript#2.1.5 --save in your src/skeleton directory, the --save is just to update your package.json file, you can do this on your own later as well if you wish.
After you've done that your gulp errors (20~ of them) should be resolved. But there are still some errors remaining caused by duplicate signatures. Again, things have changed in TypeScript 2.0+, there is now a simplified way of getting and using declaration files. Here is an answer on SO on how to use the #types feature: How should I use #types with TypeScript 2 , but to keep this short and sweet you will have to go to your tsconfig.json file and explicitly tell where to find the #types/node folder. It would look something like this:
"compilerOptions": {
...
"typeRoots": [
"node_modules/#types"
],
"types": [ "node" ]
...
},
Hope this helps, with these changes the project should now build and launch correctly.
EDIT:
I recently ran into some problems again with building my project. I got a lot of duplicate identifiers again... I however ran across this answer on SO: TypeScript throws multiple duplicate identifiers
Apparently TypeScript latest ships with fetch definitions out of the box, so I was able to run the command from the answer in the link:
npm uninstall #types/whatwg-fetch
And upgrading from typescript 2.1.5 to latest:
npm install typescript --save
You might even want to install typescript globally by appending -g.
Also this will continue to be an issue unless you comment out/delete url and whatwg-fetch from typings.json globalDependencies in order to prevent it from recreating itself:
"globalDependencies": {
//"url": "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
//"whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
}
Then you can either delete the typings folder, running typings install again or edit index.d.ts in the typings folder and delete the reference paths to whatwg-fetch and url.
Hope this helps someone who might've encountered the same problems even after "fixing" it.
I'm using Grunt to build the Durandal starter kit pro package.
It all works fine, except for one tiny detail. I would like to exclude one file (app-config below) from the optimizer and keep it as a non minified file when my build is done.
Based on other SO thread suggestions, I'm currently excluding it using empty:, which removes it from the optimized file as expected. However, when I open the built project I get an error in the console:
Uncaught Error: main missing app-config
options: {
name: '../lib/require/almond-custom',
baseUrl: requireConfig.baseUrl,
mainPath: 'app/main',
paths: mixIn({ }, requireConfig.paths, {
'almond': 'lib/require/almond-custom',
'app-config': 'empty:'
}),
optimize: 'none',
out: 'build/app/main.js',
preserveLicenseComments: false
}
Is almond the problem? I tried switching it to the full requirejs using include: ['path/to/require'], without success.
If you want to reproduce it locally you can either download the starter kit from the above link, or use a slightly configurated version which is closer to my example. Just run an npm install in the folder and you're all set.
I have downloaded you source code and do the following steps.
Extract zip file, open cmd and change the directory to this folder.
Run npm install to install all the dependencies.
Run grunt to start to build the project.
And when I open http://localhost:8999/ and saw the alert 1 which is alert(appConfig.foo); in your main.js.
After clicked Ok to hide the alert, the web page works fines. Any more input for you ?
So I am not sure how you are facing with this issue.
From the reference of the durandal issues found in this particular link
grunt-durandal
The main module controls the implementation of the durandal services
The link can be found in main.js
Here you can see the system.debug(true).You can remove it as written in the post here document.
The function as quoted in the article Overrides request execution timeout making it effectively infinite.
Also while using uglify in grunt the debug is set to false as per the documentation.
As per the documentation you need to set the system.debug(false)
Hope this might help a bit.
try:
....
paths: mixIn({ }, requireConfig.paths, {
'almond': ['lib/require/almond-custom', '!lib/require/almond-custom/app-config.js']
}),
....
just note the second path of app-config.js is correct. I think you should find your way, the above is a hint, if not a direct solution.