how to get files built in vscode extension using webpack with vscode-webview-ui-toolkit - vscode-extensions

We have using #vscode/webview-ui-toolkit and it works when we are testing. But we set up the webpack version of the extension. When we package and run the extension, we are missing the toolkit and our other files. Errors like
Error: Unable to read file '/Users/jkh/.vscode/extensions/ext-0.0.2/node_modules/#vscode/webview-ui-toolkit/dist/toolkit.js' (Error: Unable to resolve nonexistent file '/Users/jkh/.vscode/extensions/ext-0.0.2/node_modules/#vscode/webview-ui-toolkit/dist/toolkit.js')
and also the webpage src/newExtensionWizard/main.js and css src/newExtensionWizard/style.css.
Am I right that this is an issue with our webpack? Or why can we get webview-ui-toolkit to work under development but not through the vsix file?

Related

is there a way to open a file in webpack browser extension application

When compiling my browser extension project I have this error :
Module not found: Error: Can't resolve 'fs' in 'C:\Users\admin\project\node_modules\pdf-table-extractor'
I'm using webpack and npm.
pdf-table-extractor is an npm library that extracts pdf data in Json format.
This library require the fs library to open the pdf file path.
It seems that this library is somehow blocked by webpack.
Can any one help with this ?
Adding
node: {
fs: 'empty'
}
to the "webpack.config.js" file solve the compiling error but the extension is failing in the browser.
Many thanks in advance.

Im getting a error about in a manifest json i cant locate when serving my vue project

So this is the error i get when i open my vue project... except that i cant even locate my manifest.json nore do i have a /img/icons folder in the project. I cannot figure out what the error is or how to correct it
Error while trying to use the following icon from the Manifest: http://localhost:8080/img/icons/android->chrome-192x192.png (Download error or resource isn't a valid image)
The error you're seeing is typically caused by altering a project created using Vue Cli 3's command vue create some-project and then removing either parts of or in its entirety the public folder. Namely, the error complains about the absence of icon files situated in public/img/icons, aimed at providing android, apple or web icons/favicons for the served/built app.
A possible fix for this error is to create a new project (run vue create whatever outside of your project) and copy-paste the resulting public/ folder into your current project.
If you haven't created your project with Vue Cli 3, the solution above will likely not work.
For Vue Cli 2.x projects, according to Vue Cli docs running vue init webpack my-project in the root of the project (where my-project is the name of your project as set in package.json) might work.

VSCode Typescript.NPM Warning for Babylon.js TS File

I use VSCode as an IDE for Babylon.js. To show Babylon.js code hinting, I was recommended to use "babylon.d.ts" file as the value of the "typescript.npm" in the VSCode's User Settings.
But when I hovered over a property in my JS script, a warning came up:
Could not install typings files for JavaScript language features.
Please ensure that NPM is installed or configure 'typescript.npm'
in your user settings.
How to fix this error and show the code hinting for Babylon.js JS script on VSCode?
to get babylon.js typings, just drop the babylon.d.ts file in your folder.
The file will be used by VSCode compiler directly

Webpack module resolution issues on Windows 10

I'm having issues with Webpack resolving module names on Windows. The loaders are installed, but the path Webpack is using to try to resolve them is incorrect (notice the fact that it's concatenated the module path to the working directory below). Webpack is being launched with webpack-dev-server.
ERROR in ./~/css-loader?sourceMap&modules&localIdentName=[name]_[local]_[hash:base64:3]!./~/postcss-loader?parser=postcss-scss!./client/src/scripts/components/Main/Main.css
Module build failed: (SystemJS) ENOENT: no such file or directory, open 'C:\Users\Terry\Projects\django-react\C:\Users\Terry\Projects\django-react\node_modules\css-loader\index.js'
Error: ENOENT: no such file or directory, open 'C:\Users\Terry\Projects\django-react\C:\Users\Terry\Projects\django-react\node_modules\css-loader\index.js'
at Error (native)
Error loading C:/Users/Terry/Projects/django-react/C:\Users\Terry\Projects\django-react\node_modules\css-loader\index.js
# ./client/src/scripts/components/Main/Main.css 4:14-225 13:2-17:4 14:20-231
# ./client/src/scripts/components/Main/Main.jsx
# ./client/src/index.js
# multi main
webpack: bundle is now VALID.
Relevant info:
Windows 10
Node 6.6.0
I'm running webpack with babel-node via NPM script
Webpack 2.1.0-beta.22
NPM 3.10.3
EDIT: this usually only happens when I make an edit that triggers a hot reload. Sometimes it happens when I launch webpack-dev-server the first time, but it happens every time I edit the source.
Not sure if you ever figured this out, but I was running into the same exact error with the malformed node_modules path when using webpack on Windows 10. I was very disappointed to find that nobody was able to solve this since this particular error does not seem to be documented anywhere else.
In my own debugging I found that this error only happens with webpack loader modules, so I dug into webpack to track down where the error was coming from. After some digging it turned out that this was caused by the loader-runner package used by webpack. It attempts to use System.import to resolve the loader module, with a fallback on require when System.import is not available. In my case, the malformed node_modules path was being generated by System.import via systemjs. It appears that the systemjs implementation of System.import has a bug when absolute paths are used on Windows, and since webpack passes an absolute path for loaders, it throws an error.
I was able to work around this by editing my local copy of loader-runner, and comment out the System.import, forcing it to use require instead. This is, of course, not a good long term solution by any means so I am still looking for something better. I just tried switching to yarn to see if maybe this is an npm dependency issue, but this workaround should get you up and running if you're still getting these errors on Windows.

which angular2 js file should be added in on the client side?

I am a semi noob in web development.
I just started playing around with angular2 today. And i ran into a problem..
If I were to install angular2 with npm to my local computer, which file is the js file that should be linked to the html page that show up on the client?
In their guide, i see a file called /node_modules/angular2/bundles/angular2.sfx.dev.js. But i don't even see this file at all.
Is there some script that i should run to build that file? Or is the file renamed? I am really confused.
I tried some file /angular2/bundles/angular2.js, but it doesn't even export ng variable to window!
I see that in https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js, eventually ng gets exported. But what changed in alpha 53? (the version i get for doing npm install angular2)
In my projects, I a using
"node_modules/angular2/bundles/angular2.dev.js"
You might additionally need to install/add systemjs, just in case you are using the systemjs library.