I already have a project in Laravel 9. I want to convert the UI to use Bulma. I don't want to use the CDN. I've read the documentation about doing it in an older version of Laravel as well as a new install. I want to know how to add Bulma to an existing Laravel 9 application. Note I couldn't find an app.scss file in laravel. So far, I've run the following commands.
npm install bulma --save-dev
Created an app.scss file in the resources folder and added the following.
#import '~bulma/bulma';
However, I get the following error. What am I doing wrong? Unfortunately, there is scant documentation on it.
node_modules/bulma/bulma.sass:1 #charset "utf-8" ^
SyntaxError: Invalid or unexpected token at Object.compileFunction
(node:vm:352:18) at wrapSafe
(node:internal/modules/cjs/loader:1026:15) at Module._compile
(node:internal/modules/cjs/loader:1061:27) at
Object.Module._extensions..js
(node:internal/modules/cjs/loader:1151:10) at Module.load
(node:internal/modules/cjs/loader:975:32) at Function.Module._load
(node:internal/modules/cjs/loader:822:12) at Module.require
(node:internal/modules/cjs/loader:999:19) at require
(node:internal/modules/cjs/helpers:102:18) at Object.
(/home/zeenux/Programming/php/blog/webpack.mix.js:17:9) at
Module._compile (node:internal/modules/cjs/loader:1097:14)
This is how i tried it and it works fine, no issue with bulma
First
npm install bulma
Then in resources/css/app.css
#import 'bulma/css/bulma.min.css';
in blade
<head>
.....
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<button class="button is-primary">
Button
</button>
</body>
Now i have tried your way with sass
in resources/sass/app.scss
//#import '~bulma/bulma';
BOTH WORKS FINE
//#import 'bulma/css/bulma.min.css';
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
//.css('resources/css/app.css', 'public/css')
.sass('resources/sass/app.scss', 'public/css');
So all works fine to me, what you are facing is probably npm version issue
i am using 8.5.3 to install that run this npm install -g npm#8.5.3. Please do keep in mind while playing with npm versions, install only that npm version which is compatable with all of your packages you are using in your project.
Related
When I run npx create-react-app, I had these errors. Maybe someone knows whats it's wrong? P.S. also had tried npm-install -g create-react-app.
C:\Users\Deividas\Desktop\PAMEGINIMAS>create-react-app my-app
internal/modules/cjs/loader.js:621
throw e;
^
Error: No valid exports main found for 'C:\Users\Deividas\AppData\Roaming\npm\node_modules\create-react-app\node_modules\is-promise'
at resolveExportsTarget (internal/modules/cjs/loader.js:618:9)
at applyExports (internal/modules/cjs/loader.js:499:14)
at resolveExports (internal/modules/cjs/loader.js:548:12)
at Function.Module._findPath (internal/modules/cjs/loader.js:650:22)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:948:27)
at Function.Module._load (internal/modules/cjs/loader.js:854:27)
at Module.require (internal/modules/cjs/loader.js:1023:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (C:\Users\Deividas\AppData\Roaming\npm\node_modules\create-react-app\node_modules\run-async\index.js:3:17)
at Module._compile (internal/modules/cjs/loader.js:1128:30) {
code: 'MODULE_NOT_FOUND'
}
This seems to be a recent problem with npm. There is an issue open as of the last few hours and it seems like people are working on it. I don't think it's anything to do with yourproject.
The issue
While the issue is being fixed: try installing node version 12.12.0 as shown below (if using nvm) and run create-react-app again.
nvm install 12.12.0
nvm use 12.12.0
I'd try to clear your cache npm cache clean --force. What version of node and npm are you using?
I am attempting to create a nuxt app in the command line, going to build a Vue web app running off this and Vuetify. I am not sure what I am doing wrong but I run the exact scaffolding command that the docs tell me to run and it errors out everytime with this message.
PS C:\users\gman\documents\github> npx create-nuxt-app myappname
create-nuxt-app v2.15.0
✨ Generating Nuxt.js project in myappname
Trace: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\GMan\AppData\Roaming\npm-cache\_npx\23248\node_modules\create-nuxt-app\node_modules\is-promise\index.js
require() of ES modules is not supported.
require() of C:\Users\GMan\AppData\Roaming\npm-cache\_npx\23248\node_modules\create-nuxt-app\node_modules\is-promise\index.js from C:\Users\GMan\AppData\Roaming\npm-cache\_npx\23248\node_modules\create-nuxt-app\node_modules\run-async\index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename C:\Users\GMan\AppData\Roaming\npm-cache\_npx\23248\node_modules\create-nuxt-app\node_modules\is-promise\index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\GMan\AppData\Roaming\npm-cache\_npx\23248\node_modules\create-nuxt-app\node_modules\is-promise\package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1172:13)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1042:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.<anonymous> (C:\Users\GMan\AppData\Roaming\npm-cache\_npx\23248\node_modules\create-nuxt-app\node_modules\run-async\index.js:3:17)
at Module._compile (internal/modules/cjs/loader.js:1156:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14) {
code: 'ERR_REQUIRE_ESM'
}
at C:\Users\GMan\AppData\Roaming\npm-cache\_npx\23248\node_modules\create-nuxt-app\cli.js:46:17
Has anyone else run into this, google searching is turning up nothing, figure I would check here to see if anyone know what might be up.
Thanks!
I determined that is-promise pushed a commit 2 hours ago that broke.
They are fixing it sounds like.
I'm new to npm and I can't understand how to run a tutorial I found on GitHub. I suspect it has something to do with my lack of knowledge of npm
The tutorial is this one: https://github.com/IrfanBaqui/react-router-v4-tutorial
I'm on Windows 7.
I first tried running serving the index.html pages inside each folder via XAMPP... however, that didn't work (I just get a blank page).
Next, I tried navigating inside a folder via the command prompt and running npm start... that didn't work either... (I do have npm and node.js globally installed)
I get this error:
Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:469:1
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Documents\Downloads\Irfan Baqui react-router-v4-tutorial-m
ct_Components\server.js:2:15)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
Advice would be appreciated.
Inside each sub folder you need to do
npm install it will install every lib you need.
npm start it will run the project
The server should be running. To access the site it should be localhost:9000
Well #sheplu has already answered your question. I would just like to let you know why it is needed.
It is a node project. The guys whose code you are trying to run have used many of the dependencies for each lesson (each folder in his repository).
what npm-install does is, download and resolves all the dependencies used in the project specified in the file named package.json. So, whenever you see a file package.json it would be there specifying dependencies for dev or prod environment.
So, run npm-install in the directory where you see package.json file.
There can be another file bower.json with the same purpose (listing the required dependencies). if you see bower.json, you should run bower-install in that case.
And finally the script to run the project. npm start in your case.
And the error you just posted is clearly saying that some-module not found or could not resolve or something like that. That is because, you've resolved the dependencies required, which you'll have to using npm-install or bower-install for package.json and bower.json respectively
I have created a new node (MERN) app on my mac osx. Im learning (from rails).
I don't know why, but whilst I do have a package.json file, I cannot generate a node_modules folder. I have tried all of the suggested answers in this post.
When I go to the terminal and test:
ls node_modules
I get a long list of all the modules listed in my package.json (but no node modules folder in my app file in atom).
That list includes all of my babel modules.
When I try to start the app, I get an error that arises out of my using import statements instead of require (which I should be able to do if babel were working).
node server.js
/Users/mr_may/server.js:1
(function (exports, require, module, __filename, __dirname) { import express from 'express';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:390:7)
at startup (bootstrap_node.js:150:9)
Does anyone know how to configure a new node app so that it generates the node modules folder? Apart from the post above, I can't find any suggestions on how to work through this problem. The answers in the post linked above haven't worked.
hi you may want to make sure you are in the directory of your folder
e.g.
cd Desktop/My_Project
The safest way is the then run npm init get all the required things fill out and run npm install --save babel-core at this point you should be able to see the node_modules folder found in "Desktop/My_Project/node_modules"
Try this out and hope this helps :D
Hello I receive the following message when trying to install npm. I downloaded the most recent node.js but it doesn't seem to download npm. I keep getting the belowenter code here error message after deleting node.js and reinstalling it.
When I try installing node.js I don't see the following being created:
C:\Users\Efren Barragan\AppData\Roaming\npm
This is the first time installing node.js. I just installed it on my old computer and it worked out fine. I am new to this so so your patience is much appreciated! Thanks!
C:\Users\Efren Barragan> npm install npm -g
module.js:327
throw err;
^
Error: Cannot find module 'npmlog'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at C:\Users\Efren Barragan\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js:19:13
at Object.<anonymous> (C:\Users\Efren Barragan\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js:75:3)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
Due to the bug in versions this is what i did -
I have faced the same issue in my Windows 10 PC. After looking into solutions, since i couldn't find the exact solution for the issue i was facing
Cannot find module 'npmlog'
I just uninstalled the node js and then, deleted both 'npm' and 'npm-cache' in
"C:\Users\YourPCName\AppData\Roaming"
Then, i downloaded the latest version of node from Node JS Website
And, installed node js
After that i checked with the path in environment variables.
Finally run the command prompt 'run as administrator' and npm install npm -g
Checking your version will show the latest version. 'npm -v'
I got the latest version - v3.10.9
Try this. this should work.
Install a newer version, it's been a bug in previous version.