I am using nuxt.js with fastify.js ( fastify-vue-plugin ) and I am setting up my styling.
The scss compiles and works, but throws an error on build when I am trying to import a font from googlefonts as so:
// _variables.scss
#import url('https://fonts.googleapis.com/css?family=Crimson+Text&display=swap');
#import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
// styles.scss
#import 'variables'; // i've tested this import, it works flawlessly.
The error I'm getting with npm run dev is this:
ERROR Failed to compile with 1 errors friendly-errors 04:00:16
ERROR in ./assets/scss/styles.scss friendly-errors 04:00:16
Module build failed (from ./node_modules/postcss-loader/src/index.js): friendly-errors 04:00:16
Error: Can't resolve 'https:/fonts.googleapis.com/css?family=Crimson+Text&display=swap' in '/Users/home/Projects/voxicard-app/assets/scss'
at onError (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:61:15)
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/node_modules/tapable/lib/Tapable.js:252:11)
at innerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/node_modules/tapable/lib/Tapable.js:249:35)
at resolver.doResolve.createInnerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/Resolver.js:166:11)
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/node_modules/tapable/lib/Tapable.js:249:35)
at /Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:23:4
at loggingCallbackWrapper (/Users/home/Projects/voxicard-app/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
friendly-errors 04:00:16
# ./assets/scss/styles.scss 4:14-301 14:3-18:5 15:22-309
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
// nuxt.config.js
...
css: [
'./assets/scss/styles.scss'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://bootstrap-vue.js.org/docs/
'bootstrap-vue/nuxt',
'#nuxtjs/style-resources'
],
bootstrapVue: {
bootstrapCSS: false,
bootstrapVueCSS: false
},
styleResources:{
scss:[
'./assets/scss/*.scss',
]
},
...
I have another project where I've used sass-loader with the same font import and that worked, though it wasn't a Nuxtjs project.
What is not working here?
From Aldarund's comment, I managed to fix this error by removing this line from my nuxt.config.js
// nuxt.config.js
styleResources : {
scss: [
'./assets/scss/*.scss' // <<<< I Removed this line and kept this array empty.
]
}
Related
I would like to use nuxt/content for some content from a database. When starting the development environment with npm run dev I get the following message
ERROR Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
and
[Vue warn]: Failed to resolve component: nuxt-content
my config
//nuxt.config.ts
export default defineNuxtConfig({
modules: [
'#nuxtjs/tailwindcss',
'#pinia/nuxt',
'#nuxt/content',
],
imports: {
dirs: ['stores'],
},
buildModules: [
'#nuxt/postcss8',
'#pinia/nuxt',
],
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
css: [
'#/assets/style/main.scss',
],
})
When i remove the module #nuxt/content the error message also disappears.
By the way, I use vite in this project.
I have some errors with webpack 5, express, github actions.
I use the github actions because want to use github secrets.
also, I use webpack because of using the secrets in the code.
anyway, I got errors below,
ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 479:6-26
Module not found: Error: Can't resolve 'uglify-js' in '/Users/luna/workspace/express_api/node_modules/terser-webpack-plugin/dist'
# ./node_modules/terser-webpack-plugin/dist/index.js 27:4-22
# ./webpack.config.js 2:21-53
# ./app.js 13:15-45
ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 557:14-34
Module not found: Error: Can't resolve '#swc/core' in '/Users/luna/workspace/express_api/node_modules/terser-webpack-plugin/dist'
# ./node_modules/terser-webpack-plugin/dist/index.js 27:4-22
# ./webpack.config.js 2:21-53
# ./app.js 13:15-45
ERROR in ./node_modules/terser-webpack-plugin/dist/utils.js 635:18-36
Module not found: Error: Can't resolve 'esbuild' in '/Users/luna/workspace/express_api/node_modules/terser-webpack-plugin/dist'
# ./node_modules/terser-webpack-plugin/dist/index.js 27:4-22
# ./webpack.config.js 2:21-53
# ./app.js 13:15-45
Also, got 15 warnings. if you want to the warnings, let me know.
what is the problem?
Below is the webpack.config.js
const webpack = require("webpack");
module.exports = {
target: "async-node",
mode: "production",
entry: "./app.js",
output: {
path: "/dist",
filename: "main.js",
},
plugins: [
new webpack.DefinePlugin({
"process.env.PA_URL": JSON.stringify(process.env.PA_URL),
"process.env.PA5_EMAIL": JSON.stringify(process.env.PA5_EMAIL),
"process.env.PA5_PASSWORD": JSON.stringify(process.env.PA5_PASSWORD),
}),
],
};
the webpack version is wrong?
You are bundling your entry file, but also any node_modules your ./app.js requires, which in turn tries to require a bunch of third-party stuff, which is not available - hence the errors on missing modules.
Exclude those node_modules by extending your webpack config:
yarn add -D webpack-node-externals
(see: https://www.npmjs.com/package/webpack-node-externals)
const webpack = require("webpack");
const nodeExternals = require("webpack-node-externals");
module.exports = {
target: "async-node",
mode: "production",
entry: "./app.js",
externalsPresets: { node: true }, // <-- here
externals: [nodeExternals()], // <-- and here
...etc
That should exclude them and you should be good to go.
I installed nodegit 0.26.5 via npm and import the package in the renderer part of my Electron application. During compilation I receive this error below:
WARNING in ./node_modules/nodegit/dist/nodegit.js
Module not found: Error: Can't resolve '../build/Release/nodegit.node' in '/Users/steve/Documents/git/git_reader/node_modules/nodegit/dist'
ERROR in ./node_modules/nodegit/dist/nodegit.js
Module not found: Error: Can't resolve '../build/Debug/nodegit.node' in '/Users/steve/Documents/git/git_reader/node_modules/nodegit/dist'
ERROR in ./node_modules/nodegit/dist/nodegit.js
Module not found: Error: Can't resolve '../package' in '/Users/steve/Documents/git/git_reader/node_modules/nodegit/dist'
In my node_modules/nodegit/build directory, I only have a Release directory. Does anyone have an idea what I miss here?
I created a repo, which I forked from a boilerplate template. I only added nodegit and #types/nodegit as a dependency and imported it in details.component.ts
https://github.com/Githubber2021/electron-nodegit-error
git clone https://github.com/Githubber2021/electron-nodegit-error.git
npm install
npm run electron:local
to reproduce the issue. Can anyone reproduce the error on their machine? What am I missing here? Thank you so much for any help or hint!!
I'm using nodegit 0.27 and the error message for me was slightly different, it was
nodegit.js:1088 Uncaught Error: Cannot find module '../package'
Note that I'm using webpack together with electron forge and in my package.json I have the following. (I replaced the irrelevant parts with ...)
{
"name": ...
"version": ...
"description": ...
"config": {
"forge": {
"packagerConfig": {},
"makers": [
...
],
"plugins": [
[
"#electron-forge/plugin-webpack",
{
"mainConfig": ...
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
...
]
}
}
]
]
}
},
...
}
And in my webpack.renderer.config.js I needed to add an externals field to my exports so that they look something like this
module.exports = {
...
externals: {
nodegit: 'commonjs nodegit'
},
};
Then in my main.ts, the main process I have
(global as any).mynodegit = require('nodegit');
And then I use IPC to access nodegit within my renderer process. Note that the #ts-ignore is required to suppress error messages from typescript.
import { remote } from "electron";
// #ts-ignore
import * as Git from "#types/nodegit";
// #ts-ignore
const Git = remote.getGlobal('mynodegit');
Here is the boilerplate that helped me with this https://github.com/newblord/electron-react-webpack-nodegit-boilerplate
I have an Angular 7 app, built using a starter kit called ASPNet Core Angular Universal, and I would like to use SCSS files from a few node modules (Bootstrap, Font Awesome, and MDBootstrap.) I tried importing them in a single scss file, used in an app.component, like this:
#import '~font-awesome/scss/font-awesome.scss';
#import '~angular-bootstrap-md/scss/bootstrap/bootstrap.scss';
#import '~angular-bootstrap-md/scss/mdb-free.scss';
But I get errors during build:
ERROR in ./ClientApp/app/app.component.scss
(./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js!./ClientApp/app/app.component.scss) Module not found: Error: Can't resolve '../img/svg/arrow_right.svg' in
'...'
I tried adding resolve-url-loader in webpack.addition.js, but it didn't work:
const sharedModuleRules = [
// sass
{
test: /.scss$/,
loaders: ['to-string-loader', 'css-loader', 'resolve-url-loader', 'sass-loader']
},
// font-awesome
{ test: /.(woff2?|ttf|eot|svg)$/, loader: 'url-loader?limit=10000' }
];
I have updated the angular packages version from 2.4.10 to 4.0.0 after updating i am getting the following errors while navigating.
ERROR Error: Uncaught (in promise): Error: Found the synthetic property #transformPlaceholder. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
Error: Found the synthetic property #transformPlaceholder. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application
And i changed the webpack.common.js configuration. see the below code
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)#angular/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
I have fixed the issue. I added a new package: #angular/animations.
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
And I imported the module:
#NgModule({
imports: [
BrowserAnimationsModule
]
})
It's a change from 4.0.0-rc.1.
In their words, "We have pulled Animations into their own package. This means that if you don’t use Animations, this extra code will not end up in your production bundles. This also allows you to more easily find documentation and to take better advantage of autocompletion. If you do need animations, libraries like Material will automatically import the module (once you install it via NPM), or you can add it yourself to your main NgModule."
npm install #angular/animations --save
Inside AppModule >> import {BrowserAnimationsModule} from '#angular/platform-browser/animations'
Add it to imports.
#NgModule({
imports: [
BrowserAnimationsModule
]
})
That depends on whether you want to use Angular animations or not
In case you do not want to use it (i.e. it will reduce the production bundle size) then import the NoopAnimationsModule :
import { NoopAnimationsModule } from '#angular/platform-browser/animations';
imports: [
NoopAnimationsModule
// ...
]
One can run into a problem with
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
You can get this error message:
node_modules/#angular/platform-browser/bundles/platform-browser.umd.js/animations 404 (Not Found)
To fix it, if you are using systemjs.config.js then you need to have this line it it:
'#angular/platform-browser/animations': 'npm:#angular/platform-browser/bundles/platform-browser-animations.umd.js',
Here is example contents of systemjs.config.js that fixes the problem:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/router/upgrade': 'npm:#angular/router/bundles/router-upgrade.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#angular/animations': 'npm:#angular/animations/bundles/animations.umd.js',
'#angular/animations/browser': 'npm:#angular/animations/bundles/animations-browser.umd.js',
'#angular/platform-browser/animations': 'npm:#angular/platform-browser/bundles/platform-browser-animations.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'primeng': 'npm:primeng'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
primeng: {
defaultExtension: 'js'
}
}
});
})(this);
Note: The references to primeng are not necessary unless you are using it. I happen to be giving it a try. (Not a recommendation)
Don't forget to add the following line in your System.config.js file. If you are going to use animations in your angular project then you need to include this lines in your angular repo.
'#angular/animations': 'npm:#angular/animations/bundles/animations.umd.js',
'#angular/animations/browser': 'npm:#angular/animations/bundles/animations-browser.umd.js',
#angular/platform-browser/animations': 'npm:#angular/platform-browser/bundles/platform-browser-animations.umd.js',