Explore all Webpack open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Webpack

create-react-app

v5.0.1

webpack

vite

create-vite@2.9.2

babel

v7.17.9

parcel

v2.5.0

Popular Libraries in Webpack

create-react-app

by facebook doticonjavascriptdoticon

star image 94434 doticonMIT

Set up a modern web app by running one command.

webpack

by webpack doticonjavascriptdoticon

star image 60899 doticonMIT

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

vite

by vitejs doticontypescriptdoticon

star image 40832 doticonMIT

Next generation frontend tooling. It's fast!

babel

by babel doticontypescriptdoticon

star image 40726 doticonMIT

🐠 Babel is a compiler for writing next generation JavaScript.

parcel

by parcel-bundler doticonjavascriptdoticon

star image 40599 doticonMIT

The zero configuration build tool for the web. 📦🚀

nuxt.js

by nuxt doticonjavascriptdoticon

star image 39155 doticonNOASSERTION

The Intuitive Vue(2) Framework

esbuild

by evanw doticongodoticon

star image 31445 doticonMIT

An extremely fast JavaScript and CSS bundler and minifier

vue-cli

by vuejs doticonjavascriptdoticon

star image 29130 doticonMIT

🛠️ webpack-based tooling for Vue.js Development

async

by caolan doticonjavascriptdoticon

star image 27509 doticonMIT

Async utilities for node and the browser

Trending New libraries in Webpack

vite

by vitejs doticontypescriptdoticon

star image 40832 doticonMIT

Next generation frontend tooling. It's fast!

vanillawebprojects

by bradtraversy doticonjavascriptdoticon

star image 10938 doticon

Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries

ExplorerPatcher

by valinet doticoncdoticon

star image 4732 doticonGPL-2.0

This project aims to enhance the working environment on Windows

FE-Interview

by lgwebdream doticonjavascriptdoticon

star image 3960 doticonNOASSERTION

🔥🔥🔥 前端面试,独有前端面试题详解,前端面试刷题必备,1000+前端面试真题,Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器

esbuild-loader

by privatenumber doticontypescriptdoticon

star image 2502 doticonMIT

⚡️ Speed up your Webpack build with esbuild

tsup

by egoist doticontypescriptdoticon

star image 1978 doticonMIT

The simplest and fastest way to bundle your TypeScript libraries.

ultra

by exhibitionist-digital doticontypescriptdoticon

star image 1919 doticonMIT

💎 Modern Streaming React Framework in Deno

sandpack

by codesandbox doticontypescriptdoticon

star image 1833 doticonApache-2.0

A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

emp

by efoxTeam doticontypescriptdoticon

star image 1716 doticonNOASSERTION

EMP Micro FE Base on webpack 5 & module federation

Top Authors in Webpack

1

webpack-contrib

68 Libraries

star icon64561

2

egoist

38 Libraries

star icon14400

3

easy-team

27 Libraries

star icon3000

4

PacktPublishing

25 Libraries

star icon529

5

webpack

25 Libraries

star icon82042

6

microsoft

21 Libraries

star icon6148

7

sindresorhus

18 Libraries

star icon3954

8

privatenumber

18 Libraries

star icon3182

9

ragingwind

18 Libraries

star icon261

10

kriasoft

17 Libraries

star icon28441

1

68 Libraries

star icon64561

2

38 Libraries

star icon14400

3

27 Libraries

star icon3000

4

25 Libraries

star icon529

5

25 Libraries

star icon82042

6

21 Libraries

star icon6148

7

18 Libraries

star icon3954

8

18 Libraries

star icon3182

9

18 Libraries

star icon261

10

17 Libraries

star icon28441

Trending Kits in Webpack

No Trending Kits are available at this moment for Webpack

Trending Discussions on Webpack

Error message "error:0308010C:digital envelope routines::unsupported"

What is jsconfig.json

After upgrading from Angular 12 to 13, cache is too large for Github

Uncaught ReferenceError: Buffer is not defined

ESlint - Error: Must use import to load ES Module

Create-React-App with TypeScript failing to compile after importing Semantic UI

Getting error 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'

Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack:

TypeError: match.loader.options.plugins is not a function

Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported

QUESTION

Error message "error:0308010C:digital envelope routines::unsupported"

Asked 2022-Apr-03 at 10:57

I created the default IntelliJ IDEA React project and got this:

1Error: error:0308010C:digital envelope routines::unsupported
2    at new Hash (node:internal/crypto/hash:67:19)
3    at Object.createHash (node:crypto:130:10)
4    at module.exports (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/util/createHash.js:135:53)
5    at NormalModule._initBuildHash (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:417:16)
6    at handleParseError (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:471:10)
7    at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:503:5
8    at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:358:12
9    at /Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:373:3
10    at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
11    at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
12/Users/user/Programming Documents/WebServer/untitled/node_modules/react-scripts/scripts/start.js:19
13  throw err;
14  ^
15

ANSWER

Answered 2021-Nov-15 at 00:32

Failed to construct transformer: Error: error:0308010C:digital envelope routines::unsupported

The simplest and easiest solution to solve the above error is to downgrade Node.js to v14.18.1. And then just delete folder node_modules and try to rebuild your project and your error must be solved.

Source https://stackoverflow.com/questions/69692842

QUESTION

What is jsconfig.json

Asked 2022-Mar-29 at 17:49

If i search the same question on the internet, then i'll get only links to vscode website ans some blogs which implements it.

I want to know that is jsconfig.json is specific to vscode or javascript/webpack?

What will happen if we deploy the application on AWS / Heroku, etc. Do we have to make change?

