CSS is a styling language used to beautify a web page.With CSS, a developer can make their website more attractive, user friendly. Try our curated libraries for different functionalities of CSS.
Popular New Releases in CSS
animate.css
v4.1.1
bulma
0.9.3
nerd-fonts
v2.2.0-RC: Workflow for building release candidate (WIP)
source-code-pro
Roman fonts version 2.038, Italic fonts version 1.058 and VAR fonts version 1.018 (OTF, TTF, WOFF, WOFF2)
pace
Version 1.2.4
Popular Libraries in CSS
animate.css
by animate-css 
css
74293 NOASSERTION
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
normalize.css
by necolas css
45168 MIT
A modern alternative to CSS resets
bulma
by jgthms css
45040 MIT
Modern CSS framework based on Flexbox
freecodecamp.cn
by FreeCodeCampChina css
36627 NOASSERTION
FCC China open source codebase and curriculum. Learn to code and help nonprofits.
nerd-fonts
by ryanoasis css
33737 NOASSERTION
Iconic font aggregator, collection, & patcher. 3,600+ icons, 50+ patched fonts: Hack, Source Code Pro, more. Glyph collections: Font Awesome, Material Design Icons, Octicons, & more
hangzhou_house_knowledge
by houshanren css
25626
2017年买房经历总结出来的买房购房知识分享给大家，希望对大家有所帮助。买房不易，且买且珍惜。Sharing the knowledge of buy an own house that according to the experience at hangzhou in 2017 to all the people. It's not easy to buy a own house, so I hope that it would be useful to everyone.
Hover
by IanLunn css
25251 NOASSERTION
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
the-swift-programming-language-in-chinese
by SwiftGGTeam css
20203
中文版 Apple 官方 Swift 教程《The Swift Programming Language》
Skeleton
by dhg css
18379 MIT
Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development
Trending New libraries in CSS
50projects50days
by bradtraversy css
8907
50+ mini web projects using HTML, CSS & JS
scaffold-eth
by scaffold-eth css
6612 MIT
🏗 forkable Ethereum dev stack focused on fast product iterations
98.css
by jdan css
5958 MIT
A design system for building faithful recreations of old UIs
windows11
by blueedgetechno css
4719 CC0-1.0
windows 11 in React 💻🌈⚡
Firefox-UI-Fix
by black7375 css
3745 MPL-2.0
🦊 I respect proton UI and aim to improve it.
macOS_Big_Sur_icons_replacements
by elrumo css
3663 GPL-3.0
Replacement icons for popular apps in the style of macOS Big Sur
the-economist-ebooks
by hehonghui css
3629
经济学人(含音频)、纽约客、自然、新科学人、卫报、科学美国人、连线、大西洋月刊、新闻周刊、国家地理等英语杂志免费下载、订阅(kindle推送),支持epub、mobi、pdf格式, 每周更新. The Economist 、The New Yorker 、Nature、The Atlantic 、New Scientist、The Guardian、Scientific American、Wired、Newsweek magazines, free download and subscription for kindle, mobi、epub、pdf format.
missing-semester-cn.github.io
by missing-semester-cn css
3443 NOASSERTION
the CS missing semester Chinese version
handcalcs
by connorferster css
3266 Apache-2.0
Python library for converting Python calculations into rendered latex.
Top Authors in CSS
1
827 Libraries
1
2
627 Libraries
0
3
585 Libraries
5
4
419 Libraries
0
5
290 Libraries
1
6
208 Libraries
0
7
199 Libraries
0
8
198 Libraries
10
9
181 Libraries
288
10
171 Libraries
12644
1
827 Libraries
1
2
627 Libraries
0
3
585 Libraries
5
4
419 Libraries
0
5
290 Libraries
1
6
208 Libraries
0
7
199 Libraries
0
8
198 Libraries
10
9
181 Libraries
288
10
171 Libraries
12644
Trending Kits in CSS
Here are some famous Vue Icons Libraries. Some of the Vue Icons Libraries' use cases include App Navigation, Dashboard Design, Data Visualization, UI/UX Design, and Iconography.
Vue icons libraries are collections of icons that can be used in Vue.js applications. These libraries typically include a variety of icons that can be used to represent various actions, elements, or concepts within an application. They can be used to enhance the user experience by providing visual cues that help guide the user through the application.
Let us have a look at these libraries in detail below.
feather
- Designed to be modern, minimalistic, and lightweight.
- Built with SVG, meaning they can be scaled up and down without losing any quality.
- Icons are available in both SVG and web fonts, making them easy to use in a variety of projects.
ionicons
- Created using vector graphics, meaning they scale well for responsive applications.
- Accessible and WCAG 2.0 compliant, making them suitable for all types of web applications.
- Designed for customization, allowing developers to change colors, sizes, and shapes of the icons.
flag-icons
- Offers an extensive selection of flags from around the world in a variety of styles and sizes.
- Includes alternative versions of some flags, such as a “defaced” version of the flag of the United States.
- Includes a selection of generic icons, such as arrows and checkmarks, that can be used as additional visual indicators.
octicons
- Specifically designed for GitHub, giving them a unique style that fits perfectly with the GitHub user interface.
- Optimized for performance, ensuring that they won't slow down your website or application.
- Completely open-source, with the source code available on GitHub.
devicon
- Specifically designed for use in web development.
- Icons are vector-based, meaning they look great at any size and can be easily scaled.
- Updated regularly with new icons, so developers can keep up with the latest technology trends.
weather-icons
- Unified set of symbols and icons for conveying weather conditions and phenomena.
- Designed to be responsive, so it can scale to fit any screen size or device.
- Icons for both the current and forecasted conditions, providing a comprehensive picture of the weather at a glance.
open-iconic
- Only open source Vue icons library that offers a full suite of accessibility features.
- One of the few Vue icons libraries that has a fully-documented API.
- Provides a lightweight, fast, and reliable icon library that can be integrated into any project.
linearicons
- Offers a searchable library of icons for quick access.
- Icons are designed to be intuitive and easy to use.
- Compatible with a wide range of frameworks, including Vue.js.
The CSS framework is a pre-prepared library that acts as a foundation for building. It consists of a set of predefined, reusable code snippets, styles, and components.
The developers can leverage it to streamline the design and development. CSS frameworks are particularly useful for creating responsive and aesthetically pleasing user interfaces.
Benefits of Using CSS Frameworks:
- Rapid Development: CSS frameworks provide a set of pre-built components and styles. This reduces the need to write repetitive code and speeds up the development.
- Consistency: The Frameworks ensure a consistent design language across a website. It promotes a cohesive and professional appearance.
- Responsive Design: Frameworks include grid systems and responsive utilities. This facilitates the creation of layouts. It adapts seamlessly to a variety of screen sizes and devices.
- Cross-Browser Compatibility: Frameworks often come with tested styles. It minimizes the risk of compatibility issues.
- Documentation and Community Support: Comprehensive documentation and a supportive community make it easier. It troubleshoots issues and stays up to date with best practices.
- Time Efficiency: By leveraging pre-built styles and components. The developers can save time and meet project deadlines more efficiently.
- Scalability: Frameworks are scalable. It allows easy expansion and modification of the codebase as the project evolves.
In conclusion, the use of CSS frameworks is paramount in streamlining the web process. The adopting a CSS framework, developers can harness a wealth of pre-built styles. This not only expedites project timelines but also promotes code consistency. CSS frameworks provide a standardized design language, ensuring a cohesive visual identity. This not only enhances the professionalism of the website but also simplifies it.
bootstrap
- Bootstrap is a popular open-source front-end framework developed by Twitter.
- It is a compilation of HTML, CSS, and JavaScript components that simplifies the process.
- Bootstrap uses a responsive grid system that allows you to create layouts with rows.
basscss
- Basscss is a lightweight and modular CSS toolkit. It provides a set of low-level utilities.
- Basscss includes responsive typography and layout classes, making it easy to create designs.
- Basscss is a standalone toolkit and doesn't rely on dependencies
tachyons
- Tachyons is a functional CSS framework that follows a similar philosophy to Basscss.
- It's designed to be a fast and efficient way to build user interfaces with a focus on simplicity.
- Tachyons provides a set of low-level utility classes that you can apply directly to HTML
Semantic-UI
- Semantic UI is a user interface framework that uses human-friendly HTML to create it.
- It aims to provide a clean and intuitive syntax for designing UI elements and layouts.
- Semantic UI utilizes semantic HTML elements and class names to describe the content.
material-ui
- Material-UI is a popular React UI framework that implements Google's Material Design guidelines.
- Material-UI includes a comprehensive set of pre-designed React components that adhere to Google's.
- Material-UI provides a theming system. It allows you to customize the look and feel of an application.
foundation-sites
- Foundation is a responsive front-end framework. It provides a collection of HTML and CSS.
- The foundation is popular for its flexibility, mobile-first approach, and robust grid system.
- Foundation includes a powerful grid system that allows you to create responsive.
ant-design
- Ant Design is a renowned design system and React UI library that provides high-quality Reacts.
- Ant Design is a popular React UI library and design system developed by the team at Ant Group.
- Ant Design offers a comprehensive set of React components for building common users.
pure
- Pure CSS is a combination of small, responsive CSS modules that helps in every web project.
- It has a minimal footprint and supports native HTML elements and UI components.
- Pure builds on Normalize.css and provides layout and styling for HTML elements.
bulma
- Bulma is a modern CSS framework based on Flexbox.
- It provides a set of pre-designed CSS classes and components to help you quickly build it.
- Bulma is a lightweight framework that is easy to use and highly customizable.
Skeleton
- Skeleton is a minimal and responsive CSS framework that provides a lightweight.
- Skeleton includes a simple and flexible 12-column grid system.
- This grid system makes it easy to create responsive layouts for various screen sizes.
unocss
- UnoCSS is a modern CSS engine that provides the core functionalities of the CSS process.
- It is flexible, extensible, and lightweight, with zero dependencies.
- It is an atomic CSS engine providing functionalities via presets and developers.
milligram
- Milligram is a minimalist CSS framework that provides a simple and clean set of styles.
- Milligram follows a minimalistic design philosophy, providing only the essential styles.
- Milligram includes a responsive grid system that allows you to create flexibly.
spectre
- Spectre.css is a lightweight and responsive CSS framework. It helps in building modern CSS styles.
- It is easy to use, flexible, and minimalistic.
- Spectre provides a set of basic styles for common HTML elements.
FAQ
1. What are the best free and open-source CSS frameworks for web development?
There are several excellent free and open-source CSS frameworks available for web development.
- Bootstrap
- Foundation
- Bulma
- Tailwind CSS
- Semantic UI
- Materialize CSS
2. How do I choose a responsive and modern CSS framework?
Choosing a responsive and modern CSS framework depends on various factors. It includes project requirements, development preferences, and design goals.
- Project Requirements
- Design Aesthetic
- Development Workflow
- Performance
- Community and Documentation
- Browser Compatibility
- Flexibility and Extensibility
- Testing
3. How important is Material Design when choosing a CSS framework?
The importance of Material Design when choosing a CSS framework depends on factors. It includes the project's goals, target audience, and design preferences. Material Design is a language developed by Google. That emphasizes a clean, modern, and consistent visual style across different platforms.
4. What role does a CSS framework play in creating web interfaces?
A CSS framework plays a crucial role in creating web interfaces. It provides a structured, efficient foundation for designing and styling websites.
- Consistent Styling
- Responsive Design
- Pre-Built Components
- Efficient Prototyping
- Cross-Browser Compatibility
- Ease of Maintenance
- Documentation and Support
- Scalability
- Time Efficiency
- Flexibility and Customization
5. What advantages does the Bootstrap CSS framework offer over other options?
Bootstrap is one of the most used CSS frameworks. It offers numerous advantages that contribute to its popularity.
- Comprehensive Set of Components
- Responsive Grid System
- Customizable Design
- Browser Compatibility
- Documentation
- JavaScript Components
- Fast Prototyping
- Theming Support
- Widely Adopted and Tested
Weather forecasts are the need of the hour. There is a wide variety of end-users for weather updates. Weather warnings are important because they protect life and property. Weather forecasts based on temperature and precipitation are essential to agriculture and traders within commodity markets. Utility companies use temperature forecasts to estimate demand over the future. Daily, many use weather forecasts to determine what to wear on a given day. Since outdoor activities are severely affected by heavy rain, snow, and wind chill, these warnings can help plan these events and survive them. Listed below are some libraries that can be used to build a weather forecast system.
Trending Discussions on CSS
Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences
ESlint - Error: Must use import to load ES Module
Create-React-App creates this <iframe> that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor
Switch' is not exported from 'react-router-dom'
Type Error: this.getOptions is not a function For style-loader
Module not found: Can't resolve 'swiper/css'
My project doesn't compile with optimization parameters after upgrading from angular 11 to angular 12
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in the package.json of a module in node_modules
Data path "" must NOT have additional properties(extractCss) in Angular 13 while upgrading project
Tailwind V3 causing TypeError: Cannot read property '500' of undefined
QUESTION
Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences
Asked 2022-Mar-30 at 02:44I have a navbar that is rendered in every route while the route changes on click.
./components/navbar.jsx
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49./components/experiences.jsx
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64index.js
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64import React from 'react';
65import ReactDOM from 'react-dom';
66import './index.css';
67import reportWebVitals from './reportWebVitals';
68import Navbar from './components/Navbar';
69import Home from './components/Home';
70import Experiences from './components/experience';
71
72import {
73 BrowserRouter as Router,
74 Routes,
75 Route
76} from 'react-router-dom';
77
78
79
80ReactDOM.render(
81
82 <React.StrictMode>
83
84 <Navbar />
85
86 <Router>
87
88 <Routes>
89 <Route path="/" element={<Home />} />
90 <Route path="/experiences" element={<Experiences />} />
91 </Routes>
92
93 </Router>
94
95 </React.StrictMode>,
96
97 document.getElementById('root')
98);
99
100
101reportWebVitals();
102The error doesn't come when I remove the <Link> from the experiences tag in navbar.
There is a similar question posted here: Error: useHref() may be used only in the context of a <Router> component
but doesn't help.
I'm using react router v6
ANSWER
Answered 2022-Feb-09 at 23:28Issue
You are rendering the navbar outside the routing context. The Router isn't aware of what routes the links are attempting to link to that it is managing. The reason routing works when directly navigating to "/experiences" is because the Router is aware of the URL when the app mounts.
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64import React from 'react';
65import ReactDOM from 'react-dom';
66import './index.css';
67import reportWebVitals from './reportWebVitals';
68import Navbar from './components/Navbar';
69import Home from './components/Home';
70import Experiences from './components/experience';
71
72import {
73 BrowserRouter as Router,
74 Routes,
75 Route
76} from 'react-router-dom';
77
78
79
80ReactDOM.render(
81
82 <React.StrictMode>
83
84 <Navbar />
85
86 <Router>
87
88 <Routes>
89 <Route path="/" element={<Home />} />
90 <Route path="/experiences" element={<Experiences />} />
91 </Routes>
92
93 </Router>
94
95 </React.StrictMode>,
96
97 document.getElementById('root')
98);
99
100
101reportWebVitals();
102<Navbar /> // <-- outside router!!
103
104<Router>
105 <Routes>
106 <Route path="/" element={<Home />} />
107 <Route path="/experiences" element={<Experiences />} />
108 </Routes>
109</Router>
110
Solution
Move it inside the routing context so the Router is aware and can manage routing correctly.
1import React, { Component } from 'react';
2import '../App.css';
3import { Link } from 'react-router-dom';
4
5
6
7class Navbar extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {};
11 }
12 render() {
13 return (
14 <div id = 'navbar'>
15
16 <div className='name-head'>
17 My Name
18 </div>
19
20
21 <div id = 'nav-links-container'>
22
23 <Link to='/experiences'>
24 <div className = 'nav-links'>
25 Experiences
26 </div>
27 </Link>
28
29 <div className = 'nav-links'>
30 Projects
31 </div>
32
33 <div className = 'nav-links'>
34 Skills
35 </div>
36
37 <div className = 'nav-links'>
38 Resume
39 </div>
40
41 </div>
42
43 </div>
44 );
45 }
46}
47
48export default Navbar;
49import React, { Component } from 'react';
50
51
52class Experiences extends Component {
53
54 render() {
55 return (
56 <div>
57 <h1>hi</h1>
58 </div>
59 );
60 }
61}
62
63export default Experiences;
64import React from 'react';
65import ReactDOM from 'react-dom';
66import './index.css';
67import reportWebVitals from './reportWebVitals';
68import Navbar from './components/Navbar';
69import Home from './components/Home';
70import Experiences from './components/experience';
71
72import {
73 BrowserRouter as Router,
74 Routes,
75 Route
76} from 'react-router-dom';
77
78
79
80ReactDOM.render(
81
82 <React.StrictMode>
83
84 <Navbar />
85
86 <Router>
87
88 <Routes>
89 <Route path="/" element={<Home />} />
90 <Route path="/experiences" element={<Experiences />} />
91 </Routes>
92
93 </Router>
94
95 </React.StrictMode>,
96
97 document.getElementById('root')
98);
99
100
101reportWebVitals();
102<Navbar /> // <-- outside router!!
103
104<Router>
105 <Routes>
106 <Route path="/" element={<Home />} />
107 <Route path="/experiences" element={<Experiences />} />
108 </Routes>
109</Router>
110<Router>
111 <Navbar />
112 <Routes>
113 <Route path="/" element={<Home />} />
114 <Route path="/experiences" element={<Experiences />} />
115 </Routes>
116</Router>
117QUESTION
ESlint - Error: Must use import to load ES Module
Asked 2022-Mar-17 at 12:13I am currently setting up a boilerplate with React, Typescript, styled components, webpack etc. and I am getting an error when trying to run eslint:
Error: Must use import to load ES Module
Here is a more verbose version of the error:
1/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
2 0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
3require() of ES modules is not supported.
4require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
5Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
6The error occurs in every single one of my .js and .ts/ .tsx files where I only use import or the file doesn't even have an import at all. I understand what the error is saying but I have no idea why it is being thrown when in fact I only use imports or even no imports at all in some files.
Here is my package.json where I trigger the linter from using npm run lint:eslint:quiet:
1/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
2 0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
3require() of ES modules is not supported.
4require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
5Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
6{
7 "name": "my-react-boilerplate",
8 "version": "1.0.0",
9 "description": "",
10 "main": "index.tsx",
11 "directories": {
12 "test": "test"
13 },
14 "engines": {
15 "node": ">=14.0.0"
16 },
17 "type": "module",
18 "scripts": {
19 "build": "webpack --config webpack.prod.js",
20 "dev": "webpack serve --config webpack.dev.js",
21 "lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet",
22 "lint:css": "stylelint './src/**/*.{js,ts,tsx}'",
23 "lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet",
24 "lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern",
25 "lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet --fix",
26 "test": "cross-env NODE_ENV=test jest --coverage",
27 "test:watch": "cross-env NODE_ENV=test jest --watchAll",
28 "typecheck": "tsc --noEmit",
29 "precommit": "npm run lint"
30 },
31 "lint-staged": {
32 "*.{ts,tsx,js,jsx}": [
33 "npm run lint:eslint:fix",
34 "git add --force"
35 ],
36 "*.{md,json}": [
37 "prettier --write",
38 "git add --force"
39 ]
40 },
41 "husky": {
42 "hooks": {
43 "pre-commit": "npx lint-staged && npm run typecheck"
44 }
45 },
46 "resolutions": {
47 "styled-components": "^5"
48 },
49 "author": "",
50 "license": "ISC",
51 "devDependencies": {
52 "@babel/core": "^7.5.4",
53 "@babel/plugin-proposal-class-properties": "^7.5.0",
54 "@babel/preset-env": "^7.5.4",
55 "@babel/preset-react": "^7.0.0",
56 "@types/history": "^4.7.6",
57 "@types/react": "^17.0.29",
58 "@types/react-dom": "^17.0.9",
59 "@types/react-router": "^5.1.17",
60 "@types/react-router-dom": "^5.1.5",
61 "@types/styled-components": "^5.1.15",
62 "@typescript-eslint/eslint-plugin": "^5.0.0",
63 "babel-cli": "^6.26.0",
64 "babel-eslint": "^10.0.2",
65 "babel-loader": "^8.0.0-beta.6",
66 "babel-polyfill": "^6.26.0",
67 "babel-preset-env": "^1.7.0",
68 "babel-preset-react": "^6.24.1",
69 "babel-preset-stage-2": "^6.24.1",
70 "clean-webpack-plugin": "^4.0.0",
71 "dotenv-webpack": "^7.0.3",
72 "error-overlay-webpack-plugin": "^1.0.0",
73 "eslint": "^8.0.0",
74 "eslint-config-airbnb": "^18.2.0",
75 "eslint-config-prettier": "^8.3.0",
76 "eslint-config-with-prettier": "^6.0.0",
77 "eslint-plugin-compat": "^3.3.0",
78 "eslint-plugin-import": "^2.25.2",
79 "eslint-plugin-jsx-a11y": "^6.2.3",
80 "eslint-plugin-prettier": "^4.0.0",
81 "eslint-plugin-react": "^7.14.2",
82 "eslint-plugin-react-hooks": "^4.2.0",
83 "extract-text-webpack-plugin": "^3.0.2",
84 "file-loader": "^6.2.0",
85 "html-webpack-plugin": "^5.3.2",
86 "husky": "^7.0.2",
87 "prettier": "^2.4.1",
88 "raw-loader": "^4.0.2",
89 "style-loader": "^3.3.0",
90 "stylelint": "^13.13.1",
91 "stylelint-config-recommended": "^5.0.0",
92 "stylelint-config-styled-components": "^0.1.1",
93 "stylelint-processor-styled-components": "^1.10.0",
94 "ts-loader": "^9.2.6",
95 "tslint": "^6.1.3",
96 "typescript": "^4.4.4",
97 "url-loader": "^4.1.1",
98 "webpack": "^5.58.2",
99 "webpack-cli": "^4.2.0",
100 "webpack-dev-server": "^4.3.1",
101 "webpack-merge": "^5.3.0"
102 },
103 "dependencies": {
104 "history": "^4.10.0",
105 "process": "^0.11.10",
106 "react": "^17.0.1",
107 "react-dom": "^17.0.1",
108 "react-router-dom": "^5.2.0",
109 "styled-components": "^5.2.1"
110 }
111}
112Here is my .eslintrc file:
1/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
2 0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
3require() of ES modules is not supported.
4require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
5Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
6{
7 "name": "my-react-boilerplate",
8 "version": "1.0.0",
9 "description": "",
10 "main": "index.tsx",
11 "directories": {
12 "test": "test"
13 },
14 "engines": {
15 "node": ">=14.0.0"
16 },
17 "type": "module",
18 "scripts": {
19 "build": "webpack --config webpack.prod.js",
20 "dev": "webpack serve --config webpack.dev.js",
21 "lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet",
22 "lint:css": "stylelint './src/**/*.{js,ts,tsx}'",
23 "lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet",
24 "lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern",
25 "lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet --fix",
26 "test": "cross-env NODE_ENV=test jest --coverage",
27 "test:watch": "cross-env NODE_ENV=test jest --watchAll",
28 "typecheck": "tsc --noEmit",
29 "precommit": "npm run lint"
30 },
31 "lint-staged": {
32 "*.{ts,tsx,js,jsx}": [
33 "npm run lint:eslint:fix",
34 "git add --force"
35 ],
36 "*.{md,json}": [
37 "prettier --write",
38 "git add --force"
39 ]
40 },
41 "husky": {
42 "hooks": {
43 "pre-commit": "npx lint-staged && npm run typecheck"
44 }
45 },
46 "resolutions": {
47 "styled-components": "^5"
48 },
49 "author": "",
50 "license": "ISC",
51 "devDependencies": {
52 "@babel/core": "^7.5.4",
53 "@babel/plugin-proposal-class-properties": "^7.5.0",
54 "@babel/preset-env": "^7.5.4",
55 "@babel/preset-react": "^7.0.0",
56 "@types/history": "^4.7.6",
57 "@types/react": "^17.0.29",
58 "@types/react-dom": "^17.0.9",
59 "@types/react-router": "^5.1.17",
60 "@types/react-router-dom": "^5.1.5",
61 "@types/styled-components": "^5.1.15",
62 "@typescript-eslint/eslint-plugin": "^5.0.0",
63 "babel-cli": "^6.26.0",
64 "babel-eslint": "^10.0.2",
65 "babel-loader": "^8.0.0-beta.6",
66 "babel-polyfill": "^6.26.0",
67 "babel-preset-env": "^1.7.0",
68 "babel-preset-react": "^6.24.1",
69 "babel-preset-stage-2": "^6.24.1",
70 "clean-webpack-plugin": "^4.0.0",
71 "dotenv-webpack": "^7.0.3",
72 "error-overlay-webpack-plugin": "^1.0.0",
73 "eslint": "^8.0.0",
74 "eslint-config-airbnb": "^18.2.0",
75 "eslint-config-prettier": "^8.3.0",
76 "eslint-config-with-prettier": "^6.0.0",
77 "eslint-plugin-compat": "^3.3.0",
78 "eslint-plugin-import": "^2.25.2",
79 "eslint-plugin-jsx-a11y": "^6.2.3",
80 "eslint-plugin-prettier": "^4.0.0",
81 "eslint-plugin-react": "^7.14.2",
82 "eslint-plugin-react-hooks": "^4.2.0",
83 "extract-text-webpack-plugin": "^3.0.2",
84 "file-loader": "^6.2.0",
85 "html-webpack-plugin": "^5.3.2",
86 "husky": "^7.0.2",
87 "prettier": "^2.4.1",
88 "raw-loader": "^4.0.2",
89 "style-loader": "^3.3.0",
90 "stylelint": "^13.13.1",
91 "stylelint-config-recommended": "^5.0.0",
92 "stylelint-config-styled-components": "^0.1.1",
93 "stylelint-processor-styled-components": "^1.10.0",
94 "ts-loader": "^9.2.6",
95 "tslint": "^6.1.3",
96 "typescript": "^4.4.4",
97 "url-loader": "^4.1.1",
98 "webpack": "^5.58.2",
99 "webpack-cli": "^4.2.0",
100 "webpack-dev-server": "^4.3.1",
101 "webpack-merge": "^5.3.0"
102 },
103 "dependencies": {
104 "history": "^4.10.0",
105 "process": "^0.11.10",
106 "react": "^17.0.1",
107 "react-dom": "^17.0.1",
108 "react-router-dom": "^5.2.0",
109 "styled-components": "^5.2.1"
110 }
111}
112{
113 "extends": ["airbnb", "prettier"],
114 "parser": "babel-eslint",
115 "plugins": ["prettier", "@typescript-eslint"],
116 "parserOptions": {
117 "ecmaVersion": 8,
118 "ecmaFeatures": {
119 "experimentalObjectRestSpread": true,
120 "impliedStrict": true,
121 "classes": true
122 }
123 },
124 "env": {
125 "browser": true,
126 "node": true,
127 "jest": true
128 },
129 "rules": {
130 "arrow-body-style": ["error", "as-needed"],
131 "class-methods-use-this": 0,
132 "react/jsx-filename-extension": 0,
133 "global-require": 0,
134 "react/destructuring-assignment": 0,
135 "import/named": 2,
136 "linebreak-style": 0,
137 "import/no-dynamic-require": 0,
138 "import/no-named-as-default": 0,
139 "import/no-unresolved": 2,
140 "import/prefer-default-export": 0,
141 "semi": [2, "always"],
142 "max-len": [
143 "error",
144 {
145 "code": 80,
146 "ignoreUrls": true,
147 "ignoreComments": true,
148 "ignoreStrings": true,
149 "ignoreTemplateLiterals": true
150 }
151 ],
152 "new-cap": [
153 2,
154 {
155 "capIsNew": false,
156 "newIsCap": true
157 }
158 ],
159 "no-param-reassign": 0,
160 "no-shadow": 0,
161 "no-tabs": 2,
162 "no-underscore-dangle": 0,
163 "react/forbid-prop-types": [
164 "error",
165 {
166 "forbid": ["any"]
167 }
168 ],
169 "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
170 "react/jsx-no-bind": [
171 "error",
172 {
173 "ignoreRefs": true,
174 "allowArrowFunctions": true,
175 "allowBind": false
176 }
177 ],
178 "react/no-unknown-property": [
179 2,
180 {
181 "ignore": ["itemscope", "itemtype", "itemprop"]
182 }
183 ]
184 }
185}
186And i'm not sure if relevant but also my tsconfig.eslint.json file:
1/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
2 0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
3require() of ES modules is not supported.
4require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
5Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
6{
7 "name": "my-react-boilerplate",
8 "version": "1.0.0",
9 "description": "",
10 "main": "index.tsx",
11 "directories": {
12 "test": "test"
13 },
14 "engines": {
15 "node": ">=14.0.0"
16 },
17 "type": "module",
18 "scripts": {
19 "build": "webpack --config webpack.prod.js",
20 "dev": "webpack serve --config webpack.dev.js",
21 "lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet",
22 "lint:css": "stylelint './src/**/*.{js,ts,tsx}'",
23 "lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet",
24 "lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern",
25 "lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet --fix",
26 "test": "cross-env NODE_ENV=test jest --coverage",
27 "test:watch": "cross-env NODE_ENV=test jest --watchAll",
28 "typecheck": "tsc --noEmit",
29 "precommit": "npm run lint"
30 },
31 "lint-staged": {
32 "*.{ts,tsx,js,jsx}": [
33 "npm run lint:eslint:fix",
34 "git add --force"
35 ],
36 "*.{md,json}": [
37 "prettier --write",
38 "git add --force"
39 ]
40 },
41 "husky": {
42 "hooks": {
43 "pre-commit": "npx lint-staged && npm run typecheck"
44 }
45 },
46 "resolutions": {
47 "styled-components": "^5"
48 },
49 "author": "",
50 "license": "ISC",
51 "devDependencies": {
52 "@babel/core": "^7.5.4",
53 "@babel/plugin-proposal-class-properties": "^7.5.0",
54 "@babel/preset-env": "^7.5.4",
55 "@babel/preset-react": "^7.0.0",
56 "@types/history": "^4.7.6",
57 "@types/react": "^17.0.29",
58 "@types/react-dom": "^17.0.9",
59 "@types/react-router": "^5.1.17",
60 "@types/react-router-dom": "^5.1.5",
61 "@types/styled-components": "^5.1.15",
62 "@typescript-eslint/eslint-plugin": "^5.0.0",
63 "babel-cli": "^6.26.0",
64 "babel-eslint": "^10.0.2",
65 "babel-loader": "^8.0.0-beta.6",
66 "babel-polyfill": "^6.26.0",
67 "babel-preset-env": "^1.7.0",
68 "babel-preset-react": "^6.24.1",
69 "babel-preset-stage-2": "^6.24.1",
70 "clean-webpack-plugin": "^4.0.0",
71 "dotenv-webpack": "^7.0.3",
72 "error-overlay-webpack-plugin": "^1.0.0",
73 "eslint": "^8.0.0",
74 "eslint-config-airbnb": "^18.2.0",
75 "eslint-config-prettier": "^8.3.0",
76 "eslint-config-with-prettier": "^6.0.0",
77 "eslint-plugin-compat": "^3.3.0",
78 "eslint-plugin-import": "^2.25.2",
79 "eslint-plugin-jsx-a11y": "^6.2.3",
80 "eslint-plugin-prettier": "^4.0.0",
81 "eslint-plugin-react": "^7.14.2",
82 "eslint-plugin-react-hooks": "^4.2.0",
83 "extract-text-webpack-plugin": "^3.0.2",
84 "file-loader": "^6.2.0",
85 "html-webpack-plugin": "^5.3.2",
86 "husky": "^7.0.2",
87 "prettier": "^2.4.1",
88 "raw-loader": "^4.0.2",
89 "style-loader": "^3.3.0",
90 "stylelint": "^13.13.1",
91 "stylelint-config-recommended": "^5.0.0",
92 "stylelint-config-styled-components": "^0.1.1",
93 "stylelint-processor-styled-components": "^1.10.0",
94 "ts-loader": "^9.2.6",
95 "tslint": "^6.1.3",
96 "typescript": "^4.4.4",
97 "url-loader": "^4.1.1",
98 "webpack": "^5.58.2",
99 "webpack-cli": "^4.2.0",
100 "webpack-dev-server": "^4.3.1",
101 "webpack-merge": "^5.3.0"
102 },
103 "dependencies": {
104 "history": "^4.10.0",
105 "process": "^0.11.10",
106 "react": "^17.0.1",
107 "react-dom": "^17.0.1",
108 "react-router-dom": "^5.2.0",
109 "styled-components": "^5.2.1"
110 }
111}
112{
113 "extends": ["airbnb", "prettier"],
114 "parser": "babel-eslint",
115 "plugins": ["prettier", "@typescript-eslint"],
116 "parserOptions": {
117 "ecmaVersion": 8,
118 "ecmaFeatures": {
119 "experimentalObjectRestSpread": true,
120 "impliedStrict": true,
121 "classes": true
122 }
123 },
124 "env": {
125 "browser": true,
126 "node": true,
127 "jest": true
128 },
129 "rules": {
130 "arrow-body-style": ["error", "as-needed"],
131 "class-methods-use-this": 0,
132 "react/jsx-filename-extension": 0,
133 "global-require": 0,
134 "react/destructuring-assignment": 0,
135 "import/named": 2,
136 "linebreak-style": 0,
137 "import/no-dynamic-require": 0,
138 "import/no-named-as-default": 0,
139 "import/no-unresolved": 2,
140 "import/prefer-default-export": 0,
141 "semi": [2, "always"],
142 "max-len": [
143 "error",
144 {
145 "code": 80,
146 "ignoreUrls": true,
147 "ignoreComments": true,
148 "ignoreStrings": true,
149 "ignoreTemplateLiterals": true
150 }
151 ],
152 "new-cap": [
153 2,
154 {
155 "capIsNew": false,
156 "newIsCap": true
157 }
158 ],
159 "no-param-reassign": 0,
160 "no-shadow": 0,
161 "no-tabs": 2,
162 "no-underscore-dangle": 0,
163 "react/forbid-prop-types": [
164 "error",
165 {
166 "forbid": ["any"]
167 }
168 ],
169 "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
170 "react/jsx-no-bind": [
171 "error",
172 {
173 "ignoreRefs": true,
174 "allowArrowFunctions": true,
175 "allowBind": false
176 }
177 ],
178 "react/no-unknown-property": [
179 2,
180 {
181 "ignore": ["itemscope", "itemtype", "itemprop"]
182 }
183 ]
184 }
185}
186{
187 "extends": "./tsconfig.json",
188 "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"],
189 "exclude": ["node_modules/**", "build/**", "coverage/**"]
190}
191Not sure if anyone has come across this before? Googling the error does not present any useful forums or raised bugs, most of them just state not to use require in your files which I am not.
ANSWER
Answered 2022-Mar-15 at 16:08I think the problem is that you are trying to use the deprecated babel-eslint parser, last updated a year ago, which looks like it doesn't support ES6 modules. Updating to the latest parser seems to work, at least for simple linting.
So, do this:
- In package.json, update the line
"babel-eslint": "^10.0.2",to"@babel/eslint-parser": "^7.5.4",. This works with the code above but it may be better to use the latest version, which at the time of writing is 7.16.3. - Run
npm ifrom a terminal/command prompt in the folder - In .eslintrc, update the parser line
"parser": "babel-eslint",to"parser": "@babel/eslint-parser", - In .eslintrc, add
"requireConfigFile": false,to the parserOptions section (underneath"ecmaVersion": 8,) (I needed this or babel was looking for config files I don't have) - Run the command to lint a file
Then, for me with just your two configuration files, the error goes away and I get appropriate linting errors.
QUESTION
Create-React-App creates this <iframe> that prevents me from clicking or editing directly the app unless I delete it in the elements browswer editor
Asked 2022-Mar-17 at 00:14I recently did a global install of create-react-app and am having an issue where sometimes, when I'm working on a project, instead of editing directly what I have rendered in , it creates this container around the entire app.
Upon further inspection it looks like it is an which is rendered in the browswer as this:
1<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
2I have screenshotted below what this ends up looking like in my app (the iframe is the orange text on the right), but it's super annoying and I've deleted the css props and cannot imagine what is causing this container around my app.
Has anyone else come across this? I have to delete this iframe to edit the elements directly from the browser but can't think why this is rendering each time I load the app in the browser.
ANSWER
Answered 2022-Jan-21 at 21:43So after MUCH research and testing, I finally figured this out and I hope it can save anyone in the same situation I was in 😊
I have found two solutions that can solve this, one with a .env file that sometimes works, and the other solution is with css that I want to say always will solve this issue.
In the root folder level (the same level as the .gitignore, package.json, README.md, yarn.lock, /src), create a .env file and include the following in it:
1<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
2FAST_REFRESH=false
3This sometimes works, but if this doesn't work after awhile, proceed to the second solution below.
Fix #2:App.css fix to disable pointer-events for iframe
This solution is what has saved me a bunch. Basically what this solution fixes is the wrapping iframe around the html files that exist in an app in the React.js template.
In your global styles file, add the following property to an iframe element: pointer-events: none. I then import this css file into my JSX page so that it will remove this iframe wrapper around the page. This will disable the iframe overlay and allow you to effectively click anywhere within the window frame.
1<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
2FAST_REFRESH=false
3iframe {
4 pointer-events: none;
5}
6Hopefully one of these solutions saves you hours of research and time 😊
QUESTION
Switch' is not exported from 'react-router-dom'
Asked 2022-Mar-01 at 09:07In package.json file react-router-dom dependencies added. App component wrapped by BrowswerRouter , but when I wrap route by switch it says the following error Switch' is not exported from 'react-router-dom'. I deleted the package.json.lock ,node modules, installed npm again and npm install @babel/core --save. Still not working. I successfully wasted 6 hour for this. Can you please help me to fix this? why it's not importing?
Index.js
1import {BrowserRouter} from 'react-router-dom';
2
3ReactDOM.render(
4 <BrowserRouter>
5 <App />
6 </BrowserRouter>,
7 document.getElementById('root')
8);
9App.js:
1import {BrowserRouter} from 'react-router-dom';
2
3ReactDOM.render(
4 <BrowserRouter>
5 <App />
6 </BrowserRouter>,
7 document.getElementById('root')
8);
9 import logo from './logo.svg';
10import './App.css';
11import React from 'react';
12import {Switch,Route,Link} from 'react-router-dom';
13import Home from './Home';
14class App extends React.Component {
15 componentDidMount(){
16 alert('mounting');
17 }
18 componentDidUpdate(){
19 alert('updated');
20 }
21 render(){
22 return (
23
24 <div className="App">
25
26 <div>
27 <Link to="/">Home</Link>
28 </div>
29
30 <hr />
31
32 <Switch>
33 <Route exact path="/">
34 <Home/>
35 </Route>
36 </Switch>
37
38 </div>
39
40);
41 }
42}
43
44export default App;
45
46import React from 'react';
47
48 const Home = () => {
49 return <h1>Home</h1>;
50 };
51
52 export default Home;
53package.json
1import {BrowserRouter} from 'react-router-dom';
2
3ReactDOM.render(
4 <BrowserRouter>
5 <App />
6 </BrowserRouter>,
7 document.getElementById('root')
8);
9 import logo from './logo.svg';
10import './App.css';
11import React from 'react';
12import {Switch,Route,Link} from 'react-router-dom';
13import Home from './Home';
14class App extends React.Component {
15 componentDidMount(){
16 alert('mounting');
17 }
18 componentDidUpdate(){
19 alert('updated');
20 }
21 render(){
22 return (
23
24 <div className="App">
25
26 <div>
27 <Link to="/">Home</Link>
28 </div>
29
30 <hr />
31
32 <Switch>
33 <Route exact path="/">
34 <Home/>
35 </Route>
36 </Switch>
37
38 </div>
39
40);
41 }
42}
43
44export default App;
45
46import React from 'react';
47
48 const Home = () => {
49 return <h1>Home</h1>;
50 };
51
52 export default Home;
53"dependencies": {
54 "@babel/core": "^7.16.0",
55 "@testing-library/jest-dom": "^5.11.4",
56 "@testing-library/react": "^11.1.0",
57 "@testing-library/user-event": "^12.1.10",
58 "react": "^17.0.2",
59 "react-dom": "^17.0.2",
60 "react-router": "^6.0.0",
61 "react-router-dom": "^6.0.0",
62 "react-scripts": "4.0.3",
63 "web-vitals": "^1.0.1"
64 },
65ANSWER
Answered 2021-Nov-04 at 18:10Using
Routes instead of Switch in react-router v6
You are using react-router-dom version 6, which replaced Switch with the Routes component
1import {BrowserRouter} from 'react-router-dom';
2
3ReactDOM.render(
4 <BrowserRouter>
5 <App />
6 </BrowserRouter>,
7 document.getElementById('root')
8);
9 import logo from './logo.svg';
10import './App.css';
11import React from 'react';
12import {Switch,Route,Link} from 'react-router-dom';
13import Home from './Home';
14class App extends React.Component {
15 componentDidMount(){
16 alert('mounting');
17 }
18 componentDidUpdate(){
19 alert('updated');
20 }
21 render(){
22 return (
23
24 <div className="App">
25
26 <div>
27 <Link to="/">Home</Link>
28 </div>
29
30 <hr />
31
32 <Switch>
33 <Route exact path="/">
34 <Home/>
35 </Route>
36 </Switch>
37
38 </div>
39
40);
41 }
42}
43
44export default App;
45
46import React from 'react';
47
48 const Home = () => {
49 return <h1>Home</h1>;
50 };
51
52 export default Home;
53"dependencies": {
54 "@babel/core": "^7.16.0",
55 "@testing-library/jest-dom": "^5.11.4",
56 "@testing-library/react": "^11.1.0",
57 "@testing-library/user-event": "^12.1.10",
58 "react": "^17.0.2",
59 "react-dom": "^17.0.2",
60 "react-router": "^6.0.0",
61 "react-router-dom": "^6.0.0",
62 "react-scripts": "4.0.3",
63 "web-vitals": "^1.0.1"
64 },
65import {
66 BrowserRouter,
67 Routes, // instead of "Switch"
68 Route,
69} from "react-router-dom";
70
71// ...
72
73 <BrowserRouter>
74 <Routes>
75 <Route exact path="/" element={<Home />}>
76 <Home/>
77 </Route>
78 </Routes>
79 </BrowserRouter>
80Note that you now also pass your component as the element prop instead of using children.
QUESTION
Type Error: this.getOptions is not a function For style-loader
Asked 2022-Feb-17 at 23:50Problem
While using Storybook, I am running npm run storybook and getting the error below.
1ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
2TypeError: this.getOptions is not a function
3Background/Context
My goal is to get Storybook to be able to work with sass.
The setup is a simple one: I have scss files that get imported by the component file.
In looking up ways to accomplish this, I came across an addon to be able to do so, see this. Essentially, you can run npm i --save-dev @storybook/preset-scss style-loader css-loader sass-loader.
In doing so, I encountered my first error. It was the same error, but for sass-loader. This Stack Overflow thread helped me fix that error.
So, I guess in summary, I've tried:
- Following along with the docs (linked above)
- Following along with the Stack Overflow thread (linked above)
Relevant Dev Dependencies
1ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
2TypeError: this.getOptions is not a function
3"@storybook/preset-scss": "^1.0.3",
4"css-loader": "^6.2.0",
5"sass-loader": "^10.1.1",
6"style-loader": "^3.2.1"
7Thanks ahead of time!
ANSWER
Answered 2021-Jul-29 at 17:17Solution
After taking a step back, I realized that I could try out what I did to fix the sass-loader issue: downgrading major versions.
Steps
- Downgraded
style-loader1 major version to2.0.0:npm i style-loader@2.0.0 - Then, as luck would have it, I ran into the same issue with
css-loader - Downgraded
css-loader1 major version to5.2.7:npm i css-loader@5.2.7
Summary
By downgrading all of the loaders one major version, I was able to get it to work.
QUESTION
Module not found: Can't resolve 'swiper/css'
Asked 2022-Feb-14 at 08:30Swiper 7.0.5 swiper/css gives error Module not found: Can't resolve 'swiper/css'
1import { Swiper, SwiperSlide } from 'swiper/react';
2import 'swiper/css';
3function Test() {
4 return (
5 <Swiper
6 spaceBetween={50}
7 slidesPerView={3}
8 onSlideChange={() => console.log('slide change')}
9 onSwiper={(swiper) => console.log(swiper)}
10>
11 <SwiperSlide>Slide 1</SwiperSlide>
12 <SwiperSlide>Slide 2</SwiperSlide>
13 <SwiperSlide>Slide 3</SwiperSlide>
14 <SwiperSlide>Slide 4</SwiperSlide>
15 ...
16</Swiper>
17);
18}
19
20 export default Test;
21ANSWER
Answered 2021-Sep-28 at 07:01after a whole day looking, I finally fixed it. remove swiper entirely and add version 6.8.4: npm:
1import { Swiper, SwiperSlide } from 'swiper/react';
2import 'swiper/css';
3function Test() {
4 return (
5 <Swiper
6 spaceBetween={50}
7 slidesPerView={3}
8 onSlideChange={() => console.log('slide change')}
9 onSwiper={(swiper) => console.log(swiper)}
10>
11 <SwiperSlide>Slide 1</SwiperSlide>
12 <SwiperSlide>Slide 2</SwiperSlide>
13 <SwiperSlide>Slide 3</SwiperSlide>
14 <SwiperSlide>Slide 4</SwiperSlide>
15 ...
16</Swiper>
17);
18}
19
20 export default Test;
21npm install swiper@6.8.4
22yarn:
1import { Swiper, SwiperSlide } from 'swiper/react';
2import 'swiper/css';
3function Test() {
4 return (
5 <Swiper
6 spaceBetween={50}
7 slidesPerView={3}
8 onSlideChange={() => console.log('slide change')}
9 onSwiper={(swiper) => console.log(swiper)}
10>
11 <SwiperSlide>Slide 1</SwiperSlide>
12 <SwiperSlide>Slide 2</SwiperSlide>
13 <SwiperSlide>Slide 3</SwiperSlide>
14 <SwiperSlide>Slide 4</SwiperSlide>
15 ...
16</Swiper>
17);
18}
19
20 export default Test;
21npm install swiper@6.8.4
22yarn add swiper@6.8.4
23then add this layout to your file and it should work:
1import { Swiper, SwiperSlide } from 'swiper/react';
2import 'swiper/css';
3function Test() {
4 return (
5 <Swiper
6 spaceBetween={50}
7 slidesPerView={3}
8 onSlideChange={() => console.log('slide change')}
9 onSwiper={(swiper) => console.log(swiper)}
10>
11 <SwiperSlide>Slide 1</SwiperSlide>
12 <SwiperSlide>Slide 2</SwiperSlide>
13 <SwiperSlide>Slide 3</SwiperSlide>
14 <SwiperSlide>Slide 4</SwiperSlide>
15 ...
16</Swiper>
17);
18}
19
20 export default Test;
21npm install swiper@6.8.4
22yarn add swiper@6.8.4
23import { Swiper, SwiperSlide } from "swiper/react";
24import 'swiper/swiper-bundle.min.css'
25import 'swiper/swiper.min.css'
26
27<Swiper
28 spaceBetween={50}
29 slidesPerView={3}
30 centeredSlides
31 onSlideChange={() => console.log("slide change")}
32 onSwiper={swiper => console.log(swiper)}
33 >
34 <SwiperSlide>Slide 1</SwiperSlide>
35 <SwiperSlide>Slide 2</SwiperSlide>
36 <SwiperSlide>Slide 3</SwiperSlide>
37 <SwiperSlide>Slide 4</SwiperSlide>
38 </Swiper>
39QUESTION
My project doesn't compile with optimization parameters after upgrading from angular 11 to angular 12
Asked 2022-Jan-31 at 19:50I just upgraded an environment with nrwl from angular version 11 to 12 with two angular applications and several libraries. After update when I try to compile using optimization settings:
angular.json
1{
2 ....
3 "optimization": {
4 "scripts": true,
5 "styles": {
6 "minify": true,
7 "inlineCritical": false
8 },
9 "fonts": true
10 },
11}
12It gives me the following error (sass and scss component files):
1{
2 ....
3 "optimization": {
4 "scripts": true,
5 "styles": {
6 "minify": true,
7 "inlineCritical": false
8 },
9 "fonts": true
10 },
11}
12/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass - Error: /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass from Css Minimizer
13Error: Transform failed with 1 error:
14error: Invalid version: "15.2-15.3"
15 at failureErrorWithLog (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1493:15)
16 at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1282:29
17 at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:629:9
18 at handleIncomingPacket (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:726:9)
19 at Socket.readFromStdout (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:596:7)
20 at Socket.emit (events.js:315:20)
21 at addChunk (_stream_readable.js:309:12)
22 at readableAddChunk (_stream_readable.js:284:9)
23 at Socket.Readable.push (_stream_readable.js:223:10)
24 at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)
25Disabling styles.minify and fonts compiles without problems:
1{
2 ....
3 "optimization": {
4 "scripts": true,
5 "styles": {
6 "minify": true,
7 "inlineCritical": false
8 },
9 "fonts": true
10 },
11}
12/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass - Error: /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass from Css Minimizer
13Error: Transform failed with 1 error:
14error: Invalid version: "15.2-15.3"
15 at failureErrorWithLog (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1493:15)
16 at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1282:29
17 at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:629:9
18 at handleIncomingPacket (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:726:9)
19 at Socket.readFromStdout (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:596:7)
20 at Socket.emit (events.js:315:20)
21 at addChunk (_stream_readable.js:309:12)
22 at readableAddChunk (_stream_readable.js:284:9)
23 at Socket.Readable.push (_stream_readable.js:223:10)
24 at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)
25"optimization": {
26 "scripts": true,
27 "styles": {
28 "minify": false,
29 "inlineCritical": false
30 },
31 "fonts": false
32 },
33}
34ANSWER
Answered 2022-Jan-31 at 19:50Reason of the issue
It is expected browserslist to return an entry for each version ("safari 15.2", "safari 15.3") instead of a range ("safari 15.2-15.3"). So, this is just a bug in the parsing logic of Safari browser versions which needs to be corrected and will be done soon in fixed versions of Angular 12/Angular 13. Link to details is here.
IMPORTANT UPDATE:
This is fixed in v12.2.16 and v13.2.1, please update if you are experiencing this issue. Users on v11 shouldn't be affected. Link to details is here. If you can not/do not want to update for any reason, then one of the workarounds below can be used.
Workarounds:
Modify .browserslistrc
Add to .browserslistrc such lines:
1{
2 ....
3 "optimization": {
4 "scripts": true,
5 "styles": {
6 "minify": true,
7 "inlineCritical": false
8 },
9 "fonts": true
10 },
11}
12/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass - Error: /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass from Css Minimizer
13Error: Transform failed with 1 error:
14error: Invalid version: "15.2-15.3"
15 at failureErrorWithLog (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1493:15)
16 at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1282:29
17 at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:629:9
18 at handleIncomingPacket (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:726:9)
19 at Socket.readFromStdout (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:596:7)
20 at Socket.emit (events.js:315:20)
21 at addChunk (_stream_readable.js:309:12)
22 at readableAddChunk (_stream_readable.js:284:9)
23 at Socket.Readable.push (_stream_readable.js:223:10)
24 at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)
25"optimization": {
26 "scripts": true,
27 "styles": {
28 "minify": false,
29 "inlineCritical": false
30 },
31 "fonts": false
32 },
33}
34not ios_saf 15.2-15.3 # temporary solution to avoid build issues https://github.com/nrwl/nx/issues/8768
35not safari 15.2-15.3 # temporary solution to avoid build issues https://github.com/nrwl/nx/issues/8768
36It has to come AFTER any mentions of ios_saf or safari. Otherwise, it doesn't work. Link to workaround is here.
Erase content of .browserslistrc
Erasing content of .browserslistrc helps to fix builds. Link to workaround is here.
Delete .browserslistrc
Deletion of .browserslistrc helps to fix builds. Link to workaround is here.
Install caniuse-lite
Add caniuse-lite package:
1{
2 ....
3 "optimization": {
4 "scripts": true,
5 "styles": {
6 "minify": true,
7 "inlineCritical": false
8 },
9 "fonts": true
10 },
11}
12/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass - Error: /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass from Css Minimizer
13Error: Transform failed with 1 error:
14error: Invalid version: "15.2-15.3"
15 at failureErrorWithLog (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1493:15)
16 at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1282:29
17 at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:629:9
18 at handleIncomingPacket (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:726:9)
19 at Socket.readFromStdout (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:596:7)
20 at Socket.emit (events.js:315:20)
21 at addChunk (_stream_readable.js:309:12)
22 at readableAddChunk (_stream_readable.js:284:9)
23 at Socket.Readable.push (_stream_readable.js:223:10)
24 at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)
25"optimization": {
26 "scripts": true,
27 "styles": {
28 "minify": false,
29 "inlineCritical": false
30 },
31 "fonts": false
32 },
33}
34not ios_saf 15.2-15.3 # temporary solution to avoid build issues https://github.com/nrwl/nx/issues/8768
35not safari 15.2-15.3 # temporary solution to avoid build issues https://github.com/nrwl/nx/issues/8768
36npm install caniuse-lite@1.0.30001303 --save-dev --save-exact
37Link to workaround is here.
QUESTION
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in the package.json of a module in node_modules
Asked 2022-Jan-31 at 17:22This is a React web app. When I run
1npm start
2This error occurred
1npm start
2> dataflow@0.1.0 start
3> react-scripts start
4
5node:internal/modules/cjs/loader:488
6 throw e;
7 ^
8
9Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/juliantc/Desktop/ai-studio/development/frontend/node_modules/postcss-safe-parser/node_modules/postcss/package.json
10 at new NodeError (node:internal/errors:371:5)
11 at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
12 at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
13 at resolveExports (node:internal/modules/cjs/loader:482:36)
14 at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
15 at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
16 at Function.Module._load (node:internal/modules/cjs/loader:778:27)
17 at Module.require (node:internal/modules/cjs/loader:999:19)
18 at require (node:internal/modules/cjs/helpers:102:18)
19 at Object.<anonymous> (/Users/juliantc/Desktop/ai- studio/development/frontend/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
20 code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
21}
22
23Node.js v17.0.1
24This error only occurs when I run this on this specific computer, which I do not have superuser access to. It works on other computers.
For reference, this is ./node_modules/postcss-safe-parser/node_modules/postcss/package.json
1npm start
2> dataflow@0.1.0 start
3> react-scripts start
4
5node:internal/modules/cjs/loader:488
6 throw e;
7 ^
8
9Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/juliantc/Desktop/ai-studio/development/frontend/node_modules/postcss-safe-parser/node_modules/postcss/package.json
10 at new NodeError (node:internal/errors:371:5)
11 at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
12 at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
13 at resolveExports (node:internal/modules/cjs/loader:482:36)
14 at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
15 at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
16 at Function.Module._load (node:internal/modules/cjs/loader:778:27)
17 at Module.require (node:internal/modules/cjs/loader:999:19)
18 at require (node:internal/modules/cjs/helpers:102:18)
19 at Object.<anonymous> (/Users/juliantc/Desktop/ai- studio/development/frontend/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
20 code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
21}
22
23Node.js v17.0.1
24{
25 "name": "postcss",
26 "version": "8.2.6",
27 "description": "Tool for transforming styles with JS plugins",
28 "engines": {
29 "node": "^10 || ^12 || >=14"
30 },
31 "exports": {
32 ".": {
33 "require": "./lib/postcss.js",
34 "import": "./lib/postcss.mjs",
35 "types": "./lib/postcss.d.ts"
36 },
37 "./": "./"
38 },
39 "main": "./lib/postcss.js",
40 "types": "./lib/postcss.d.ts",
41 "keywords": [
42 "css",
43 "postcss",
44 "rework",
45 "preprocessor",
46 "parser",
47 "source map",
48 "transform",
49 "manipulation",
50 "transpiler"
51 ],
52 "funding": {
53 "type": "opencollective",
54 "url": "https://opencollective.com/postcss/"
55 },
56 "author": "Andrey Sitnik <andrey@sitnik.ru>",
57 "license": "MIT",
58 "homepage": "https://postcss.org/",
59 "repository": "postcss/postcss",
60 "dependencies": {
61 "colorette": "^1.2.1",
62 "nanoid": "^3.1.20",
63 "source-map": "^0.6.1"
64 },
65 "browser": {
66 "./lib/terminal-highlight": false,
67 "colorette": false,
68 "fs": false
69 }
70}And this is what I get when I list the files in ./node_modules/postcss-safe-parser/node_modules/postcss/lib/
lgtd-lt-119-mbmt:frontend juliantc$ ls ./node_modules/postcss-safe-parser/node_modules/postcss/lib/
1npm start
2> dataflow@0.1.0 start
3> react-scripts start
4
5node:internal/modules/cjs/loader:488
6 throw e;
7 ^
8
9Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/juliantc/Desktop/ai-studio/development/frontend/node_modules/postcss-safe-parser/node_modules/postcss/package.json
10 at new NodeError (node:internal/errors:371:5)
11 at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
12 at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
13 at resolveExports (node:internal/modules/cjs/loader:482:36)
14 at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
15 at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
16 at Function.Module._load (node:internal/modules/cjs/loader:778:27)
17 at Module.require (node:internal/modules/cjs/loader:999:19)
18 at require (node:internal/modules/cjs/helpers:102:18)
19 at Object.<anonymous> (/Users/juliantc/Desktop/ai- studio/development/frontend/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
20 code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
21}
22
23Node.js v17.0.1
24{
25 "name": "postcss",
26 "version": "8.2.6",
27 "description": "Tool for transforming styles with JS plugins",
28 "engines": {
29 "node": "^10 || ^12 || >=14"
30 },
31 "exports": {
32 ".": {
33 "require": "./lib/postcss.js",
34 "import": "./lib/postcss.mjs",
35 "types": "./lib/postcss.d.ts"
36 },
37 "./": "./"
38 },
39 "main": "./lib/postcss.js",
40 "types": "./lib/postcss.d.ts",
41 "keywords": [
42 "css",
43 "postcss",
44 "rework",
45 "preprocessor",
46 "parser",
47 "source map",
48 "transform",
49 "manipulation",
50 "transpiler"
51 ],
52 "funding": {
53 "type": "opencollective",
54 "url": "https://opencollective.com/postcss/"
55 },
56 "author": "Andrey Sitnik <andrey@sitnik.ru>",
57 "license": "MIT",
58 "homepage": "https://postcss.org/",
59 "repository": "postcss/postcss",
60 "dependencies": {
61 "colorette": "^1.2.1",
62 "nanoid": "^3.1.20",
63 "source-map": "^0.6.1"
64 },
65 "browser": {
66 "./lib/terminal-highlight": false,
67 "colorette": false,
68 "fs": false
69 }
70}at-rule.d.ts css-syntax-error.d.ts input.d.ts map-generator.js postcss.d.ts processor.js rule.js tokenize.js
71at-rule.js css-syntax-error.js input.js node.d.ts postcss.js result.d.ts stringifier.js warn-once.js
72comment.d.ts declaration.d.ts lazy-result.d.ts node.js postcss.mjs result.js stringify.d.ts warning.d.ts
73comment.js declaration.js lazy-result.js parse.d.ts previous-map.d.ts root.d.ts stringify.js warning.js
74container.d.ts fromJSON.d.ts list.d.ts parse.js previous-map.js root.js symbols.js
75container.js fromJSON.js list.js parser.js processor.d.ts rule.d.ts terminal-highlight.js
76ANSWER
Answered 2021-Nov-13 at 18:36I am also stuck with the same problem because I installed the latest version of Node.js (v17.0.1).
Just go for node.js v14.18.1 and remove the latest version just use the stable version v14.18.1
1npm start
2> dataflow@0.1.0 start
3> react-scripts start
4
5node:internal/modules/cjs/loader:488
6 throw e;
7 ^
8
9Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/juliantc/Desktop/ai-studio/development/frontend/node_modules/postcss-safe-parser/node_modules/postcss/package.json
10 at new NodeError (node:internal/errors:371:5)
11 at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
12 at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
13 at resolveExports (node:internal/modules/cjs/loader:482:36)
14 at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
15 at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
16 at Function.Module._load (node:internal/modules/cjs/loader:778:27)
17 at Module.require (node:internal/modules/cjs/loader:999:19)
18 at require (node:internal/modules/cjs/helpers:102:18)
19 at Object.<anonymous> (/Users/juliantc/Desktop/ai- studio/development/frontend/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
20 code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
21}
22
23Node.js v17.0.1
24{
25 "name": "postcss",
26 "version": "8.2.6",
27 "description": "Tool for transforming styles with JS plugins",
28 "engines": {
29 "node": "^10 || ^12 || >=14"
30 },
31 "exports": {
32 ".": {
33 "require": "./lib/postcss.js",
34 "import": "./lib/postcss.mjs",
35 "types": "./lib/postcss.d.ts"
36 },
37 "./": "./"
38 },
39 "main": "./lib/postcss.js",
40 "types": "./lib/postcss.d.ts",
41 "keywords": [
42 "css",
43 "postcss",
44 "rework",
45 "preprocessor",
46 "parser",
47 "source map",
48 "transform",
49 "manipulation",
50 "transpiler"
51 ],
52 "funding": {
53 "type": "opencollective",
54 "url": "https://opencollective.com/postcss/"
55 },
56 "author": "Andrey Sitnik <andrey@sitnik.ru>",
57 "license": "MIT",
58 "homepage": "https://postcss.org/",
59 "repository": "postcss/postcss",
60 "dependencies": {
61 "colorette": "^1.2.1",
62 "nanoid": "^3.1.20",
63 "source-map": "^0.6.1"
64 },
65 "browser": {
66 "./lib/terminal-highlight": false,
67 "colorette": false,
68 "fs": false
69 }
70}at-rule.d.ts css-syntax-error.d.ts input.d.ts map-generator.js postcss.d.ts processor.js rule.js tokenize.js
71at-rule.js css-syntax-error.js input.js node.d.ts postcss.js result.d.ts stringifier.js warn-once.js
72comment.d.ts declaration.d.ts lazy-result.d.ts node.js postcss.mjs result.js stringify.d.ts warning.d.ts
73comment.js declaration.js lazy-result.js parse.d.ts previous-map.d.ts root.d.ts stringify.js warning.js
74container.d.ts fromJSON.d.ts list.d.ts parse.js previous-map.js root.js symbols.js
75container.js fromJSON.js list.js parser.js processor.d.ts rule.d.ts terminal-highlight.js
76nvm uninstall <version>
77OR
1npm start
2> dataflow@0.1.0 start
3> react-scripts start
4
5node:internal/modules/cjs/loader:488
6 throw e;
7 ^
8
9Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/juliantc/Desktop/ai-studio/development/frontend/node_modules/postcss-safe-parser/node_modules/postcss/package.json
10 at new NodeError (node:internal/errors:371:5)
11 at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
12 at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
13 at resolveExports (node:internal/modules/cjs/loader:482:36)
14 at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
15 at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
16 at Function.Module._load (node:internal/modules/cjs/loader:778:27)
17 at Module.require (node:internal/modules/cjs/loader:999:19)
18 at require (node:internal/modules/cjs/helpers:102:18)
19 at Object.<anonymous> (/Users/juliantc/Desktop/ai- studio/development/frontend/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
20 code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
21}
22
23Node.js v17.0.1
24{
25 "name": "postcss",
26 "version": "8.2.6",
27 "description": "Tool for transforming styles with JS plugins",
28 "engines": {
29 "node": "^10 || ^12 || >=14"
30 },
31 "exports": {
32 ".": {
33 "require": "./lib/postcss.js",
34 "import": "./lib/postcss.mjs",
35 "types": "./lib/postcss.d.ts"
36 },
37 "./": "./"
38 },
39 "main": "./lib/postcss.js",
40 "types": "./lib/postcss.d.ts",
41 "keywords": [
42 "css",
43 "postcss",
44 "rework",
45 "preprocessor",
46 "parser",
47 "source map",
48 "transform",
49 "manipulation",
50 "transpiler"
51 ],
52 "funding": {
53 "type": "opencollective",
54 "url": "https://opencollective.com/postcss/"
55 },
56 "author": "Andrey Sitnik <andrey@sitnik.ru>",
57 "license": "MIT",
58 "homepage": "https://postcss.org/",
59 "repository": "postcss/postcss",
60 "dependencies": {
61 "colorette": "^1.2.1",
62 "nanoid": "^3.1.20",
63 "source-map": "^0.6.1"
64 },
65 "browser": {
66 "./lib/terminal-highlight": false,
67 "colorette": false,
68 "fs": false
69 }
70}at-rule.d.ts css-syntax-error.d.ts input.d.ts map-generator.js postcss.d.ts processor.js rule.js tokenize.js
71at-rule.js css-syntax-error.js input.js node.d.ts postcss.js result.d.ts stringifier.js warn-once.js
72comment.d.ts declaration.d.ts lazy-result.d.ts node.js postcss.mjs result.js stringify.d.ts warning.d.ts
73comment.js declaration.js lazy-result.js parse.d.ts previous-map.d.ts root.d.ts stringify.js warning.js
74container.d.ts fromJSON.d.ts list.d.ts parse.js previous-map.js root.js symbols.js
75container.js fromJSON.js list.js parser.js processor.d.ts rule.d.ts terminal-highlight.js
76nvm uninstall <version>
77nvm uninstall v17.0.1
78then install the LTS one which is v14.18.1
1npm start
2> dataflow@0.1.0 start
3> react-scripts start
4
5node:internal/modules/cjs/loader:488
6 throw e;
7 ^
8
9Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/juliantc/Desktop/ai-studio/development/frontend/node_modules/postcss-safe-parser/node_modules/postcss/package.json
10 at new NodeError (node:internal/errors:371:5)
11 at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
12 at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
13 at resolveExports (node:internal/modules/cjs/loader:482:36)
14 at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
15 at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
16 at Function.Module._load (node:internal/modules/cjs/loader:778:27)
17 at Module.require (node:internal/modules/cjs/loader:999:19)
18 at require (node:internal/modules/cjs/helpers:102:18)
19 at Object.<anonymous> (/Users/juliantc/Desktop/ai- studio/development/frontend/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
20 code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
21}
22
23Node.js v17.0.1
24{
25 "name": "postcss",
26 "version": "8.2.6",
27 "description": "Tool for transforming styles with JS plugins",
28 "engines": {
29 "node": "^10 || ^12 || >=14"
30 },
31 "exports": {
32 ".": {
33 "require": "./lib/postcss.js",
34 "import": "./lib/postcss.mjs",
35 "types": "./lib/postcss.d.ts"
36 },
37 "./": "./"
38 },
39 "main": "./lib/postcss.js",
40 "types": "./lib/postcss.d.ts",
41 "keywords": [
42 "css",
43 "postcss",
44 "rework",
45 "preprocessor",
46 "parser",
47 "source map",
48 "transform",
49 "manipulation",
50 "transpiler"
51 ],
52 "funding": {
53 "type": "opencollective",
54 "url": "https://opencollective.com/postcss/"
55 },
56 "author": "Andrey Sitnik <andrey@sitnik.ru>",
57 "license": "MIT",
58 "homepage": "https://postcss.org/",
59 "repository": "postcss/postcss",
60 "dependencies": {
61 "colorette": "^1.2.1",
62 "nanoid": "^3.1.20",
63 "source-map": "^0.6.1"
64 },
65 "browser": {
66 "./lib/terminal-highlight": false,
67 "colorette": false,
68 "fs": false
69 }
70}at-rule.d.ts css-syntax-error.d.ts input.d.ts map-generator.js postcss.d.ts processor.js rule.js tokenize.js
71at-rule.js css-syntax-error.js input.js node.d.ts postcss.js result.d.ts stringifier.js warn-once.js
72comment.d.ts declaration.d.ts lazy-result.d.ts node.js postcss.mjs result.js stringify.d.ts warning.d.ts
73comment.js declaration.js lazy-result.js parse.d.ts previous-map.d.ts root.d.ts stringify.js warning.js
74container.d.ts fromJSON.d.ts list.d.ts parse.js previous-map.js root.js symbols.js
75container.js fromJSON.js list.js parser.js processor.d.ts rule.d.ts terminal-highlight.js
76nvm uninstall <version>
77nvm uninstall v17.0.1
78nvm install --lts
79This worked for me.
QUESTION
Data path "" must NOT have additional properties(extractCss) in Angular 13 while upgrading project
Asked 2022-Jan-27 at 14:41I am facing an issue while upgrading my project from angular 8.2.1 to angular 13 version.
After a successful upgrade while preparing a build it is giving me the following error.
1Data path "" must NOT have additional properties(extractCss).
2I already renamed styleext with style in the angular.json file, but still not able to find the root cause for this error.
angular.json file is as follows.
1Data path "" must NOT have additional properties(extractCss).
2 {
3 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
4 "version": 1,
5 "newProjectRoot": "projects",
6 "projects": {
7 "qiwkCollaborator": {
8 "projectType": "application",
9 "schematics": {
10 "@schematics/angular:component": {
11 "style": "scss"
12 }
13 },
14 "root": "",
15 "sourceRoot": "src",
16 "prefix": "app",
17 "architect": {
18 "build": {
19
20 /* "configurations": {
21 "fr": {
22 "aot": true,
23 "outputPath": "dist/qwikCollaborator/fr/",
24 "i18nFile": "src/translate/messages.fr.xlf",
25 "i18nFormat": "xlf",
26 "i18nLocale": "fr",
27 "i18nMissingTranslation": "error"
28 },
29 "en": {
30 "aot": true,
31 "outputPath": "dist/qwikCollaborator/en/",
32 "i18nFile": "src/translate/messages.en.xlf",
33 "i18nFormat": "xlf",
34 "i18nLocale": "en",
35 "i18nMissingTranslation": "error"
36 }
37 },*/
38 "builder": "@angular-devkit/build-angular:browser",
39 "options": {
40 "outputPath": "dist/qiwkCollaborator",
41 "index": "src/index.html",
42 "main": "src/main.ts",
43 "polyfills": "src/polyfills.ts",
44 "tsConfig": "tsconfig.app.json",
45 "aot": false,
46 "assets": [
47 "src/favicon.ico",
48 "src/assets"
49 ],
50 "styles": [
51 "src/styles.scss",
52 "src/assets/css/custom-mobile.css",
53 "src/assets/css/custom.css"
54 ],
55 "scripts": [
56 "node_modules/jquery/dist/jquery.min.js",
57 "src/assets/js/qwikCollaborator.js"
58 ]
59 },
60 "configurations": {
61 "es5": {
62 "tsConfig": "./tsconfig.es5.json"
63 },
64 "production": {
65 "fileReplacements": [
66 {
67 "replace": "src/environments/environment.ts",
68 "with": "src/environments/environment.prod.ts"
69 }
70 ],
71 "optimization": true,
72 "outputHashing": "all",
73 "sourceMap": false,
74 "extractCss": true,
75 "namedChunks": false,
76 "aot": true,
77 "extractLicenses": true,
78 "vendorChunk": false,
79 "buildOptimizer": true,
80 "budgets": [
81 {
82 "type": "initial",
83 "maximumWarning": "2mb",
84 "maximumError": "5mb"
85 },
86 {
87 "type": "anyComponentStyle",
88 "maximumWarning": "6kb",
89 "maximumError": "10kb"
90 }
91 ]
92 }
93 }
94 },
95 "serve": {
96 /* "configurations": {
97 "fr": {
98 "browserTarget": "qwikCollaborator:build:fr"
99 },
100 "en": {
101 "browserTarget": "qwikCollaborator:build:en"
102 } ,
103 },*/
104 "builder": "@angular-devkit/build-angular:dev-server",
105 "options": {
106 "browserTarget": "qiwkCollaborator:build"
107 },
108
109 "configurations": {
110 "es5": {
111 "browserTarget": "qiwkCollaborator:build:es5"
112 },
113 "production": {
114 "browserTarget": "qiwkCollaborator:build:es5"
115 }
116 }
117 },
118 "extract-i18n": {
119 "builder": "@angular-devkit/build-angular:extract-i18n",
120 "options": {
121 "browserTarget": "qiwkCollaborator:build"
122 }
123 },
124 "test": {
125 "builder": "@angular-devkit/build-angular:karma",
126 "options": {
127 "main": "src/test.ts",
128 "polyfills": "src/polyfills.ts",
129 "tsConfig": "tsconfig.spec.json",
130 "karmaConfig": "karma.conf.js",
131 "assets": [
132 "src/favicon.ico",
133 "src/assets"
134 ],
135 "styles": [
136 "src/styles.scss"
137 ],
138 "scripts": ["../node_modules/jspdf/dist/jspdf.min.js"]
139 }
140 },
141 "lint": {
142 "builder": "@angular-devkit/build-angular:tslint",
143 "options": {
144 "tsConfig": [
145 "tsconfig.app.json",
146 "tsconfig.spec.json",
147 "e2e/tsconfig.json"
148 ],
149 "exclude": [
150 "**/node_modules/**"
151 ]
152 }
153 },
154 "e2e": {
155 "builder": "@angular-devkit/build-angular:protractor",
156 "options": {
157 "protractorConfig": "e2e/protractor.conf.js",
158 "devServerTarget": "qiwkCollaborator:serve"
159 },
160 "configurations": {
161 "production": {
162 "devServerTarget": "qiwkCollaborator:serve:production"
163 }
164 }
165 }
166 }
167 }},
168 "defaultProject": "qiwkCollaborator"
169}
170How to get rid of this additional property?
can anyone help me with this?
thanks in advance!
ANSWER
Answered 2021-Dec-14 at 12:45Just remove the "extractCss": true from your production environment, it will resolve the problem.
The reason about it is extractCss is deprecated, and it's value is true by default. See more here: Extracting CSS into JS with Angular 11 (deprecated extractCss)
QUESTION
Tailwind V3 causing TypeError: Cannot read property '500' of undefined
Asked 2022-Jan-26 at 20:02I recently tried to upgrade my project to tailwind css and I'm getting this error
this is my tailwind config
1 module.exports = {
2 mode: "jit",
3 purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
4 darkMode: "class", // or 'media' or 'class'
5 theme: {
6 extend: {
7 colors: {
8 secondaryDark: "#171A1A",
9 primaryDark: "#090A0A",
10 neonOrange: "#FF9933",
11 redditRed: "#FF5700",
12 cardGradientPrimary: "#ff930f",
13 cardGradientSecondary: "#fff95b",
14 },
15 },
16 },
17 variants: {
18 extend: {},
19 },
20 plugins: [require("@tailwindcss/forms")],
21 };
22ANSWER
Answered 2021-Dec-11 at 03:50I have the same issue after upgrade to tailwind v3 and fixed it by update @tailwindcss/forms to 0.4.0
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in CSS
Share this Page
Get latest updates on CSS