I'm trying import the element ui chalk theme with
import 'element-ui/lib/theme-chalk/index.css'
But I get this in the console:
Error: Module parse failed: Unexpected character '
Am I missing something?
After following this guide I managed to fix this
Basically had to install sass-loader with
npm install sass-loader node-sass style-loader --save-dev
and then add the loader to my webpack.config.js, but I had to do it like this, due to my version:
module: {
rules: [
{ test: /\.s[a|c]ss$/, loader: 'style!css!sass' },
]
}
Related
Question: Why does TypeScript/Nx add dist/packages to my path mappings?
I'm converting my polyrepo project to nx monorepo. In my polyrepo, I have a repo mpg-common with src folder, and all other repos import from it: import { Bla } from 'mpg-common/lib/services/.... I want to preserve this import syntax when moving to monorepo, so in tsconfig.base.json I put compilerOptions: { "paths": { "mpg-common/lib/*": ["packages/mpg-common/src/*"]
However, these imports fail. To debug I set "traceResolution": true, and then I see:
Module name 'mpg-common/lib/inversify.config', matched pattern 'mpg-common/lib/*'.
Trying substitution 'dist/packages/mpg-common/lib/*', candidate module location: 'dist/packages/mpg-common/lib/inversify.config'.
So, question: Why does TypeScript/Nx add these dist/packages to my path mappings?
Turns out my package.json had "name": "mpg-common", which caused nx to auto-map mpg-common => dist/packages/mpg-common, which is taken from packages/mpg-common/project.json => targets/build/options/outputPath.
So, solution: change in package.json to "name": "#myworkspace/mpg-common"
When running ng serve I have this result:
*./src/main.ts - Error: Module build failed
(from./node_modules/#ngtools/webpack/src/ivy/index.js)
../.component.scss:17:100: ERROR: Unterminated string token
*./src/polyfills.ts` - Error: Module build failed
(from./node_modules/#ngtools/webpack/src/ivy/index.js)
../.component.scss:17:100: ERROR: Unterminated string token
This angular version
Angular CLI: 14.0.6
Node: 16.16.0
Package Manager: NPM 8.14.0
OS: win32 x64
Angular: 14.0.6
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1400.6
#angular-devkit/build-angular 14.0.6
#angular-devkit/core 14.0.6
#angular-devkit/schematics 14.0.6
`#angular/cdk 14.0.5`
#angular/material 14.0.5
#nguniversal/express-engine 7.1.1
#schematics/angular 14.0.6
`rxjs 6.6.7`
typescript 4.6.4
/.component.scss
input[type=text]:disabled {
color: black;
}
.search-row {
.form-group > label {
font-size: 1.1em !important;
color: black;
}
}
.mat-table {
th.mat-header-cell {
font-size: 1.1em !important;
color: black;
}
}//<< here line 17.
#block {
margin: 0% 10%;
}
...
thank you for your help
For anyone landing there, temporarily set optimization: false in your angular.json file. The will allow to see the real error.
In my case it was an unsupported stylesheet import. But it can be any error thrown by Webpack sass-loader.
I added the "path/name" of the scss files in angular.json->projects->project name ->architect->build->options->styles as following then I could find the exact scss issues.
{
...
"projects": {
...
"my-project": {
...
"architect": {
"build": {
...
"options": {
...
"styles": [
...
"src/scss/style.scss",
"src/app/components/playlistDetail/playlist-detail.component.scss",
...
]
}
},
Then I could see Sass error as following.
./src/app/components/items/viewitem/viewitem.component.ts - Error: Module build failed (from ./node_modules/#ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
E:/f2022_indy/front/src/app/components/fan/fan.component.scss:17:100: ERROR: Unterminated string token
./src/app/components/fan/fan.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected whitespace.
╷
89 │ #media screen and(max-width: 767px) {
│ ^
╵
src\app\components\fan\fan.component.scss 89:26 root stylesheet
Run the following command
npx browserslist --update-db
For anyone that still has this issue, you can set optimization: false in your angular.json file and rebuild to see the real error with details and then put optimization: true back.
for me the error was that i had an $dark-color variable that is undefined.
I upgraded angular project from 5.2 to 14, I saw this error and its not displayed from which file the error came from.
I tried optimization: false in angular.json file but it did not work since upgrade converted .angular-cli.json to angular.json and json structure seems to be wrong.
I created a new sample project with angular and moved angular.json file from there to upgraded project folder, then changed optimization: false
This time errors shown are specific with line and file name. I resolved those errors in project css files and able to do ng serve
I have a Nextjs app using jest and react-testing-library for the test, I add the .eslintrc file with npx .eslintrc --init command to my project.
whenever I lint my project, I get the following error:
.eslintrc.js:
module.exports = {
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
"next",
"next/core-web-vitals"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project":"./tsconfig.json",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
}
};
and error:
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Error: Failed to load config "next" to extend from.
Referenced from: D:\web\reactjs\react-testing\react-testing-app\.eslintrc.js
Resolved, after installing this package, the code will run without error:
npm i --save-dev eslint-config-next
For a misterious reason running npm audit fix --force changed my package.json from:
"eslint-config-next": "12.0.1"
to:
"eslint-config-next": "^0.2.4"
I had to change it manually and the error went away.
I am using tailwindcss with postcss8 (it comes with tailwind) and there is a problem trying to parse a css from a node_modules package.
is there a way to exclude these css files from being processed by postcss?
this is the error I get:
ERROR in ./node_modules/#fullcalendar/common/main.css (./node_modules/#nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/#fullcalendar/common/main.css)
Module build failed (from ./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 45
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#fullcalendar/common/main.css:633:3
at Parser.error (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:72:18
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:55:18
at Rule.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Rule.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:60:24
at Root.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Root.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at Root.walkDecls (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:70:19)
at transformProperties (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:330:8)
# ./node_modules/#fullcalendar/common/main.css 4:14-191
# ./node_modules/#fullcalendar/common/main.js
# ./node_modules/#fullcalendar/timegrid/main.js
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/#nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/global/Schedule.vue?vue&type=script&lang=js&
# ./components/global/Schedule.vue?vue&type=script&lang=js&
# ./components/global/Schedule.vue
# ./node_modules/.cache/nuxt/components/index.js
# ./node_modules/.cache/nuxt/components/plugin.js
# ./node_modules/.cache/nuxt/index.js
# ./node_modules/.cache/nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js
I also had this issue. However, this is how I solve it.
Add the following to your nuxt.config.js file.
build: {
postcss: {
plugins: {
/**
* do not remove the cssnano key.
* (https://github.com/fullcalendar/fullcalendar/issues/5503)
*/
cssnano: {
preset: [
'default',
{
calc: false,
},
],
},
},
},
transpile: [
/#fullcalendar.*/, // always need for fullcalenar
],
},
To learn more about it, read this processing css with postcss, calc/var problems.
I hope this helps you. If you have solved this, please share your solution so that the community can learn from it.
I started learning webpack. I am aware that webpack4 doesnt require a configuration explicitly. I created one for my project. On every build i see it picking up default config.
below is my package.json
{
"name": "feedback-clientlibs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "hkesani",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.5.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
and my webpack.config.js is as follows
var path = require('path');
module.export ={
entry : './js/feedback.js',
mode:'none',
output : {
filename:'feedback.js',
path:path.resolve(__dirname,'webpack.modules')
},
module:{
rules:[
{
test:/\.css$/,
use:['css-loader']
}
]
}
}
I have few css imports into the js files as below
import '../css/feedback.css'
import '../css/all.css'
whenever i run a build (i have cssloader installed) below is what i see
$ npm run build
> feedback-clientlibs#1.0.0 build C:\projects\br_translation\jcr\code\jcr_root\apps\r\dcloud\components\clientlibs\feedback-clientlibs
> webpack
Hash: 7c51d9af54f992c3e551
Version: webpack 4.43.0
Time: 106ms
Built at: 05/10/2020 10:39:42 PM
1 asset
Entrypoint main = main.js
[0] ./src/index.js 6.17 KiB {0} [built]
[1] ./css/feedback.css 302 bytes {0} [built] [failed] [1 error]
[2] ./css/all.css 292 bytes {0} [built] [failed] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in ./css/feedback.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. See https://webpack.js.org/concepts#loaders
> #feedback {
| height: 5em;
| padding: 10px 22px 8px 22px;
# ./src/index.js 1:0-28
ERROR in ./css/all.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .ratings-stars {
| margin-bottom: 15px;
| height: 13px;
# ./src/index.js 2:0-23
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! feedback-clientlibs#1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the feedback-clientlibs#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hkesani\AppData\Roaming\npm-cache\_logs\2020-05-10T17_09_42_363Z-debug.log
Any help is appreciated.
Thanks
Have you tried it with style-loader?
npm install --save-dev style-loader
And update your webpack.config.js rules to:
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
I also notice you did not supply a production flag for your webpack command I would update that script to run:
webpack --mode production -p
Then in your output path try a directory name without the period. This may or may not be the reason but it is normally a naming convention to use a dash or underscore for directory names.
path: path.resolve(__dirname,'webpack_modules')
I think it's defined [here]enter link description here.
It can also be inspected via node:
const webpack = require('webpack')
new webpack.WebpackOptionsDefaulter()