ANSWER

Answered 2021-Aug-06 at 04:10

This is definitely specific to VSCode.

The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project. The jsconfig.json file specifies the root files and the options for the features provided by the JavaScript language service.

Check more details here: https://code.visualstudio.com/docs/languages/jsconfig

You don't need this file when deploy it on AWS/Heroku, basically, you can exclude this from your commit if you are using git repo, i.e., add jsconfig.json in your .gitignore, this will make your project IDE independent.

Source https://stackoverflow.com/questions/68675994

QUESTION

After upgrading from Angular 12 to 13, cache is too large for Github

Asked 2022-Mar-28 at 18:10

I recently upgraded all of my dependencies in package.json to the latest. I went from Angular 12.2.0 to 13.0.1 and github is now rejecting my push with the following file size error. Is there some setting I need to define in angular.json build profile that will help minimize these cache file sizes?

1remote: warning: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/3.pack is 54.01 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
2remote: warning: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/2.pack is 56.42 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
3remote: error: Trace: 0b9557fffbe30aac33f6d9858ef97559341c5c1614ace35524fcba85ac99ca76
4remote: error: See http://git.io/iEPt8g for more information.
5remote: error: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/3.pack is 122.06 MB; this exceeds GitHub's file size limit of 100.00 MB
6remote: error: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/5.pack is 123.92 MB; this exceeds GitHub's file size limit of 100.00 MB
7remote: error: File .angular/cache/angular-webpack/f48e9bc724ec0d5ae9a9d2fed858970d0a503f10/0.pack is 154.05 MB; this exceeds GitHub's file size limit of 100.00 MB
8remote: error: File .angular/cache/angular-webpack/9327900b3187f0b6351b4801d208e7b58f1af17e/0.pack is 165.50 MB; this exceeds GitHub's file size limit of 100.00 MB
9remote: error: File .angular/cache/angular-webpack/663bcd30d50863949acf1c25f02b95cab85c248a/0.pack is 151.56 MB; this exceeds GitHub's file size limit of 100.00 MB
10remote: error: File .angular/cache/angular-webpack/663bcd30d50863949acf1c25f02b95cab85c248a/0.pack is 151.55 MB; this exceeds GitHub's file size limit of 100.00 MB
11remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
12

Edit:

  1. I created this repo with Angular cli and have been maintaining and updating through many versions of Angular and had no issue until this latest update.

  2. The .gitignore file is in the root of the application and matches the suggested example: enter image description here

  3. When adding /.angular/cache to the gitignore file, I run git rm -rf --cached . && git add . && git commit -m 'fix(gitignore): add angular cache' && git push --set-upstream origin chore/bump-deps but still get the file size error.

ANSWER

Answered 2021-Nov-24 at 16:53

Make sure your .gitignore is in the parent folder of .angular.
In that .gitignore file, a simple .angular/cache/ should be enough to ignore that subfolder content.

Check it with:

1remote: warning: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/3.pack is 54.01 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
2remote: warning: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/2.pack is 56.42 MB; this is larger than GitHub's recommended maximum file size of 50.00 MB
3remote: error: Trace: 0b9557fffbe30aac33f6d9858ef97559341c5c1614ace35524fcba85ac99ca76
4remote: error: See http://git.io/iEPt8g for more information.
5remote: error: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/3.pack is 122.06 MB; this exceeds GitHub's file size limit of 100.00 MB
6remote: error: File .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/5.pack is 123.92 MB; this exceeds GitHub's file size limit of 100.00 MB
7remote: error: File .angular/cache/angular-webpack/f48e9bc724ec0d5ae9a9d2fed858970d0a503f10/0.pack is 154.05 MB; this exceeds GitHub's file size limit of 100.00 MB
8remote: error: File .angular/cache/angular-webpack/9327900b3187f0b6351b4801d208e7b58f1af17e/0.pack is 165.50 MB; this exceeds GitHub's file size limit of 100.00 MB
9remote: error: File .angular/cache/angular-webpack/663bcd30d50863949acf1c25f02b95cab85c248a/0.pack is 151.56 MB; this exceeds GitHub's file size limit of 100.00 MB
10remote: error: File .angular/cache/angular-webpack/663bcd30d50863949acf1c25f02b95cab85c248a/0.pack is 151.55 MB; this exceeds GitHub's file size limit of 100.00 MB
11remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
12git check-ignore -v -- .angular/cache/angular-webpack/72163742903fc8ba00e684045de261c2e3a2fb86/2.pack
13

You can see an example in ganatan/angular-starter/.gitignore (from an Angular 13 Example Starter project), where /.angular/cache/ is used, to anchor the rule to the top folder of the repository.

The OP S. Taylor confirms in the comments:

I'm pretty sure that was my issue.
I abandoned the dev branch and updated my dependencies without using the compound commands like git add . && git commit -m 'fix(gitignore): add angular cache'.
Making sure to note what was staged.

Source https://stackoverflow.com/questions/70088051

QUESTION

Uncaught ReferenceError: Buffer is not defined

Asked 2022-Mar-17 at 15:41

Our application kept showing the error in the title. The problem is very likely related to Webpack 5 polyfill and after going through a couple of solutions:

  1. Setting fallback + install with npm
1fallback: {
2  "stream": require.resolve("stream-browserify"),
3  "buffer": require.resolve("buffer/")
4}
5
  1. Setting alias
1fallback: {
2  "stream": require.resolve("stream-browserify"),
3  "buffer": require.resolve("buffer/")
4}
5alias: {
6  "buffer": "buffer",
7  "stream": "stream-browserify"
8}
9

