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. :)
I am very much a novice regarding the Node ecosystem, and my intention is to update my team's React/Typescript app from react-scripts 4.x to 5.x. I'm seeing an error which I don't understand (actually a warning, but CircleCI is failing b/c it's on strict mode) when I execute npx react-app-rewired build --aot --no-watch --no-progress:
static/css/main.109f02ad.css from Css Minimizer plugin
postcss-svgo:: Invalid character in tag name
> 1 | <svg+xmlns="http://www.w3.org/2000/svg"+width="1"+height="1"+viewBox="0+0+1+1"><…
| ^
webpack://./src/app/styles/genome-extraction-datatable.css:1:0
My app does have a styles/genome-extraction-datatable.css but the text svg and xmlns do not appear in it. So this webpack:// file must be generated ... but how?
Also, removing the source CSS file does not resolve the error. It complains about a different CSS file in that case.
Is this enough information to help me get started? Please let me know what additional information would be useful here. I know nothing about webpack.
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?
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.
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