Nuxt using incorrect loader for scss - css

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?

Related

Adding dependencies to the "ui" package of a Turborepo with Next.js throws Unexpected token 'export'

If you run
npx degit vercel/turbo/examples/with-react-native-web with-react-native-web
cd with-react-native-web
yarn install
To create a basic Turborepo that has a Nextjs application, a react-native mobile app with Expo and a ui package to share components between apps (there is a Button as an example already shared between the two apps), it works. But my ui package needs other dependencies, for example:
#fortawesome/fontawesome-svg-core,
#fortawesome/free-solid-svg-icons,
#fortawesome/react-native-fontawesome,
This is because the buttons that I want to render icons on my buttons. Once I install this dependency and try to use the button that has an icon, the Next.js app throws:
Unexpected token 'export'.
I understand this is because #fortawesome/react-native-fontawesome is using import/export syntax and needs to be transpiled to be used on the Next.js app, and I cannot make it work. I am trying to do this by adding this to my next.config.js:
transpilePackages: ['ui'],
I also tried using next-transpile-modules which i don't think is the right solution since next now supports what that package used to be for through transpilePackages
I also tried to specify that the ui package was "type": "module" but still, I am getting the same error.
How can you specify that those dependencies that belong to the ui package must be transpiled to be run by the browser?
I have checked the package #fortawesome/react-native-fontawesome
package.json of #fortawesome/react-native-fontawesome does not contain field "type": "module" but index.js contains:
export { default as FontAwesomeIcon } from './dist/components/FontAwesomeIcon'
therefore Next handles #fortawesome/react-native-fontawesome as non-ES module but this module contains export statement.
You mentioned transpilePackages field in next.config.js, so I think it may help with this issue (but pls check version of Next where transpilePackages appeared).

Using Azure static web app with a Quasar Project