We are still seeing the dreadful error:

1fallback: {
2  "stream": require.resolve("stream-browserify"),
3  "buffer": require.resolve("buffer/")
4}
5alias: {
6  "buffer": "buffer",
7  "stream": "stream-browserify"
8}
9rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined
10    at Object.4142 (rfc6979.js:3)
11    at r (bootstrap:19)
12    at Object.5892 (js.js:4)
13    at r (bootstrap:19)
14    at Object.4090 (bip32.js:5)
15    at r (bootstrap:19)
16    at Object.7786 (index.js:3)
17    at r (bootstrap:19)
18    at Object.1649 (MnemonicKey.js:50)
19    at r (bootstrap:19)
20

Our setup is vanilla NodeJS + TypeScript + Webpack for multi-target: node + browser. Any help would be great!

ANSWER

Answered 2021-Aug-10 at 08:15

Answering my own question. Two things helped to resolve the issue:

  1. Adding plugins section with ProviderPlugin into webpack.config.js
1fallback: {
2  "stream": require.resolve("stream-browserify"),
3  "buffer": require.resolve("buffer/")
4}
5alias: {
6  "buffer": "buffer",
7  "stream": "stream-browserify"
8}
9rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined
10    at Object.4142 (rfc6979.js:3)
11    at r (bootstrap:19)
12    at Object.5892 (js.js:4)
13    at r (bootstrap:19)
14    at Object.4090 (bip32.js:5)
15    at r (bootstrap:19)
16    at Object.7786 (index.js:3)
17    at r (bootstrap:19)
18    at Object.1649 (MnemonicKey.js:50)
19    at r (bootstrap:19)
20const webpack = require('webpack');
21
22module.exports = {
23    // ...
24
25    plugins: [
26        // Work around for Buffer is undefined:
27        // https://github.com/webpack/changelog-v5/issues/10
28        new webpack.ProvidePlugin({
29            Buffer: ['buffer', 'Buffer'],
30        }),
31        new webpack.ProvidePlugin({
32            process: 'process/browser',
33        }),
34    ],
35
36
  1. Also add in resolve.fallback into webpack.config.js:
1fallback: {
2  "stream": require.resolve("stream-browserify"),
3  "buffer": require.resolve("buffer/")
4}
5alias: {
6  "buffer": "buffer",
7  "stream": "stream-browserify"
8}
9rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined
10    at Object.4142 (rfc6979.js:3)
11    at r (bootstrap:19)
12    at Object.5892 (js.js:4)
13    at r (bootstrap:19)
14    at Object.4090 (bip32.js:5)
15    at r (bootstrap:19)
16    at Object.7786 (index.js:3)
17    at r (bootstrap:19)
18    at Object.1649 (MnemonicKey.js:50)
19    at r (bootstrap:19)
20const webpack = require('webpack');
21
22module.exports = {
23    // ...
24
25    plugins: [
26        // Work around for Buffer is undefined:
27        // https://github.com/webpack/changelog-v5/issues/10
28        new webpack.ProvidePlugin({
29            Buffer: ['buffer', 'Buffer'],
30        }),
31        new webpack.ProvidePlugin({
32            process: 'process/browser',
33        }),
34    ],
35
36    resolve: {
37        extensions: [ '.ts', '.js' ],
38        fallback: {
39            "stream": require.resolve("stream-browserify"),
40            "buffer": require.resolve("buffer")
41        }
42    },
43
44

Source https://stackoverflow.com/questions/68707553

QUESTION

ESlint - Error: Must use import to load ES Module

Asked 2022-Mar-17 at 12:13

I 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
6

The 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}
112

Here 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}
186

And 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}
191

Not 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:08

I 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 i from 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.

Source https://stackoverflow.com/questions/69554485

QUESTION

Create-React-App with TypeScript failing to compile after importing Semantic UI

Asked 2022-Mar-15 at 08:26

I've created a new React app by running npx create-react-app@latest --typescript . and I've run the project using npm start and it all works as expected. I ran npm install semantic-ui-react semantic-ui-css and that installs correctly.

But when I add import 'semantic-ui-css/semantic.min.css'; to index.tsx as instructed, I get a failed to compile error.

Here's my index.tsx file:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from './App';
5import reportWebVitals from './reportWebVitals';
6import 'semantic-ui-css/semantic.min.css';
7
8ReactDOM.render(
9  <React.StrictMode>
10    <App />
11  </React.StrictMode>,
12  document.getElementById('root')
13);
14
15// If you want to start measuring performance in your app, pass a function
16// to log results (for example: reportWebVitals(console.log))
17// or send to an analytics endpoint.
18reportWebVitals();
19

Everything else is untouched.

If I remove import 'semantic-ui-css/semantic.min.css'; from line 6 of index.tsx it compiles correctly. I'm guessing this is a Webpack issue, but I'm new to Webpack and I'm not sure how to solve the issue. I've tried setting the project up from scratch again but I get the same results.

I'm using react 17.0.2, react scripts 5.0.0, semantic-ui-react 2.0.4 and typescript 4.5.4. Is there something obvious that I'm missing that would fix this?

And here is the error code I get:

