It has been some time now that I cannot figure out this error, I am receiving when pushing it to the Heroku.
ERROR in ./app/javascript/stylesheets/application.scss
remote: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
remote: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
remote: ParserError: Syntax Error at line: 1, column 25
Full error message: https://gist.github.com/zilton7/bbac886c75523aab75bc3561ec22ed55
I have tried many variations for application.scss, but once I have bootstrap uncommented I get the said issue.
application.scss
// #import "~bootswatch/dist/darkly/variables";
#import "~bootstrap/scss/bootstrap";
// #import "~bootswatch/dist/darkly/bootswatch";
// #import "trix/dist/trix";
// #import "custom"
I had same issue while deploying my rails application on Heroku. I resolve this by changing bootstrap version in package.json file
from :
To:
Source : https://github.com/rails/webpacker/issues/3188
Related
I have a problem. In my Rails 7 application I am trying to use Font-Awesome icons. I have installed this npm package and then added:
import "#fortawesome/fontawesome-free"
to my app.ts. After that I checked the page where I have put this icon:
<i class="fa-solid fa-caret-down"></i>
But the icon is not showing up. Going into inspector mode, I can see that the icon has a height and width of 0:0, so something must be wrong with installation, maybe I am missing something. I already tried installing the Font-Awesome gem, instead of the NPM, but that gave me all kinds of errors with ESBuild about not be able to compile .svg files and a few other extensions. What am I missing here with the installation?
UPDATE
After installing the gem font-awesome-sass and running bundle install, I added the import statement like this in my app.scss:
#import "bootstrap/scss/bootstrap";
#import "font-awesome";
Unfortunately this results in the following error output:
✘ [ERROR] [plugin sass-plugin] Can't find stylesheet to import.
╷
9 │ #import "font-awesome";
│ ^^^^^^^^^^^^^^
╵
- 9:9 root stylesheet
/app/node_modules/esbuild/lib/main.js:1596
let error = new Error(`${text}${summary}`);
^
Error: Build failed with 1 error:
error: Can't find stylesheet to import.
╷
9 │ #import "font-awesome";
│ ^^^^^^^^^^^^^^
╵
- 9:9 root stylesheet
at failureErrorWithLog (/app/node_modules/esbuild/lib/main.js:1596:15)
at /app/node_modules/esbuild/lib/main.js:1052:28
at runOnEndCallbacks (/app/node_modules/esbuild/lib/main.js:1468:61)
at buildResponseToResult (/app/node_modules/esbuild/lib/main.js:1050:7)
at /app/node_modules/esbuild/lib/main.js:1162:14
at responseCallbacks.<computed> (/app/node_modules/esbuild/lib/main.js:697:9)
at handleIncomingPacket (/app/node_modules/esbuild/lib/main.js:752:9)
at Socket.readFromStdout (/app/node_modules/esbuild/lib/main.js:673:7)
at Socket.emit (node:events:513:28)
at addChunk (node:internal/streams/readable:324:12) {
errors: [
{
detail: undefined,
id: '',
location: null,
notes: [],
pluginName: 'sass-plugin',
text: "Can't find stylesheet to import.\n" +
'\x1B[34m ╷\x1B[0m\n' +
'\x1B[34m9 │\x1B[0m #import \x1B[31m"font-awesome"\x1B[0m;\n' +
'\x1B[34m │\x1B[0m \x1B[31m ^^^^^^^^^^^^^^\x1B[0m\n' +
'\x1B[34m ╵\x1B[0m\n' +
' - 9:9 root stylesheet'
}
],
warnings: []
}
I see! How strange :)
This is how I have it:
gem "font-awesome-sass", "~> 6.1"
bundle install
#import "bootstrap/scss/bootstrap";
#import "font-awesome";
and icons (FontAwesome 5.15.4 and Free icons that have fas fa-something) work perfectly this way:
<i class="fas fa-search"></i>
but they don't work if I want to use unicode icons as content in ::before and and ::after pseudo selectors. After testing on font awesome's own code on codepen and seeing that unicode icons didn't work if the stack was font awesome free, I gave up and am using bootstrap icons for these purposes.
I am failing to see what is the reason for the compilation error.
Also, it is worth noting that I can run my app locally. ./bin/webpack-dev-server works just fine. Running tests locally also work.
I am out of ideas, specially given I never really understood the ins and outs of webpack and all the transpilation hackery.
ERROR in ./app/javascript/src/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 25
at /home/runner/work/my_app/my_app/app/javascript/src/application.scss:6:7298
at Parser.error (/home/runner/work/my_app/my_app/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/home/runner/work/my_app/my_app/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/home/runner/work/my_app/my_app/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/home/runner/work/my_app/my_app/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/home/runner/work/my_app/my_app/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/home/runner/work/my_app/my_app/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /home/runner/work/my_app/my_app/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:194:18
at /home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:139:18
at Rule.each (/home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:105:16)
at Rule.walk (/home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:135:17)
at /home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:152:24
at Root.each (/home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:105:16)
at Root.walk (/home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:135:17)
at Root.walkDecls (/home/runner/work/my_app/my_app/node_modules/postcss/lib/container.js:192:19)
at transformProperties (/home/runner/work/my_app/my_app/node_modules/postcss-custom-properties/index.cjs.js:330:8)
at /home/runner/work/my_app/my_app/node_modules/webpack/lib/NormalModule.js:316:20
at /home/runner/work/my_app/my_app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/runner/work/my_app/my_app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/home/runner/work/my_app/my_app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/runner/work/my_app/my_app/node_modules/postcss-loader/src/index.js:208:9
# ./app/javascript/packs/application.js 5:30-62
I just fixed it. I had to comment out a few lines at a time in my sass fieles until I realized bootstrap could not compile. I updated it from version 5.0.0 to version 5.1.3 (latest at the time of this writing) and it fixed it.
I am creating binding with Pod , After running Sharpie command i frequently get error regarding , Header not found in the File. I have checked the file after opening but header was already there. Let me know if anyone face the same issue.
Error Details are below:-
'Realm/Realm.h' file not found
#import <Realm/Realm.h>
^~~~~~~~~~~~~~~
/private/var/folders/y4/n93ks58x7vd1dl2fr7j9v6mw0000gn/T/com.xamarin.ObjectiveSharpie/11d3f185b30343fe978184fe0a7e4722.h:1:9: fatal error:
could not build module 'MatrixSDK'
#import MatrixSDK;
Binding...
846 warnings and 2 errors generated.
Error while processing /private/var/folders/y4/n93ks58x7vd1dl2fr7j9v6mw0000gn/T/com.xamarin.ObjectiveSharpie/11d3f185b30343fe978184fe0a7e4722.h.
Done. Exiting with error code 1.
I get an error like this when i am trying to compile my tweak. What should i do?
/var/theos/Prefix.pch:9:11: fatal error: 'Foundation/Foundation.h'
file not found
#import <Foundation/Foundation.h>
^
I've installed an open source library with Cocoapods where I can make adjustments but I can't import a file in my own project into the open source file. Is it possible?
Below are the possibilities that I tried
// In the open source file
#import "MyClassFileInOwnProject.h" -- Error: file not found
#import <MyClassFileInOwnProject.h> -- Error: file not found
#import "ProjectFolderName/MyClassFileInOwnProject.h" -- Error: file not found
#import <ProjectFolderName/MyClassFileInOwnProject.h> -- Error: file not found