I thought it would be pretty simple to host a vuejs quasar project in azure static web apps but I cannot even seem to do the build process from github to publish the website. I can do quasar dev and quasar serve locally and all works great. It is just the assets do not seem to load and trigger a build error for pushing to github/azure. My error comes out as follows:
[vite:asset] Could not load /github/workspace/src/assets/imgs/12.jpg (imported by src/components/HomeRecentWork.vue): ENOENT: no such file or directory, open '/github/workspace/src/assets/imgs/12.jpg'
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: Could not load /github/workspace/src/assets/imgs/12.jpg (imported by src/components/HomeRecentWork.vue): ENOENT: no such file or directory, open '/github/workspace/src/assets/imgs/12.jpg'] {
errno: -2,
code: 'PLUGIN_ERROR',
syscall: 'open',
path: '/github/workspace/src/assets/imgs/12.jpg',
pluginCode: 'ENOENT',
plugin: 'vite:asset',
hook: 'load',
watchFiles: [
'/github/workspace/index.html',
'/github/workspace/.quasar/client-entry.js',
'/github/workspace/node_modules/vite/package.json',
'/github/workspace/node_modules/vue/package.json',
'/github/workspace/node_modules/#quasar/extras/package.json',
'/github/workspace/node_modules/quasar/package.json',
'/github/workspace/node_modules/vue/dist/vue.runtime.esm-bundler.js',
'/github/workspace/node_modules/#quasar/extras/fontawesome-v6/fontawesome-v6.css',
'/github/workspace/node_modules/#quasar/extras/roboto-font/roboto-font.css',
'/github/workspace/node_modules/#quasar/extras/material-icons/material-icons.css',
'/github/workspace/node_modules/quasar/dist/quasar.sass',
'/github/workspace/.quasar/app.js',
'/github/workspace/.quasar/quasar-user-options.js',
'/github/workspace/src/css/app.scss',
'/github/workspace/src/boot/axios.js',
'vite/preload-helper',
'/github/workspace/node_modules/#vue/runtime-dom/package.json',
'/github/workspace/node_modules/#vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/vue-plugin.js',
'/github/workspace/src/App.vue',
'/github/workspace/src/stores/index.js',
'/github/workspace/src/router/index.js',
'/github/workspace/node_modules/quasar/src/plugins/Meta.js',
'/github/workspace/node_modules/quasar/src/plugins/Notify.js',
'/github/workspace/node_modules/axios/package.json',
'/github/workspace/node_modules/quasar/wrappers/index.mjs',
'/github/workspace/node_modules/axios/index.js',
'/github/workspace/node_modules/#vue/runtime-core/package.json',
'/github/workspace/node_modules/#vue/shared/package.json',
'/github/workspace/node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js',
'/github/workspace/node_modules/#vue/shared/dist/shared.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/install-quasar.js',
'/github/workspace/node_modules/quasar/src/lang.js',
'/github/workspace/node_modules/quasar/src/icon-set.js',
'plugin-vue:export-helper',
'/github/workspace/node_modules/pinia/package.json',
'/github/workspace/node_modules/pinia/dist/pinia.mjs',
'/github/workspace/node_modules/vue-router/package.json',
'/github/workspace/node_modules/vue-router/dist/vue-router.mjs',
'/github/workspace/src/router/routes.js',
'/github/workspace/node_modules/quasar/src/plugins/Platform.js',
'/github/workspace/node_modules/quasar/src/utils/extend.js',
'/github/workspace/node_modules/quasar/src/components/avatar/QAvatar.js',
'/github/workspace/node_modules/quasar/src/components/icon/QIcon.js',
'/github/workspace/node_modules/quasar/src/components/btn/QBtn.js',
'/github/workspace/node_modules/quasar/src/components/spinner/QSpinner.js',
'/github/workspace/node_modules/quasar/src/utils/private/create.js',
'/github/workspace/node_modules/quasar/src/utils/event.js',
'/github/workspace/node_modules/quasar/src/utils/private/global-nodes.js',
'/github/workspace/node_modules/quasar/src/utils/is.js',
'\x00commonjsHelpers.js',
'/github/workspace/node_modules/axios/lib/axios.js',
'\x00/github/workspace/node_modules/axios/lib/axios.js?commonjs-proxy',
'/github/workspace/node_modules/#vue/reactivity/package.json',
'/github/workspace/node_modules/#vue/reactivity/dist/reactivity.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/plugins/Screen.js',
'/github/workspace/node_modules/quasar/src/plugins/Dark.js',
'/github/workspace/node_modules/quasar/src/history.js',
'/github/workspace/node_modules/quasar/src/body.js',
'/github/workspace/node_modules/quasar/src/utils/private/symbols.js',
'/github/workspace/node_modules/quasar/src/utils/private/global-config.js',
'/github/workspace/node_modules/quasar/src/utils/private/define-reactive-plugin.js',
'/github/workspace/node_modules/quasar/lang/en-US.mjs',
'/github/workspace/node_modules/quasar/src/utils/private/inject-obj-prop.js',
'/github/workspace/node_modules/quasar/icon-set/material-icons.mjs',
'/github/workspace/node_modules/vue-demi/package.json',
'/github/workspace/node_modules/#vue/devtools-api/package.json',
'/github/workspace/node_modules/vue-demi/lib/index.mjs',
'/github/workspace/node_modules/#vue/devtools-api/lib/esm/index.js',
'/github/workspace/src/layouts/MainLayout.vue',
'/github/workspace/src/pages/IndexPage.vue',
'/github/workspace/src/pages/ErrorNotFound.vue',
'/github/workspace/node_modules/quasar/src/composables/private/use-size.js',
'/github/workspace/node_modules/quasar/src/utils/private/render.js',
'/github/workspace/node_modules/quasar/src/directives/Ripple.js',
'/github/workspace/node_modules/quasar/src/components/btn/use-btn.js',
'/github/workspace/node_modules/quasar/src/utils/private/key-composition.js',
'/github/workspace/node_modules/quasar/src/components/spinner/use-spinner.js',
'\x00/github/workspace/node_modules/axios/lib/axios.js?commonjs-module',
'/github/workspace/node_modules/axios/lib/utils.js',
'\x00/github/workspace/node_modules/axios/lib/utils.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/bind.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/bind.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/core/Axios.js',
'\x00/github/workspace/node_modules/axios/lib/core/Axios.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/core/mergeConfig.js',
'\x00/github/workspace/node_modules/axios/lib/core/mergeConfig.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/defaults.js',
'\x00/github/workspace/node_modules/axios/lib/defaults.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/Cancel.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/Cancel.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/CancelToken.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/CancelToken.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/isCancel.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/isCancel.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/spread.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/spread.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/isAxiosError.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/isAxiosError.js?commonjs-proxy',
'/github/workspace/node_modules/quasar/src/utils/debounce.js',
... 128 more items
]
}
Node.js v18.12.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
---End of Oryx build logs---
Oryx has failed to build the solution.
I have not found much info on doing a quasar project inside azure web apps so any advice would be helpful. All the tutorials I have found and gone through do not have these issues and I really do not have a complicated project that deviates from the standard quasar project.
EDIT:
the issue is actually my image paths. I am using with src="~assets/imgs/embroidery.jpg" where ~ must be an alias setup in quasar. Works for components in quasar but not for raw img tags. If i use a relative path like ../assets/imgs/filename.jpg it still draws an error on build. However, if i do /assets/imgs/filename.jpg and put the assets folder in public it works. I dont want to do this however so how should i put the paths for images in my components if not a vue-component per say?