1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from './App';
5import reportWebVitals from './reportWebVitals';
6import 'semantic-ui-css/semantic.min.css';
7
8ReactDOM.render(
9  <React.StrictMode>
10    <App />
11  </React.StrictMode>,
12  document.getElementById('root')
13);
14
15// If you want to start measuring performance in your app, pass a function
16// to log results (for example: reportWebVitals(console.log))
17// or send to an analytics endpoint.
18reportWebVitals();
19Failed to compile.
20
21Module build failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAYALAMI0IgYLABYbUNDQEACwBCQopgsQ0FK7BtKxsiWS2wDyyxAA4rLbAQLLEBDistsBEssQIOKy2wEiyxAw4rLbATLLEEDistsBQssQUOKy2wFSyxBg4rLbAWLLEHDistsBcssQgOKy2wGCyxCQ4rLbAZLrsDgrLbBpLLA1Ky6xJgEUKy2waiywNSuwNistsGsssDUrsDcrLbBsLLA1K7A4Ky2wbSwrsAhlsAMkUHiwARUwLQAAAEu4AMhSWLEBAY5ZuQgACABjILABI0SwAyNwsgQoCUVSRLIKAgcqsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAA=" is not handled by plugins (Unhandled scheme).
22Webpack supports "data:" and "file:" URIs by default.
23You may need an additional plugin to handle "data:" URIs.
24assets by path static/ 9.45 KiB
25  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.88 KiB [emitted] 1 related asset
26  asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
27asset index.html 1.62 KiB [emitted]
28asset asset-manifest.json 429 bytes [emitted]
29Entrypoint main (2.57 KiB) = 1 auxiliary asset
30cached modules 2.72 MiB (javascript) 1.66 MiB (asset) 31.4 KiB (runtime) [cached] 150 modules
31runtime modules 54 bytes 1 module
32modules by layer 4.38 KiB (javascript) 1 bytes (asset)
33  ./src/index.tsx 1.82 KiB [built] [code generated]
34  ./src/App.tsx 2.51 KiB [built] [code generated]
35  data:application/x-font-ttf;charset=utf-8;;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwND4rLbBYLLIBAT4rLbBZLLIAADorLbBaLLIAATorLbBbLLIBADorLbBcLLIBATorLbBdLLAyKy6xJgEUKy2wXiywMiuwNistsF8ssDIrsDcrLbBgLLAAFrAyK7A4Ky2wYSywMysusSYBFCstsGIssDMrsDYrLbBjLLAzK7A3Ky2wZCywMyuwOCstsGUssDQrLrEmARQrLbBmLLA0K7A2Ky2wZyywNCuwNystsGgssDQrsDgrLbBpLLA1Ky6xJgEUKy2waiywNSuwNistsGsssDUrsDcrLbBsLLA1K7A4Ky2wbSwrsAhlsAMkUHiwARUwLQAAAEu4AMhSWLEBAY5ZuQgACABjILABI0SwAyNwsgQoCUVSRLIKAgcqsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAA= 42 bytes (javascript) 1 bytes (asset) [built] [1 error]
36
37ERROR in data:application/x-font-ttf;charset=utf-8;;base64,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
38Module build failed: UnhandledSchemeError: Reading from "data:application/x-font-ttf;charset=utf-8;;base64,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" is not handled by plugins (Unhandled scheme).
39Webpack supports "data:" and "file:" URIs by default.
40You may need an additional plugin to handle "data:" URIs.
41    at /Users/eamon/projects/frontend/node_modules/webpack/lib/NormalModule.js:825:25
42    at Hook.eval [as callAsync] (eval at create (/Users/eamon/projects/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
43    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/eamon/projects/frontend/node_modules/tapable/lib/Hook.js:18:14)
44    at Object.processResource (/Users/eamon/projects/frontend/node_modules/webpack/lib/NormalModule.js:822:8)
45    at processResource (/Users/eamon/projects/frontend/node_modules/loader-runner/lib/LoaderRunner.js:220:11)
46    at iteratePitchingLoaders (/Users/eamon/projects/frontend/node_modules/loader-runner/lib/LoaderRunner.js:171:10)
47    at runLoaders (/Users/eamon/projects/frontend/node_modules/loader-runner/lib/LoaderRunner.js:397:2)
48    at NormalModule._doBuild (/Users/eamon/projects/frontend/node_modules/webpack/lib/NormalModule.js:812:3)
49    at NormalModule.build (/Users/eamon/projects/frontend/node_modules/webpack/lib/NormalModule.js:956:15)
50    at /Users/eamon/projects/frontend/node_modules/webpack/lib/Compilation.js:1367:12
51 @ ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css 22:37-5903
52 @ ./node_modules/semantic-ui-css/semantic.min.css 8:6-230 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-200 83:0-200 84:22-29 84:33-47 84:50-64 61:4-74:5
53 @ ./src/index.tsx 9:0-42
54
55ERROR in [entry] [initial]
56Cannot read properties of undefined (reading 'get')
57during rendering of asset asset/inline|data:application/x-font-ttf;charset=utf-8;;base64,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
58TypeError: Cannot read properties of undefined (reading 'get')
59during rendering of asset asset/inline|data:application/x-font-ttf;charset=utf-8;;base64,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
60    at /Users/eamon/projects/frontend/node_modules/webpack/lib/asset/AssetModulesPlugin.js:183:30
61    at Hook.eval [as call] (eval at create (/Users/eamon/projects/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:12:16)
62    at Hook.CALL_DELEGATE [as _call] (/Users/eamon/projects/frontend/node_modules/tapable/lib/Hook.js:14:14)
63    at Compilation.getRenderManifest (/Users/eamon/projects/frontend/node_modules/webpack/lib/Compilation.js:4439:36)
64    at /Users/eamon/projects/frontend/node_modules/webpack/lib/Compilation.js:4459:22
65    at symbolIterator (/Users/eamon/projects/frontend/node_modules/neo-async/async.js:3482:9)
66    at timesSync (/Users/eamon/projects/frontend/node_modules/neo-async/async.js:2297:7)
67    at Object.eachLimit (/Users/eamon/projects/frontend/node_modules/neo-async/async.js:3463:5)
68    at Compilation.createChunkAssets (/Users/eamon/projects/frontend/node_modules/webpack/lib/Compilation.js:4452:12)
69    at /Users/eamon/projects/frontend/node_modules/webpack/lib/Compilation.js:3095:14
70
71webpack 5.65.0 compiled with 2 errors in 1597 ms
72Files successfully emitted, waiting for typecheck results...
73Issues checking in progress...
74No issues found.
75

ANSWER

Answered 2021-Dec-15 at 21:37

Judging from this issue: CSS import breaks webpack 5 compilation
I believe this is an issue with Semantic-UI-React and Webpack 5 (which is used by Create-React-App).

The final answer in that issue is a suggestion to switch to Fomantic-UI 😅

This should be reported into the upstream repo: https://github.com/Semantic-Org/Semantic-UI. The problem is that it's dead 🙄 Reasonable solution is to switch to https://github.com/fomantic/Fomantic-UI.

https://github.com/Semantic-Org/Semantic-UI-React/issues/4287#issuecomment-935897619

Source https://stackoverflow.com/questions/70367443

QUESTION

Getting error 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'

Asked 2022-Mar-05 at 09:54

I got this error when learning Next.js, using npx create-next-app command according to site documentation here https://nextjs.org/docs/api-reference/create-next-app. Everything works until I start the server,

Error stack:

1$ npm run dev
2
3> devto-clone@0.1.0 dev
4> next dev
5
6ready - started server on 0.0.0.0:3000, url: http://localhost:3000
7info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
8Error: error:0308010C:digital envelope routines::unsupported
9    at new Hash (node:internal/crypto/hash:67:19)
10    at Object.createHash (node:crypto:130:10)
11    at BulkUpdateDecorator.hashFactory (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138971:18)
12    at BulkUpdateDecorator.update (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138872:50)
13    at OriginalSource.updateHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack-sources3\index.js:1:10264)
14    at NormalModule._initBuildHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68468:17)
15    at handleParseResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68534:10)
16    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68628:4
17    at processResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68343:11)
18    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68407:5
19Error: error:0308010C:digital envelope routines::unsupported
20    at new Hash (node:internal/crypto/hash:67:19)
21    at Object.createHash (node:crypto:130:10)
22    at BulkUpdateDecorator.hashFactory (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138971:18)
23    at BulkUpdateDecorator.update (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138872:50)
24    at OriginalSource.updateHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack-sources3\index.js:1:10264)
25    at NormalModule._initBuildHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68468:17)
26    at handleParseResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68534:10)
27    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68628:4
28    at processResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68343:11)
29    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68407:5
30node:internal/crypto/hash:67
31  this[kHandle] = new _Hash(algorithm, xofLen);
32                  ^
33
34Error: error:0308010C:digital envelope routines::unsupported
35    at new Hash (node:internal/crypto/hash:67:19)
36    at Object.createHash (node:crypto:130:10)
37    at BulkUpdateDecorator.hashFactory (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138971:18)
38    at BulkUpdateDecorator.update (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138872:50)
39    at OriginalSource.updateHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack-sources3\index.js:1:10264)
40    at NormalModule._initBuildHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68468:17)
41    at handleParseResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68534:10)
42    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68628:4
43    at processResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68343:11)
44    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68407:5 {
45  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
46  library: 'digital envelope routines',
47  reason: 'unsupported',
48  code: 'ERR_OSSL_EVP_UNSUPPORTED'
49}
50
51Node.js v17.0.1
52

