How to execute code from a Vue project using nodejs? - javascript

I just started to work on an existing Vue project and I would like to run some of its components from nodejs, e.g. if I want to test some component separately without compiling and deploying the complete application to a browser.
As far as I have understood, Vue uses Babel to compile its projects, and Babel allows using # in the paths of import statements.
On the other hand, nodejs cannot resolve these paths: when I run a script that imports a module from the Vue application, I get the error:
node:internal/errors:464
ErrorCaptureStackTrace(err);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '#/package' imported from myfile.js
So, I wanted to ask if there is a way to have nodejs resolve #-paths and load code from a Vue package.
I hope I have formulated the problem correctly, since I am a beginner with Vue and Javascript in general.

Related

Exporting a dynamically created function for use in a module

I'm relatively new to modern Javascript dependency management. I'm writing a web app in Typescript and have started to use Jasmine as a unit test framework.
Once I started using Jasmine it became clear I needed to start exporting/importing the classes and functions in my source code files, since there is no HTML page loading all of them via script tags. This has been fine for my own files, but I am using a third-party library that is provided minified:
https://currency.js.org/
https://unpkg.com/currency.js#1.2.2/dist/currency.min.js
I can't seem to get my code running via Jasmine to recognize the existence of the currency function defined in this file. I'm guessing it's because the function seems to be dynamically created.
What would be a proper way to export the currency function above for use in my own modules?
That package actually is published on npm (with TypeScript typings included), and I was able to successfully import it as a module in a test application:
npm install currency.js
Then in your code:
import currency from "currency.js"
console.log(currency(1.23).add(.01).format());
https://www.npmjs.com/package/currency.js

Angular Universal --bundledependencies "all" won't work with firebase, "none" won't work with my charting module?

I've been using a basic angular 8.2.x project as boilerplate, made it SSR, all is good but I can't bundle dependencies due to #angular/fire, my app runs its auth + firestore + functions off of firebase through that package so I definitely need it.
My app is a reporting tool so I definitely need the charts as well. The issue is, when I Don't bundle dependencies and I try to run it, I get the following error:
SyntaxError: Unexpected token {
at:
node_modules\ngx-charts-extra\release\line-chart\line-chart.component.js:23
On the import statement of my charts module, so this is inside the actual node_module. This is the link to the package I'm using. -- In this case It is also one of the modules that I've forked and built myself to customize.
Is there a way I can get #angular/fire to work with SSR or a specific way I need to build my charts package in order to not get that syntax error on the import statement?
Ended up using webpack to bundle as an SSR and excluding the firebase module, which I've later included as a lambda layer.

Error importing local npm package

We have several websites, each in its own project, and we are looking to migrate them all to using Vue.js. Each website has its own directory with .vue files that are then bundled using Webpack. We have a Webpack config in place that converts the .vue files, bundles, lints and pipes it all through babel and it works fine.
However, now that we have been moving things over for several weeks we have noticed that there are several components and core javascript files that are very similar and ideally we want to pull these out into a shared library of vue components and functions.
We have extracted several .vue into a folder alongside the websites, and put them together as a basic npm module with its own package.json, and include them using an npm file include, so in the package.json it just looks like: "vue-shared": "file:../CommonJavascript/Vue". Now when we try to use Webpack to build the bundle, we get the error:
ERROR in ../CommonJavascript/Vue/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'
I'm not sure where this error is coming from, because we aren't using react anywhere, and it seemed happy enough to build fine before we moved the files out. At the moment the only dependency in the shared module is moment, and it only contains 4 .vue, and a basic wrapper to bundle them up:
import button from 'Button.vue'
import loading from 'Loading.vue'
import modal from 'Modal.vue'
import progressBar from 'ProgressBar.vue'
export default {
button,
loading,
modal,
progressBar,
}
But, I was curious so I decided to add the package (even though we don't need it) to see if it would fix the issue, but I then get a new error:
ERROR in ../CommonJavascript/Vue/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "C:\Projects\Tmo\Code\CommonJavascript\Vue"
Now, that one makes a little more sense, we do use the babel runtime transform on the main project, but it isn't required by anything in the shared project and even if it was, surely the fact it is included in the main project means it should still build.
Partly, it seems perhaps I'm just not understanding the way npm resolves dependencies. It seems to be trying to now resolve some dependencies by looking in the shared files project and I dont know why. Also I have no idea where this strange dependency on eslint-plugin-react has come from.
So I guess this is a multi-part question. What is up with the way npm is trying to resolve the dependencies? Am I doing things right by moving the .vue files into a separate project, wrapping it up as a module and requiring it in the main project? and if not, what is the best way to have shared dependencies like this?
This was caused by a mixture of two separate issues:
The import statements didn't reference the file properly, the correct syntax is: import button from './Button.vue' (note the change to file path)
When you add a local package to npm via a path, it creates a symlink to the folder rather than copying the files over (this has been the behaviour since npm v5+). This then changes the way webpack tries to resolve dependencies since it then looks up from the location of the shared files to try and resolve dependencies including thing like eslint and babel.
The eslint-plugin-react dependency was because in visual studio code I had installed the eslint plugin, which it seems had created a .eslintrc file which reference the react plugin in my user folder (c:\users\<username>). Eslint will then use this as the default if it can't find a config file (which it couldn't because it was looking above the shared files because of the pathing issues described above)
We have decided we will be using a git submodule for these files going forward

'require' is undefined when using reactjs.net along with webpack

I am using Reactjs.NET within an MVC 5 project,
We have been able to combine Webpack with reactjs.net, but currently we are running into issues using external modules, for example (material-ui) within our react components directory. Since reactJs.NET doesn't support import we are trying to include those in the JSX components using the require statement, however we are getting a Script threw an exception: 'require' is undefined
any idea how we can include some of the modules that we have in our webpack bundle inside our jsx component?
this issue sounds like exactly what you're experiencing.
assuming you've gone through this page then maybe the problem is related to having npm installed webpack 2 which uses a different config. check out webpack's migration guide for info on that.

How do I get my ember.js app to import modules installed from bower or npm

I'm pretty new to some of this stuff and I feel like I must just be missing something simple. I have a very basic Ember.js app that I created with the CLI tool flowing the guide. The code is at https://github.com/nfriedly/particle-webhook-manager
It has a couple of routes and components, and a single third-party dependency, particle-api-js. I installed it twice, via bower and npm, and I'm importing it in one of my components like so:
import particle from 'particle-api-js';
I start up my server with ember serve and it builds successfully. I then open my browser to http://localhost:4200/login where I load the component and it gives me the following error in my console:
Error: Could not find module `particle-api-js` imported from `particle-webhook-manager/components/login-form`
So, my main question is: what am I doing wrong here/how do I make it work?
My secondary question is: why did it "build" successfully and then throw a runtime error for the missing module - shouldn't it have found that in the build stage?
You should not use bower anymore. Use ember browserify to import things installed with npm.
You can import bower modules in your ember-cli-build.js with app.import('bower_components/...js').
You can not import them directly, but you can create a vendor shim to provide this for you. Checkout the ember-cli documentation for this.

Categories