How to figure it out on which mistake i made when i run npm run build? - laravel

I'm quite new to this VueJS things. And this is my first App creating a SPA with separated server-side app. I faced the problem right before deploying my app on a shared hosting. Simply, when i run "npm run build", it return with an error in which i don't even know the cause. Here is the error i faced.
first img
second img
Please help me resolve this issues, i know there are jquery errors, but i think those are not the problems

You have es-lint checker. It checks unused vars so you have unused variables inside these listed components like from and to. You should remove these variable from your components.

Those errors come from your linter (probably eslint) which is a tool designed to ensure consistence and code quality : in your case it mainly complains about declared variables that are not used anywhere else in your code and $ being undefined (I guess you're trying to use jquery which you should not be doing in a vue project anyway)
On the images you posted you have all necessary infos : the title of each block tells you in which file the error is (for example App.vue in the first image) and then you have line/column to locate precisely where you need to adjust :)
Note that you can configure your linter (what should be error/warning/skipped out) overwriting (or creating if it doesn't exist) a config file at the root of your project (if you use eslint for example, you can create a .eslintrc file). See the config part of the official doc

Related

Sass not working in Svelte and StorybookJS

I am using Google Material on Svelte and thank GOD finally was able to successfully make it work. Now, I created it in a separate code base. On the other hand I am actually creating a separate codebase for different components in StorybookJS. So when I ported my working codebase (actually copy pasted the component) the button for example that I am testing is not working anymore. I checked all the necessary npm installations that I need and it's all good.
But now when I check the Developer Tools on my browser (I am using Brave) I got this error:
Refused to apply style from 'http://localhost:60809/theme-mui.scss' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
My theme-mui.scss mentioned on the error above is the initializer for my Google Material to work on Svelte (or other framework for that matter). I tried to transfer the above scss file to no avail. I followed the instruction of setup from my separate code base but it still is not working. I tried to follow the sass config using this link from Storybook but still to no avail. What could have gone wrong?

What is the difference between a file with .dist and without

I'm trying to learn more about package development by using Laravel Nova as a bit of a guide. I'm confused as to how Nova's assets are compiled, and part of that confusion stems from Nova not having a webpack.mix.js but instead a webpack.mix.js.dist.
I'm trying to model this within my package in order to compile and publish my assets for use in my project, but I get npm errors when trying to run any command
Cannot find module 'dir/dir/dir/package/webpack.mix'
I'm unsure as to why it is looking for this file in the first place, but it still seems to be an issue. To get to the root of why this is an issue and how I can fix this, I'd like to know what the difference between webpack.mix.js and webpack.mix.js.dist is.
Any feedback on this would be greatly appreciated. Thank you.
Files that end in '.dist' are generally the default distribution files that come from the package and should not be edited. They will be overwritten on package updates.
You can use them as a reference to add or replace configuration in your primary file(s).
From what I can gather, Laravel Nova creates it's real webpack.mix.js from this file when you activate a certain feature. (It's a paid product, I do not have a license to see it, I can only skim the documents.)

Hyperledger composer generator: Trying to copy from a source that doesn't exist (no concepts support for Angular)

I have a composer-rest-server running on localhost:3000. To go with that, I tried to generate an Angular 2 app using yo hyperledger-composer. My business network models also have a abstract concept Spray{...} present.
I believe the documentation is outdated as I was presented with slightly different options than on the documentation. After choosing Angular and following through the steps, I got an
AssertionError: Trying to copy from source that does not exist ... /concept/concept.component.ts
Based on some quick google searches, I was able to find this issue on their Github - https://github.com/hyperledger/composer/issues/3927 however in my case, I am not even able to build the Angular app so I don't even get to the compilation stage.
Is there any way to build the app right now where it's at?
I've created a Github issue explaining steps to reproduce this and also included a hacky fix which is to comment out the lines in the generator code which copy over the concept files.
Link - https://github.com/hyperledger/composer/issues/4328

Laravel Homestead: Failed to mount component: template or render function not defined error

This problem is driving me mad, I have been researching and have read about the standalone and runtime version of Vue. As far as I can tell Laravel 5.4/homestead ships with the standalone version as default.
The Vue development tools in chrome show the example component so I think that part is working correctly, just cannot render the template.
I am relatively new to Vue and npm been stuck in the past with jQuery, firstly where in laravel can I check/set I want the stand alone version of Vue? If it is not that problem does any one have any ideas?
Thanks for help
VueJS supports two ways of building apps like you said.
Load all necessary scripts within your page via script tags (not combined .vue files).
Compile and bundle all your files with Gulp, Browserify, Webpack or other tools.
Can you explain what you did so far. I guess you don't compile everything down.
The comment by peaceman was the solution, I had multiple calls to elixir, I condensed down to one and it worked straight away. Thanks everyone for your help.

Using Babel in Production - How to precompile scripts

I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?
Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine

Resources