package.json :

1$ npm run dev
2
3> devto-clone@0.1.0 dev
4> next dev
5
6ready - started server on 0.0.0.0:3000, url: http://localhost:3000
7info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
8Error: error:0308010C:digital envelope routines::unsupported
9    at new Hash (node:internal/crypto/hash:67:19)
10    at Object.createHash (node:crypto:130:10)
11    at BulkUpdateDecorator.hashFactory (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138971:18)
12    at BulkUpdateDecorator.update (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138872:50)
13    at OriginalSource.updateHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack-sources3\index.js:1:10264)
14    at NormalModule._initBuildHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68468:17)
15    at handleParseResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68534:10)
16    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68628:4
17    at processResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68343:11)
18    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68407:5
19Error: error:0308010C:digital envelope routines::unsupported
20    at new Hash (node:internal/crypto/hash:67:19)
21    at Object.createHash (node:crypto:130:10)
22    at BulkUpdateDecorator.hashFactory (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138971:18)
23    at BulkUpdateDecorator.update (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138872:50)
24    at OriginalSource.updateHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack-sources3\index.js:1:10264)
25    at NormalModule._initBuildHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68468:17)
26    at handleParseResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68534:10)
27    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68628:4
28    at processResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68343:11)
29    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68407:5
30node:internal/crypto/hash:67
31  this[kHandle] = new _Hash(algorithm, xofLen);
32                  ^
33
34Error: error:0308010C:digital envelope routines::unsupported
35    at new Hash (node:internal/crypto/hash:67:19)
36    at Object.createHash (node:crypto:130:10)
37    at BulkUpdateDecorator.hashFactory (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138971:18)
38    at BulkUpdateDecorator.update (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138872:50)
39    at OriginalSource.updateHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack-sources3\index.js:1:10264)
40    at NormalModule._initBuildHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68468:17)
41    at handleParseResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68534:10)
42    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68628:4
43    at processResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68343:11)
44    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68407:5 {
45  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
46  library: 'digital envelope routines',
47  reason: 'unsupported',
48  code: 'ERR_OSSL_EVP_UNSUPPORTED'
49}
50
51Node.js v17.0.1
52{
53  "name": "devto-clone",
54  "version": "0.1.0",
55  "private": true,
56  "scripts": {
57    "dev": "next dev",
58    "build": "next build",
59    "start": "next start",
60    "lint": "next lint"
61  },
62  "dependencies": {
63    "next": "11.1.2",
64    "react": "17.0.2",
65    "react-dom": "17.0.2"
66  },
67  "devDependencies": {
68    "eslint": "7.32.0",
69    "eslint-config-next": "11.1.2"
70  }
71}
72