Parsing error : Cannot find module 'next/babel'

Update 1 : Updated the latest working solution to #Jeevan Rupacha answer, please scroll below to check it out.
I have been encountering this error on every single new Next.js project that I create. The page can be compiled without any problem, it just keeps on showing as error on the first line in every js file.
Parsing error: Cannot find module 'next/babel'
Require stack:
D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\bundle.js
D:\app\next_app\ratu-seo\node_modules\next\dist\compiled\babel\eslint-parser.js
D:\app\next_app\ratu-seo\node_modules\eslint-config-next\parser.js
D:\app\next_app\ratu-seo\node_modules#eslint\eslintrc\lib\config-array-factory.js
D:\app\next_app\ratu-seo\node_modules#eslint\eslintrc\lib\index.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\cli-engine.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\cli-engine\index.js
D:\app\next_app\ratu-seo\node_modules\eslint\lib\api.js
c:\Users\Admin.vscode\extensions\dbaeumer.vscode-eslint-2.1.23\server\out\eslintServer.js
Create file called .babelrc in your root directory and add this code:
{
"presets": ["next/babel"],
"plugins": []
}
And in .eslintrc, replace the existing code with:
{
"extends": ["next/babel","next/core-web-vitals"]
}
I had this same problem - but only when I wasn't opening the project folder directly. It appears to be related to how ESLint needs to be configured for workspaces.
In addition, the currently accepted answer works for VSCode but breaks npm run lint for me.
TL;DR - see this answer which points to this blog. This fixed it for me.
Some Details
For example, if I have:
~
| -- some_folder
| | -- project_1
| | -- project_2
| ...files relating to both projects...
I'll often just cd ~/some_folder && code .
But then I get the same error you're experiencing. However, if I cd ~/some_folder/project_1 && code . then everything works fine.
If that's the case for you as well, then what you need (as described in the links above) is to:
Create a workspace config
Specify folders where you need ESLint to run
You can do this easily from VSCode. The net result (following my example above) is a file named ~/some_folder/.vscode/settings.json with contents
{
"eslint.workingDirectories": [
"./project_1",
"./project_2"
]
}
Note: You don't need to create extra .babelrc file
In your NextJS Project you have this file , named .eslintrc.json,
In this file
You have following code
{
"extends": "next/core-web-vitals"
}
Replace it with
{
"extends": ["next/babel","next/core-web-vitals"]
}
Note: If you only replace with
{
"extends": ["next/babel"]
}
The red error sign will go but the code won't compile and gives compile error.
For Nextjs 12 add prettier in .eslintrc.json file inside your root folder.
{
"extends": ["next/core-web-vitals", "prettier"]
}
In my case, the issue occurs when I code in VSCode and use pnpm as the package manager, I tried lots of methods in StackOverflow, and finally, I find out that it's the duty of the VSCode ESLint plugin.
So, to fix the problem without uninstalling the plugin, add the following configuration in the .vscode/settings.json and reload your editor.
{
"eslint.packageManager": "pnpm"
}
Using Next.js, TypeScript, and Tailwind CSS, I updated the .eslintrc.json file with:
{
"extends": ["next/babel", "next/core-web-vitals"]
}
then ctrl + shift + p and search for ESLint: Restart ESLint Server.
It worked for me by just adding prettier in .eslintrc file.
{
"extends": ["next", "prettier"]
}
Try updating the .eslintrc.json file to
{
"extends": ["next", "prettier","next/core-web-vitals"],
"plugins": ["prettier"]
}
Also install prettier plugin if you don't have it already
npm install eslint-plugin-prettier#latest --save-dev
Don't have to include .babelrc file as it will replace Nextjs SWC compiler
S
I had this same problem - Close the IDE and reopen it with the project folder !!
My Problem
I found this error in project with PNPM, ESLint, and Monorepo architecture using Turborepo.
My Solution
add this into the ESLint config file:
parserOptions: {
babelOptions: {
presets: [require.resolve('next/babel')],
},
},
You can also always try updating React and then Next. I had the same error message then updated them both and now my app is working fine.
Upgrade React version to latest
Most applications already use the latest version of React, with Next.js 11 the minimum React version has been updated to 17.0.2.
To upgrade you can run the following command:
npm install react#latest react-dom#latest
Or using yarn:
yarn add react#latest react-dom#latest
Upgrade Next.js version to latest
To upgrade you can run the following command in the terminal:
npm install next#latest
or
yarn add next#latest
Just had this issue with the Nextjs app and the following worked for me. I no longer have issue with next/babel and I can run yarn lint.
Add prettier to your project
yarn add --dev eslint-config-prettier
Update your eslint config as follows
{
"extends": ["prettier", "next/core-web-vitals"]
}
Add global vscode settings and include your project path
{
"eslint.workingDirectories": ["./your-project"]
}
In my case I had to disable VSCode ESLint extension.
Unfortunately when I added ["next/babel"] in extends, the npm run lint stopped working and Eslint in vscode did not underlining any abnormalities.
ctrl + shift + p
TypeScript: Restart TS server
Really, just adding prettier to "extends": ["next/core-web-vitals] to have something like ==> {"extends": ["next/core-web-vitals", "prettier"]}, gets rid of the error, without having to create an extra .babelrc file. But another research that needs to be done, is to know, if there are any downsides to doing it, and i think the answer is NO
In my project, i just run yarn add #babel/core and run
ctrl + shift + p in vscode, excute ESLint: Restart ESlint Server
ESLint: Restart ESlint Server
it works, and npm run lint works fine too.
> Executing task: yarn run lint <
✔ No ESLint warnings or errors
In my case, the problem is that I added "eslint.packageManager": "yarn" to the setting.json of VSCode before, and I tried to use the same setup within a new project managed with pnpm. After adding "eslint.packageManager": "pnpm" for the new workspace, and reload window, than the issue's gone.
I've tried adding "extends": ["next/babel", "next/core-web-vitals", "prettier"] to .eslintrc.js, it will fix the error only within VSCode, but will cause the other error when building my Next.js app.

Angular ERROR: PostCSS received undefined instead of CSS string

Trying to build an Angular project and I'm getting the errors below. This project built fine last week. I made some changes to other projects that use the Dlls from this project, but no changes to this project. I already spent a lot of time troubleshooting it with no luck and appreciate any help.
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
This can sometimes happen if node-sass was compiled for a different version of Node.js than you're currently running (ie if you've recently changed your Node.js version). You can fix that with:
npm rebuild node-sass
if you are using webpack, and trying to use sass-loader, also add sass
I had this same issue when attempting to test an Angular library, and the issue was I had [``] instead of [] in the styles property of my component metadata.
Wrong
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [``],
Right
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [],
I had similar problem. I was trying to build an angular library and the message below appeared:
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'library-name'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
See "/tmp/ng-itlEgm/angular-errors.log" for further details.
[12:03:38] 'compile' errored after 17 s
[12:03:38] Error: Command `ng build library-name --prod` exited with code 127
at ChildProcess.handleSubShellExit (/node_modules/gulp-run/command.js:166:13)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at ChildProcess.EventEmitter.emit (domain.js:505:15)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
[12:03:38] 'build' errored after 17 s
I was using gulp-run to execute the command ng build library-name --prod. But, executing the command ng build library-name --prod directly on the terminal, the log error was smaller, but similar too.
The problem was in one component. The component had one styleURL (Angular component decorator), like this:
...component.css
but, the library uses scss. So, I changed the path to:
...component.scss
and I executed the command 'ng build library-name --prod'. So, the error didn't appear again.
I was using NVM v0.35.2 (allow to have more than one NodeJS version installed in my machine); NodeJS v12.18.2; Ubuntu x64 18.0.4 LTS and Angular CLI 9.1.9.
I faced the same situation now and the command that helped me is -
npm i node-sass -D
Check the node version, see if the version of node changes cause this problem. I use node version 16.14.2 which occured this error, after switch to 12.16.1 it works well. Just check your node-sass and node version will find a way out.
This can happen due to change in version of node. I had same issue with a NUXT app. What I did was
using yarn, in the root directory of your project, run yarn. But if you're using npm run npm install
start your project again.

