I read anothers similar questions but i couldnt fix the problem.
Its a project for practice how bundle files.
The console show me:
bundle.js:1 Uncaught SyntaxError: Unexpected token '<'
Its refers to the html content, like it cannot understand html code or somethin like that.
Please i need some help here.
I left you the repo to acces the files directly.
https://github.com/FEDEIZ/FT-M2/tree/master/05-Bundlers
I could fix it thanks godddd!!
The solution that work for me was...
Change the lines in package.json file with the next info:
"start": "react-scripts" to "start": "react-scripts --openssl-legacy-provider start"
"build": "react-scripts" to "build": "react-scripts --openssl-legacy-provider build"
previusly i deleted the node_modules file and then i made the change and run npm install again
Thanks kaffarell !!
Related
I am a beginner at three.js and I am following everything it says in the tutorial I am following (https://www.youtube.com/watch?v=xJAfLdUgdc4&list=PLjcjAqAnHd1EIxV4FSZIiJZvsdrBc1Xho&index=1) I have installed parcel with "npm install parcel -g", and I have installed three.js with "npm install three" and my code editor (Brackets) is throwing two errors for the code "import * as THREE from 'three';".
Under JSlint it says "Expected an identifier and instead saw 'import'." and under ESlint it says "ERROR: Parsing error: The keyword 'import' is reserved"
I copied the code in the tutorial exactly as it said, and it's still throwing those errors. weird
And in index.html I tried making the script tag have type="module" and without it having that, and it still doesn't work.
Maybe it's because I'm not using Visual Studio?
Thanks!
I'm three.js developer, too.
Perhaps do you miss following section?
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three#0.148.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three#0.148.0/examples/jsm/"
}
}
</>
If it's wrong, contact me.
Thanks.
My app runs perfectly in the browser but will not open on Heroku. The build succeeds. When I check the logs tail it says "code: 'MODULE_NOT_FOUND', requireStack: [: '/app/server/node_modules/readable-stream/lib/_stream_readable.js',]
However, in my package.json I have
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#stripe/stripe-js": "^1.29.0",
"are-we-there-yet": "^3.0.0",
"readable-stream": "^3.6.0",
"streams": "^0.0.7"
}
I have also tried removing node_modules and package-lock and reinstalling multiple times. The same application error persists on Heroku. Please help if you can!
My full code repo is here.
This is the logs message
When I enter my URL for my Vue.js application (https://harrishealthtest.herokuapp.com/), the browser takes me to the homepage. Good. However, when I click on the 'Start' button, that's supposed to take me to '/test', I get this message 'Cannot GET /test'.
What am I doing wrong? I have history mode enabled in my routing. I'm not sure if that is causing issues. Or if it's something to do with the connectivity between my Vue.js app and my Laravel REST API. Both are on separate domains. When I click on 'Start', the app is supposed to take me to '/test', and that's where the data from the API is received.
This is what I currently have in my App.vue file:
mounted() {
fetch('https://pure-mountain-87762.herokuapp.com/', {
method: 'get'
})
.then((response) => {
return response.json()
})
// 'jsonData' refers to the json parsed response
.then((jsonData) => {
this.testData = jsonData.data
})
What kind of issue am I having here? Routing? API connectivity? Or something else?
It seems heroku is pointing to the server instead of the client. I had the same error a few weeks back. Two things:
If you are running two npm commands, resume them in the json file that heroku is pointing at. This is an example:
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild":
"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
Add that heroku-postbuild line.
You have to play with the commands in your dev environment, in your computer. Make sure it works in your computer, then push up.
Secondly and this is kinda hacky, however it works for me.
Got to Settings of your app in Heroku, click on Reveal Config Vars button and add this env variable:
DANGEROUSLY_DISABLE_HOST_CHECK=true
This helped me. Hope it helps you.
I have laravel Vue app and it works perfectly with chrome and firefox. but it doesn't work on Edge or IE11 and the console shows error on arrow function!?
How to compile or transpile to es5 with laravel mix and webpack?
could you show the correct configuration for webpack.mix.js?
tnx alot
UPDATE February 2020
If anyone still need help with this, mix already provide a babel compilation to es5:
A slight variation of mix.scripts() is mix.babel(). Its method
signature is identical to scripts; however, the concatenated file will
receive Babel compilation, which translates any ES2015 code to vanilla
JavaScript that all browsers will understand.
You can use it like this:
mix.babel(['public/js/es6file.js'], 'public/js/app.es5.js')
DOCS
In order to compile your es6 code to es5 follow the following steps:
1) install the babel-env preset
npm install #babel/preset-env --save
And then declare it in your .babelrc in the root directory:
{
"presets": ["#babel/preset-env"]
}
2) compile your code using
npm run dev //for dev environment
or
npm run prod // for production environment
after a lot of search, I've found out that this Vuecomponent causes the error "https://github.com/godbasin/vue-select2" how can I compile it to es5.
the edge console error:
Expected identifier, string or number
and the corresponding line that it shows is this:
setOption(val = []) {
this.select2.empty();
this.select2.select2({
-----> ...this.settings,
data: val
});
this.setValue(this.value);
},
sorry for taking your time
I'm quite new to managing assets in any other way than a direct download, and copying the required files to a designated folder and simply referencing this. However, I wish to keep my assets "close to the framework" and therefore hope to get some clarity regarding how it is done in Laravel.
I am using Laravel v5.4 and NPM v5.3.0
I want to use the Sweet Alert library and so did
npm install sweetalert
which placed the files in the node_modules directory and package.json as expected
This is where the confusion begins. I then did
npm install --no-bin-links
(the no-bin-links flag recommended for Windows hosts by the docs)
and
npm run dev
thinking this would compile/minify the library to my app.js or vendor.js (which does not exist), or at least do some magic to let me use the library.
The output states:
DONE Compiled successfully in 8551ms
which suggests to me that I have simply failed to include the Sweet Alert library in this process.
PHPStorm does suggest the library as an auto-complete option, but the application fails to load the library, stating in the JS Console on load:
jQuery.Deferred exception: swal is not defined ReferenceError: swal is not defined
I have also tried "require"-ing the library in bootstrap.js, stating:
window.swal = require('sweetalert');
or simply
swal = require('sweetalert');
Where 'sweetalert' again is suggested by the IDE autocomplete.
Here is how I attempted to use it:
$( document ).ready(function () {
alert("Hello!"); //works
swal({
title: "Hello!",
text: "Hellooo",
type: "error",
confirmButtonText: "OK THEN"
});
});
Which throws the error mentioned above.
I also tried initializing using
window.swal({...
sweetAlert({...
which fail.
What am I missing? And how are you supposed to use NPM packages in a Laravel project/what are the best practices?
Any help is greatly appreciated.
You need to add a reference to your sweetalert vendor file in your webpack.js config file.
mix.scripts('/vendor/..../sweetalert2.min.js', '/public/js/sweetalert.min.js');
That will copy it from your vendor folder to your public folder when you run
npm run dev