ANSWER

Answered 2021-Nov-24 at 21:38

I found this solution https://github.com/webpack/webpack/issues/14532

  1. if using bash just run NODE_OPTIONS=--openssl-legacy-provider before any command

  2. adding NODE_OPTIONS=--openssl-legacy-provider to package.json

1$ npm run dev
2
3> devto-clone@0.1.0 dev
4> next dev
5
6ready - started server on 0.0.0.0:3000, url: http://localhost:3000
7info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
8Error: error:0308010C:digital envelope routines::unsupported
9    at new Hash (node:internal/crypto/hash:67:19)
10    at Object.createHash (node:crypto:130:10)
11    at BulkUpdateDecorator.hashFactory (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138971:18)
12    at BulkUpdateDecorator.update (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138872:50)
13    at OriginalSource.updateHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack-sources3\index.js:1:10264)
14    at NormalModule._initBuildHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68468:17)
15    at handleParseResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68534:10)
16    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68628:4
17    at processResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68343:11)
18    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68407:5
19Error: error:0308010C:digital envelope routines::unsupported
20    at new Hash (node:internal/crypto/hash:67:19)
21    at Object.createHash (node:crypto:130:10)
22    at BulkUpdateDecorator.hashFactory (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138971:18)
23    at BulkUpdateDecorator.update (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138872:50)
24    at OriginalSource.updateHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack-sources3\index.js:1:10264)
25    at NormalModule._initBuildHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68468:17)
26    at handleParseResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68534:10)
27    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68628:4
28    at processResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68343:11)
29    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68407:5
30node:internal/crypto/hash:67
31  this[kHandle] = new _Hash(algorithm, xofLen);
32                  ^
33
34Error: error:0308010C:digital envelope routines::unsupported
35    at new Hash (node:internal/crypto/hash:67:19)
36    at Object.createHash (node:crypto:130:10)
37    at BulkUpdateDecorator.hashFactory (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138971:18)
38    at BulkUpdateDecorator.update (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:138872:50)
39    at OriginalSource.updateHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack-sources3\index.js:1:10264)
40    at NormalModule._initBuildHash (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68468:17)
41    at handleParseResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68534:10)
42    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68628:4
43    at processResult (C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68343:11)
44    at C:\xampp\htdocs\devto-clone\node_modules\next\dist\compiled\webpack\bundle5.js:68407:5 {
45  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
46  library: 'digital envelope routines',
47  reason: 'unsupported',
48  code: 'ERR_OSSL_EVP_UNSUPPORTED'
49}
50
51Node.js v17.0.1
52{
53  "name": "devto-clone",
54  "version": "0.1.0",
55  "private": true,
56  "scripts": {
57    "dev": "next dev",
58    "build": "next build",
59    "start": "next start",
60    "lint": "next lint"
61  },
62  "dependencies": {
63    "next": "11.1.2",
64    "react": "17.0.2",
65    "react-dom": "17.0.2"
66  },
67  "devDependencies": {
68    "eslint": "7.32.0",
69    "eslint-config-next": "11.1.2"
70  }
71}
72"scripts": {
73   "start": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
74   "build": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build"
75 },
76

Edit

In my case, I'm using Nodejs 17.0.1 version and causing this error.

Firstly I'm using this command export NODE_OPTIONS=--openssl-legacy-provider before any command in GitBash Windows to fix this issue.

But, I think it's not an efficient way, so what I do is :

  1. Uninstall Nodejs 17.0.1
  2. Install it again Nodejs 16.13.0 version
  3. I'm facing error another error when I start the server using "yarn serve" (another of my exiting Vuejs project), I don't remember what is this, but after I run "yarn" and "yarn serve", everything works now as I accept

Source https://stackoverflow.com/questions/69719601

QUESTION

Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack:

Asked 2022-Feb-26 at 09:58

I have webpack-cli installed on my laravel project. I don't know why first of all we need it to run my vue app but this is causing an error:

When I run npm run dev or npm run hot