import css from node_modules in meteor 1.4 with react

I want to use an npm package, namely react-date-picker in my Meteor 1.4 project using React. The react-date-picker package comes with some css that must be included in order to render correctly. I need to tell meteor to load node_modules/react-date-picker/index.css and include it with the rest of its css, but I'm at a loss on how to do this. Others have suggested that you can simply import the css from within the .jsx component like this
import 'react-date-picker/index.css'
but doing so results in a crashing server that chokes on the first line of the css (as it appears to be parsed as a standard javascript file)
(function (exports, require, module, __filename, __dirname) { .react-date-field {
^
) SyntaxError: Unexpected token .
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Module.Mp.load (/Users/gsferrer/.meteor/packages/babel-compiler/.6.9.1.7f3rvr++os+web.browser+web.cordova/npm/node_modules/reify/node/runtime.js:16:23)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at npmRequire (/Users/gsferrer/Projects/xxx/.meteor/local/build/programs/server/npm-require.js:129:10)
at Module.Mp.useNode (packages/modules-runtime/modules-runtime.js:69:1)
=> Exited with code: 1
=> Your application is crashing. Waiting for file change.
So what is the preferred method to import css from node_modules using Meteor with React?
As you say, it appears to be parsed as JS. However, importing a CSS this way is correct and usually works, so there must be something weird going on... So I'm going to try a wild guess: Try renaming the file from index.css to something else, like react-date-picker.css. It could be that the "index" name is triggering the JS interpretation.
I have been stuck for days on this issue too (I am new to the node.js/Meteor/React/JavaScript world). I needed to import a CSS file in node_modules/react-datagrid/index.css
My working solution (applied to a tiny application that should make it easy to understand; I only display a datagrid using hard-coded data) is available on my GitHub repository (commit 902c92c). The application is called "reactDataGrid", it is a subfolder of the repository, you just need to run "meteor" within that folder.
The key steps in my case were:
npm install webpack --save-dev to install web pack for the project
to create a .babelrc file with the content described here (and copied below). I believe this helps webpack parse the JSX syntax of react.
.babelrc
{
"presets": [
[
"es2015",
{
"modules": false
}
],
"react"
]
}
add require('react-datagrid/index.css') statement inside my client/main.jsx file, that tells webpack to include that CSS file in the dependency tree of my app. This is actually an instruction described in the README of the zippyui/react-datagrid GitHub repository. (Unfortunately stackoverflow limits to two links in my post, so I cannot link it here anymore)
I cannot guarantee that this is the preferred method of doing it, but I can say that it works for me. I hope it helps.
Best,
Kevin

Resources