Webpack CSS #import issue 'Module parse failed: Unexpected character '#' (1:0)' - css

i am having an issue with webpack and my css file. Whenever i run "npm start", i get this error :
ERROR in ./ticker.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
I read that it requires a loader for css files however i have installed 'style-loader' and 'css-loader' but apparently it still won't work. Any ideas ?
Here is :
webpackconfig, package file, ticker.css file
Thanks guys !
I tried to delete and recreate the node_modules directory, use raw loader, change the loaders order.

Turned out my node.js version wasn't up to date which caused some conflicts with some packages. Think about updates guys. :)

Related

Nuxt using incorrect loader for scss

I am attempting to set up a nuxt project with scss. I added the following packages to my project:
"sass": "^1.37.0",
"sass-loader": "10",
and I updated nuxt.config.js to say the following to point to my new scss main file:
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'~/assets/sass/main.scss'
],
I had to use older versions because i was getting errors with certain functions I was using but i managed to get it working correctly on my local machine, and it builds just fine repeatedly as I update code as well.
I am now trying to deploy to staging on a Linux/nginx server and I am getting the following errors when building npm run build:
ERROR in ./assets/sass/main.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./assets/sass/main.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) postcss-custom-properties: <css input> Unknown word
> 1 | var(--font-size-2)/var(--font-ratio)
| ^
It looks like it's using css builder instead of sass builder! Does anyone know how to fix this? I doublechecked that the files on the server include the sass-loader and that the config is pointing to my .scss file, and i checked the documentation which states that Nuxt will automatically choose the correct loader.
What am I doing wrong?

JavaFX-11 in VSCode: Error: Could not find or load main class Files\Java\javafx-sdk-11.0.2\lib

I have been trying to set up JavaFX-11 in Visual Studio Code.
I found this post JavaFX-11 with VSCode, which explained how to do so, and followed the steps.
However, I need to include the module-path to the JavaFX SDK by adding an entry for the vmArgs in the launch.json file:
{
"configurations": [
{
"type": "java",
"name": "CodeLens (Launch) - Main",
"request": "launch",
"vmArgs": "--module-path C:\\Program Files\\Java\\javafx-sdk-11.0.2\\lib --add-modules javafx.controls,javafx.fxml",
"mainClass": "hellofx.Main",
"projectName": "hellofx"
}
]
}
As you can see in the vmArgs entry, is my local path to the JavaFX SDK. However, when I try to run the program I get the following error:
Error: Could not find or load main class
Files\Java\javafx-sdk-11.0.2\lib Caused by:
java.lang.ClassNotFoundException: Files\Java\javafx-sdk-11.0.2\lib
For the past hours I have trying to figure out why it doesn't work. Am I writing the arguments wrong? I saw there are .jmods files. Should I download those files? Is there any other way to specify the module path?
Is worth to mention that I am running Visual Studio Code in Windows 10, so I have to use escape sequence to use backslashes.
As you can see by the error you have posted:
Error: Could not find or load main class Files\Java\javafx-sdk-11.0.2\lib
it is clear that the issue is related to the space you have in Program Files.
Solutions
As a possible solution, you could move your JavaFX SDK to a folder without spaces in its path, and set your vmArgs accordingly, like:
"vmArgs": "--module-path C:\\Java\\javafx-sdk-11.0.2\\lib --add-modules javafx.controls,javafx.fxml",
While that works, if you still want to keep your current approach, you have to find a way to set the path with spaces.
Based on a similar issue, you can find that:
Paths containing spaces should be surrounded by (escaped) double quotes
So this will be the solution in your case:
"vmArgs": "--module-path \"C:\\Program Files\\Java\\javafx-sdk-11.0.2\\lib\" --add-modules javafx.controls,javafx.fxml",
Note this doesn't apply to the path added in the .classpath file with the JavaFX jars, that will be like this:
<classpathentry kind="lib" path="C:\\Program Files\\Java\\javafx-sdk-11.0.2\\lib\\javafx.base.jar"/>
Adding double quotes surrounding my environment variable in IntelliJ solved for me:
PATH_TO_FX="C:\Program Files\Java\javafx-sdk-11.0.2\lib"
** If you are having this error on Eclipse**
"Error occurred during initialization of boot layer
java.lang.module.FindException: Module javafx.controls not found"
Remove the JavaFX SDK library from the build path of the project!!

Webpack-Dev-Server giving error 'You may need an appropriate loader to handle this file type' for .jsx file

I am using the grunt-webpack. Trying to start the webpack-dev-server gives this error
Module parse failed: /u/saxenat/react-blueprint/src/js/app.jsx Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
Before you close this question, let me just say: webpack is bundling the files properly. The grunt-webpack plugin provides 2 tasks: grunt-webpack and grunt-webpack-dev-server. When I try HMR with the server, it is failing. Otherwise it works fine.
I have included babel-loader with presets es-2015 and react.
Any ideas?

grunt-ts error after compiling

having problem getting started with grunt-ts.
I've got one src folder in my project folder:
\src
test.ts
test2.ts
After compilation, i have:
\src
test.js
test.js.map
test.ts
test2.js
test2.js.map
test2.ts
Actually, this is exactly what i want .... but ..
then the task aborts with an error:
Arguments to path.resolve must be strings
My grunt config section is:
ts: {
dev: {
src: ["src/*.ts"]
}
},
Versions and stuff: i today installed grunt-ts. Any ideas???
Arguments to path.resolve must be strings
That error is really generic. PS: I think the error is in grunt-contrib-watch
PS PS: can you share the project?
This is the error source btw : https://github.com/joyent/node/blob/master/lib/path.js#L116 the question is: what is calling path.resolve incorrectly? I'd like to debug that.

Yeoman Webapp in combination with Assemble

I'm trying to get the default Yeoman Webapp to work with Assemble.io.
I followed this tutorial Using assemble.io with yeoman.io’s webapp Gruntfile
Got it up & running (partially), the first problem I have is that livereload isn't kicking in when changes are made to the .hbs files. When I manually refresh, I can see the changes that were made.
This is my Grunt file.
Second problem is that 'grunt build' gives me the following error:
Running "requirejs:dist" (requirejs) task
{ [Error: Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".
at Function.build.createConfig ([MY DIRECTORY]/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:25109:19)
]
originalError: [Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".] }
I googled around & when I add the following to requirejs:dist:options
appDir: '<%= yeoman.app %>/', dir: 'build'
Then this error is solved, but the next appears:
No "concat" targets found.
Warning: Task "concat" failed. Use --force to continue.
Versions:
Yeoman 1.0.4
Node 0.10.21
Bower 1.2.7
Grunt-cli 0.1.9
Grunt 0.4.1
Anyone seeing the problem? Thanks!
See this line in your gist. It's trying to call a task called concat in your Gruntfile, but that task doesn't exist. There may have been a change with the Yeoman webapp generator or you might have had a copy/paste issue or something. The assemble part of your Gruntfile looks fine.
I think you can remove the concat and carry on.

Resources