1[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
2Require stack:
3- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js
4- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin.js
5- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\index.js
6- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\Vue.js
7- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\ComponentRegistrar.js
8- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\Mix.js
9- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\setup\webpack.config.js
10- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\webpack-cli.js
11- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\bootstrap.js
12- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\bin\cli.js
13- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack\bin\webpack.js
14    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
15    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
16    at Module.require (internal/modules/cjs/loader.js:974:19)
17    at require (internal/modules/cjs/helpers.js:93:18)
18    at Object.<anonymous> (C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
19    at Module._compile (internal/modules/cjs/loader.js:1085:14)
20    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
21    at Module.load (internal/modules/cjs/loader.js:950:32)
22    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
23    at Module.require (internal/modules/cjs/loader.js:974:19) {
24  code: 'MODULE_NOT_FOUND',
25  requireStack: [
26    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
27    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin.js',
28    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\index.js',
29    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\Vue.js',
30    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
31    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\Mix.js',
32    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\setup\\webpack.config.js',
33    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
34    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\bootstrap.js',
35    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\bin\\cli.js',
36    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack\\bin\\webpack.js'
37  ]
38}
39

Vue is installed also vue-loader, can't understand why it can't find those files. Also, I looked at the node_modules everything is in there ...

ANSWER

Answered 2021-Dec-20 at 09:04

You need to update your vue-loader

1[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
2Require stack:
3- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js
4- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin.js
5- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\index.js
6- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\Vue.js
7- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\ComponentRegistrar.js
8- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\Mix.js
9- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\setup\webpack.config.js
10- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\webpack-cli.js
11- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\bootstrap.js
12- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\bin\cli.js
13- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack\bin\webpack.js
14    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
15    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
16    at Module.require (internal/modules/cjs/loader.js:974:19)
17    at require (internal/modules/cjs/helpers.js:93:18)
18    at Object.<anonymous> (C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
19    at Module._compile (internal/modules/cjs/loader.js:1085:14)
20    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
21    at Module.load (internal/modules/cjs/loader.js:950:32)
22    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
23    at Module.require (internal/modules/cjs/loader.js:974:19) {
24  code: 'MODULE_NOT_FOUND',
25  requireStack: [
26    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
27    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin.js',
28    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\index.js',
29    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\Vue.js',
30    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
31    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\Mix.js',
32    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\setup\\webpack.config.js',
33    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
34    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\bootstrap.js',
35    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\bin\\cli.js',
36    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack\\bin\\webpack.js'
37  ]
38}
39npm update vue-loader
40

And if it is not installed, install it

1[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
2Require stack:
3- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js
4- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin.js
5- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\index.js
6- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\Vue.js
7- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\ComponentRegistrar.js
8- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\Mix.js
9- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\setup\webpack.config.js
10- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\webpack-cli.js
11- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\bootstrap.js
12- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\bin\cli.js
13- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack\bin\webpack.js
14    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
15    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
16    at Module.require (internal/modules/cjs/loader.js:974:19)
17    at require (internal/modules/cjs/helpers.js:93:18)
18    at Object.<anonymous> (C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
19    at Module._compile (internal/modules/cjs/loader.js:1085:14)
20    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
21    at Module.load (internal/modules/cjs/loader.js:950:32)
22    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
23    at Module.require (internal/modules/cjs/loader.js:974:19) {
24  code: 'MODULE_NOT_FOUND',
25  requireStack: [
26    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
27    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin.js',
28    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\index.js',
29    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\Vue.js',
30    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
31    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\Mix.js',
32    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\setup\\webpack.config.js',
33    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
34    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\bootstrap.js',
35    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\bin\\cli.js',
36    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack\\bin\\webpack.js'
37  ]
38}
39npm update vue-loader
40npm i vue-loader
41

Source https://stackoverflow.com/questions/69631437

QUESTION

TypeError: match.loader.options.plugins is not a function

Asked 2022-Feb-24 at 05:03

I am trying to use tailwindCSS in a ReactJS app

These are the scripts commands in package.json file

1  "scripts": {
2    "start": "craco start",
3    "build": "craco build",
4    "test": "craco test",
5    "eject": "react-scripts eject"
6  }
7

This is my craco.config.js

1  "scripts": {
2    "start": "craco start",
3    "build": "craco build",
4    "test": "craco test",
5    "eject": "react-scripts eject"
6  }
7module.exports = {
8    style: {
9        postcss: {
10            plugins: [
11                require('tailwindcss'),
12                require('autoprefixer'),
13            ],
14        },
15    },
16}
17

When I am used npm run start command, I am facing this error

1  "scripts": {
2    "start": "craco start",
3    "build": "craco build",
4    "test": "craco test",
5    "eject": "react-scripts eject"
6  }
7module.exports = {
8    style: {
9        postcss: {
10            plugins: [
11                require('tailwindcss'),
12                require('autoprefixer'),
13            ],
14        },
15    },
16}
17TypeError: match.loader.options.plugins is not a function
18    at extendsPostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:54:51)
19    at overrideLoader (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:97:9)
20    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:118:13
21    at Array.forEach (<anonymous>)
22    at overridePostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:117:17)
23    at overrideStyle (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\style.js:9:25)
24    at mergeWebpackConfig (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\merge-webpack-config.js:77:30)
25    at overrideWebpackDev (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\override.js:11:36)
26    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\scripts\start.js:27:5
27

Things that I have tried :

  1. Reinstall node_modules

Got this error, when I tried to do that

1  "scripts": {
2    "start": "craco start",
3    "build": "craco build",
4    "test": "craco test",
5    "eject": "react-scripts eject"
6  }
7module.exports = {
8    style: {
9        postcss: {
10            plugins: [
11                require('tailwindcss'),
12                require('autoprefixer'),
13            ],
14        },
15    },
16}
17TypeError: match.loader.options.plugins is not a function
18    at extendsPostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:54:51)
19    at overrideLoader (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:97:9)
20    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:118:13
21    at Array.forEach (<anonymous>)
22    at overridePostcss (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\postcss.js:117:17)
23    at overrideStyle (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\style\style.js:9:25)
24    at mergeWebpackConfig (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\merge-webpack-config.js:77:30)
25    at overrideWebpackDev (C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\lib\features\webpack\override.js:11:36)
26    at C:\Development\Open Source\Learning Hub\react\node_modules\@craco\craco\scripts\start.js:27:5
27$ npm i @craco/craco
28npm ERR! code ERESOLVE
29npm ERR! ERESOLVE unable to resolve dependency tree
30npm ERR!
31npm ERR! While resolving: first-react-app@0.1.0
32npm ERR! Found: react-scripts@5.0.0
33npm ERR! node_modules/react-scripts
34npm ERR!   react-scripts@"5.0.0" from the root project
35npm ERR!
36npm ERR! Could not resolve dependency:
37npm ERR! peer react-scripts@"^4.0.0" from @craco/craco@6.4.3
38npm ERR! node_modules/@craco/craco
39npm ERR!   @craco/craco@"*" from the root project
40npm ERR!
41npm ERR! Fix the upstream dependency conflict, or retry
42npm ERR! this command with --force, or --legacy-peer-deps
43npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
44

ANSWER

Answered 2021-Dec-18 at 22:00

It looks like the Tailwind configuration from CRACO is not needed anymore.

https://github.com/facebook/create-react-app/issues/11771#issuecomment-997217680

Look at Tailwind 3.0 install steps: https://tailwindcss.com/docs/guides/create-react-app

Source https://stackoverflow.com/questions/70403417

QUESTION

Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported

Asked 2022-Feb-13 at 06:31

Currently I'm using "react": "17.0.2" and I have installed "react-markdown": "^7.0.1" via npm i react-markdown I'm using this package to display my rich text that I'm fetching from my Strapi CMS. I have used the following code to display the content:

1import ReactMarkdown from "react-markdown";
2
3export default function name({ posts }) {
4  return (
5    <>
6      <div>
7        <div>
8          {posts.Title}
9        </div>
10      </div>
11      <div>
12        <ReactMarkdown source={posts.Content} escapeHtml={false} />
13      </div>
14    </>
15  );
16}
17
18export async function getStaticProps() {
19  const res = await fetch("http://localhost:1337/blogs");
20  const posts = await res.json();
21
22  return {
23    props: { posts },
24  };
25}
26

But when I run this it gives me the following error:

enter image description here

I'm using node v14.17.0 and have tried adding "type": "module".

My package.json:

1import ReactMarkdown from "react-markdown";
2
3export default function name({ posts }) {
4  return (
5    <>
6      <div>
7        <div>
8          {posts.Title}
9        </div>
10      </div>
11      <div>
12        <ReactMarkdown source={posts.Content} escapeHtml={false} />
13      </div>
14    </>
15  );
16}
17
18export async function getStaticProps() {
19  const res = await fetch("http://localhost:1337/blogs");
20  const posts = await res.json();
21
22  return {
23    props: { posts },
24  };
25}
26{
27  "name": "passportlegacy",
28  "version": "0.1.0",
29  "private": true,
30  "scripts": {
31    "dev": "next dev",
32    "build": "next build",
33    "start": "next start",
34    "lint": "next lint"
35  },
36  "dependencies": {
37    "axios": "^0.21.1",
38    "babel-plugin-inline-react-svg": "^2.0.1",
39    "next": "11.0.1",
40    "next-images": "^1.8.1",
41    "react": "17.0.2",
42    "react-dom": "17.0.2",
43    "react-map-gl": "^6.1.16",
44    "react-markdown": "^7.0.1",
45  },
46  "devDependencies": {
47    "@svgr/webpack": "^5.5.0",
48    "@types/react": "17.0.16",
49    "eslint": "7.32.0",
50    "eslint-config-next": "11.0.1",
51    "typescript": "4.3.5"
52  }
53}
54

ANSWER

Answered 2021-Sep-01 at 10:23

Node is currently treating your .js file as CommonJS. You need to tell Node to treat it as an ES module.

Try adding "type": "module" in your package.json file.

You can place it anywhere at the top level. E.g.:

1import ReactMarkdown from "react-markdown";
2
3export default function name({ posts }) {
4  return (
5    <>
6      <div>
7        <div>
8          {posts.Title}
9        </div>
10      </div>
11      <div>
12        <ReactMarkdown source={posts.Content} escapeHtml={false} />
13      </div>
14    </>
15  );
16}
17
18export async function getStaticProps() {
19  const res = await fetch("http://localhost:1337/blogs");
20  const posts = await res.json();
21
22  return {
23    props: { posts },
24  };
25}
26{
27  "name": "passportlegacy",
28  "version": "0.1.0",
29  "private": true,
30  "scripts": {
31    "dev": "next dev",
32    "build": "next build",
33    "start": "next start",
34    "lint": "next lint"
35  },
36  "dependencies": {
37    "axios": "^0.21.1",
38    "babel-plugin-inline-react-svg": "^2.0.1",
39    "next": "11.0.1",
40    "next-images": "^1.8.1",
41    "react": "17.0.2",
42    "react-dom": "17.0.2",
43    "react-map-gl": "^6.1.16",
44    "react-markdown": "^7.0.1",
45  },
46  "devDependencies": {
47    "@svgr/webpack": "^5.5.0",
48    "@types/react": "17.0.16",
49    "eslint": "7.32.0",
50    "eslint-config-next": "11.0.1",
51    "typescript": "4.3.5"
52  }
53}
54{
55  "name": "passportlegacy",
56  "version": "0.1.0",
57  "type": "module",
58  "private": true,
59  "scripts": {
60    ...
61  }
62  ...
63}
64

Source https://stackoverflow.com/questions/69008215

Community Discussions contain sources that include Stack Exchange Network

Tutorials and Learning Resources in Webpack

Tutorials and Learning Resources are not available at this moment for Webpack

Share this Page

share link

Get latest updates on Webpack