Tag Archives: webpack

ArcGIS API for JavaScript version 4. X updated and the project startup error: Module parse failed: Unexpected token(… …

 

Question:

When using the project created by vue and webpack, after the ArcGIS API for JavaScript 4. X is upgraded from a lower version to a higher version, problems occur in building the project:

Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type…

error  in ./node_modules/@arcgis/core/views/3d/layers/SceneLayerWorker.js
Module parse failed: Unexpected token (5:673)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| See https://js.arcgis.com/4.24/esri/copyright.txt for details.
| */

Reason:

The new version of the ArcGIS API references the new version of ES2020 optional chaining and nullish coalescing, resulting in parsing errors in the old version of Webpack, so you need to install the appropriate dependencies or upgrade the framework.

Solution:

1. Download Dependencies

Download the corresponding dependencies through the command

npm install -D @babel/core @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining babel-loader

Or add the following codes in package.json, and then initialize npm install

 "@babel/core": "^7.18.9",
 "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
 "@babel/plugin-proposal-optional-chaining": "^7.18.9",
 "babel-loader": "^8.2.5",

2. Add Configuration

Find the webpack.config.js file and add the following codes below

   module: {
     rules: [
       {
         test: /\.m?js$/,
         exclude: {
           and: [/node_modules/],
           not: [/@arcgis[\\/]core/]
         },
         use: {
           loader: "babel-loader",
           options: {
             plugins: [
               ["@babel/plugin-proposal-nullish-coalescing-operator", { loose: true }],
               ["@babel/plugin-proposal-optional-chaining", { loose: true }]
             ]
           }
         }
       }
     ]
   }

Note: If your project is using the vue1 framework, i.e. you can’t find the webpack.config.js file, then you need to configure the configureWebpack configuration item in the vue.config.js file.

3. Restart the project

Introduce wangeditor5 to run an error: You may need an appropriate loader to handle this file type (es6 compatibility issue)

wangeditor5 Import and Run Error: You may need an appropriate loader to handle this file type (es6 compatibility issues)

Recently upgraded the rich text wangeditor used, I upgraded to the latest version of wangeditor5
Introduced wangeditor5 into the vue project, Starting the project has been reporting errors

You may need an appropriate loader to handle this file type 

At first, I tried many methods but failed to solve it, Later I noticed an error reported in the console, Guess it may be related to the writing method of  (…) in es6, So I will make a specific query later I took a look at the issue of compatibility with es6, I learned that webpack can only process a part of ES6 syntax, some more advanced ES6 syntax cannot be processed,Need to do compatibility processing.

 

Solution

1. Install the babel-polyfill es6-promise package

npm i babel-polyfill es6-promise --save

2. Add the following codes to main.js:

import 'babel-polyfill' //Note: This import should be before import Vue from 'vue'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

3. Add the following codes to webpack.base.conf.js:

module.exports = {
...
     entry: {
     app: ["babel-polyfill", "./src/main .js"]
     },
     ...
}

Because wangeditor5 is a third-party dependency, in node_modules, and babel-polyfill does not detect es6,  in node_modules, we need to add it manually.

Note:If you do not configure es6 compatibility for third-party dependencies,You can ignore the fourth step,You can run the startup project after the third step directly

4. In the webpack.base.conf.js file, modify the configuration of babel-loader, add a configuration item: resolve(‘node_modules/@wangeditor’ )(It needs to be modified according to the third-party dependencies actually introduced)

{
        test: /\.js$/,
        loader: 'babel-loader' ,
        include: [resolve('src'), resolve( 'test'), resolve('node_modules/@wangeditor' ), resolve('node_modules/webpack-dev-server/client')]
      },

Finally restart the project to be successful!

[Solved] error:chunkgroup.addoptions:no option merge strategy for name

“webpack”: “^ 5.72.0” error:

/Users/guojianbo/Documents/xxx/node_modules/webpack/lib/ChunkGroup.js:119
					throw new Error(
					      ^
Error: ChunkGroup.addOptions: No option merge strategy for name
    at Entrypoint.addOptions (/Users/guojianbo/Documents/xxx/node_modules/webpack/lib/ChunkGroup.js:119:12)

Solution:

webpack.config.js
before modification:

module.exports = {
	entry: {
	    'abc-def': "./src/js/abc-def.js",
	    'qwe-rty': "./src/js/qwe-rty.js",
	}
}

After modification

module.exports = {
	entry: {
	    'my-abc-def': "./src/js/abc-def.js",
	    'my-qwe-rty': "./src/js/qwe-rty.js",
	}
}

That is, add a prefix to the entry name to prevent conflicts with the internal chunk names of webpack packages

[Solved] React Dependency Error: Invalid tag name “^np.0.2“ of package “react@^np.0.2“: Tags may not have an

When writing the carousel diagram, you need to install dependencies. Execute the following command. When you execute, you report an error, saying that it is a version problem. After you reduce the version of react, you search the Internet. Later, when you execute NPM install, you report various dependency errors

  npm install --save react-swipeable-views
    npm install --save react-swipeable-views-utils

The following is the error message: read the error message and say it is a problem with the version of the files in node_modules, but there is still an error after trying to change them. I can only ask you for advice.

the following is the package.json file

{
  "name": "react-goodlive-home",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.16.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
    "@svgr/webpack": "^6.3.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "babel-jest": "^27.4.2",
    "babel-loader": "^8.2.3",
    "babel-plugin-named-asset-import": "^0.3.8",
    "babel-preset-react-app": "^10.0.1",
    "bfj": "^7.0.2",
    "browserslist": "^4.18.1",
    "camelcase": "^6.2.1",
    "case-sensitive-paths-webpack-plugin": "^2.4.0",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.2.0",
    "dotenv": "^10.0.0",
    "dotenv-expand": "^5.1.0",
    "eslint": "^8.3.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "fs-extra": "^10.0.0",
    "html-webpack-plugin": "^5.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.4.3",
    "jest-resolve": "^27.4.2",
    "jest-watch-typeahead": "^1.0.0",
    "mini-css-extract-plugin": "^2.4.5",
    "postcss": "^8.4.4",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-loader": "^6.2.1",
    "postcss-normalize": "^10.0.1",
    "postcss-preset-env": "^7.0.1",
    "prompts": "^2.4.2",
    "react": "^17.0.2",
    "react-app-polyfill": "^3.0.0",
    "react-dev-utils": "^12.0.1",
    "react-dom": "^17.0.2",
    "react-refresh": "^0.11.0",
    "react-router-dom": "^6.3.0",
    "resolve": "^1.20.0",
    "resolve-url-loader": "^4.0.0",
    "sass-loader": "^12.3.0",
    "semver": "^7.3.5",
    "source-map-loader": "^3.0.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.2",
    "terser-webpack-plugin": "^5.2.5",
    "web-vitals": "^2.1.4",
    "webpack": "^5.64.4",
    "webpack-dev-server": "^4.6.0",
    "webpack-manifest-plugin": "^4.0.2",
    "workbox-webpack-plugin": "^6.4.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom",
    "transform": {
      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ],
    "resetMocks": true
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "devDependencies": {
    "less": "^4.1.3",
    "less-loader": "^6.0.0"
  }
}

Solution:

The dependent (@testing-library/react) version is relatively low, and it is useless. Just delete it and restart your computer.

Here is the package.json file after you solved the error

{
  "name": "@testing-library/jest-dom",
  "version": "5.16.5",
  "description": "Custom jest matchers to test the state of the DOM",
  "main": "dist/index.js",
  "engines": {
    "node": ">=8",
    "npm": ">=6",
    "yarn": ">=1"
  },
  "scripts": {
    "build": "kcd-scripts build",
    "format": "kcd-scripts format",
    "lint": "kcd-scripts lint",
    "setup": "npm install && npm run validate -s",
    "test": "kcd-scripts test",
    "test:update": "npm test -- --updateSnapshot --coverage",
    "validate": "kcd-scripts validate"
  },
  "files": [
    "dist",
    "extend-expect.js",
    "matchers.js"
  ],
  "keywords": [
    "testing",
    "dom",
    "jest",
    "jsdom"
  ],
  "author": "Ernesto Garcia <[email protected]> (http://gnapse.github.io)",
  "license": "MIT",
  "dependencies": {
    "@babel/runtime": "^7.9.2",
    "@types/testing-library__jest-dom": "^5.9.1",
    "aria-query": "^5.0.0",
    "chalk": "^3.0.0",
    "@adobe/css-tools": "^4.0.1",
    "css.escape": "^1.5.1",
    "dom-accessibility-api": "^0.5.6",
    "lodash": "^4.17.15",
    "redent": "^3.0.0"
  },
  "devDependencies": {
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "jest-watch-select-projects": "^2.0.0",
    "jsdom": "^16.2.1",
    "kcd-scripts": "^11.1.0",
    "pretty-format": "^25.1.0"
  },
  "eslintConfig": {
    "extends": "./node_modules/kcd-scripts/eslint.js",
    "rules": {
      "@babel/no-invalid-this": "off"
    },
    "overrides": [
      {
        "files": [
          "src/__tests__/*.js"
        ],
        "rules": {
          "max-lines-per-function": "off"
        }
      }
    ]
  },
  "eslintIgnore": [
    "node_modules",
    "coverage",
    "dist"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/testing-library/jest-dom"
  },
  "bugs": {
    "url": "https://github.com/testing-library/jest-dom/issues"
  },
  "homepage": "https://github.com/testing-library/jest-dom#readme"
}

[Solved] npm install Error: error code ERR_SOCKET_TIMEOUT

1. Error information

New project, Vue + element, NPM install, The error information reported at that time is as follows.

error code ERR_SOCKET_TIMEOUT
9673 error network Socket timeout
9674 error network This is a problem related to network connectivity.
9674 error network In most cases you are behind a proxy or have bad network settings.
9674 error network
9674 error network If you are behind a proxy, please make sure that the
9674 error network 'proxy' config is set properly.  See: 'npm help config'
9675 verbose exit 1
9676 timing npm Completed in 545124ms
9677 verbose unfinished npm timer reify 1661242562981
9678 verbose unfinished npm timer reify:unpack 1661242811008
9679 verbose unfinished npm timer reifyNode:node_modules/svgo 1661242811170
9680 verbose code 1

2. Solutions

//Step 1


npm install webpack webpack-cli --global



//Step 2
npm install rxjs



//Step 3
npm install webpack webpack-cli --global



//Finally, direct boot success
npm run dev 

 

ERROR Error: [copy-webpack-plugin] patterns must be an array

ERROR Error: [copy-webpack-plugin] patterns must be an array

When installing mars3d, you need to install the copy webpack plugin plug-in
and then configure it in vue.config.js report an error: Error: error: [copy webpack plugin] patterns must be an array
the current node version is 12.2.0

const plugins = [
            // Identifies the home directory where cesium resources are located, which is needed for resource loading, multithreading, etc. inside cesium
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
            }),
            // Cesium-related resource directories need to be copied to the system directory (some CopyWebpackPlugin versions may not have patterns in their syntax)
           new CopyWebpackPlugin({
                patterns: [
                { from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
                { from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
                { from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
                { from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
                ]
            })
        ];

new CopyWebpackPlugin is changed as follows:

const plugins = [
            // Identifies the home directory where cesium resources are located, which is needed for resource loading, multithreading, etc. within cesium
         new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
         }),
         new CopyWebpackPlugin([
	        { from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
	        { from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
	        { from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
	        { from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
        ])
 ];

Run successfully

[Solved] Error: error:0308010C:digital envelope routines::unsupported

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

npm run serve error: error:0308010C

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:503:5

Solution:
set NODE_OPTIONS=–openssl-legacy-provider

D:\Item\springboot\vue>set NODE_OPTIONS=--openssl-legacy-provider

D:\Item\springboot\vue>npm run serve

> [email protected] serve
> vue-cli-service serve

It can run successfully

The main reason is the incompatibility of versions

[Solved] vueCli 4.x Upgrade to 5.x Error: Progress Plugin Invalid Options

Running the compile command after upgrading vueCli 4.x to 5.x may result in the following error:

ERROR  ValidationError: Progress Plugin Invalid Options
 
        options should NOT have additional properties
        options should NOT have additional properties
        options should NOT have additional properties
        options should pass "instanceof" keyword validation
        options should match exactly one schema in oneOf

This may be caused by the inconsistency between the locally installed version of webpack and the version of vue-cli.

Solution:

1. Check if the webpack version in node_modules is also upgraded to version 5.x. If not, upgrade to version 5.x.

2. Check if the devServer in vue.config.js has overlay configuration, this configuration will be incompatible in vue-cli 5.x version, you have to remove it, otherwise it will also report an error when running

3. delete the wrong node_modules and package-lock.json

4. Clear npm cache: npm cache clean –force

5. reinstall the dependencies: npm install

 

[Solved] webpack Package Error: ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can‘t resolv

When I first came into contact with webpack, I encountered several problems. After successfully installing the latest version of webpack and cli, there was a problem with the first package. In fact, it was also a syntax error

When running webpack .\src\main.js .\dist\bundle.js and packaging, the following error occurs:

Cause of error:

The latest version of the webpack command has changed

Solution:

Add a -o to the previous command.
run webpack .\src\main.js -o .\dist\bundle.js

[webpack-cli] Error: Cannot find module ‘vue/compiler-sfc‘

[webpack-cli] Error: Cannot find module ‘vue/compiler-sfc‘

An error is reported when webpack packages Vue files

[webpack-cli] Error: Cannot find module 'vue/compiler-sfc'

The reason is that I use vue2, but the version is wrong. The following is the corresponding version
Vue 3 requires Vue-loader V16 + @Vue/compiler-sfc
Vue 2 requires vue-loader v15 + vue-template-compiler.

Solution: downgrade to version 15

$ cnpm i vue-loader@15 -D

[Solved] start value has mixed support, consider using flex-start instead

postcss-loader Error => start value has mixed support, consider using flex-start instead”

Details of error reporting:

 warning  in ./src/views/olympicdataquery/personnellist/personaldetails/personaldetails.vue?vue&type=style&index=0&id=87659618&scoped=true&lang=scss&

Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(97:7) start value has mixed support, consider using flex-start instead

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/olympicdataquery/personnellist/personaldetails/personaldetails.vue?vue&type=style&index=0&id=87659618&scoped=true&lang=scss& 4:14-524 15:3-20:5 16:22-532
 @ ./src/views/olympicdataquery/personnellist/personaldetails/personaldetails.vue?vue&type=style&index=0&id=87659618&scoped=true&lang=scss&
 @ ./src/views/olympicdataquery/personnellist/personaldetails/personaldetails.vue
 @ ./src/views sync ^\.\/.*$
 @ ./src/store/modules/permission.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.78:6206&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Although just a warning, but certainly what is not standardized, chrome, found to be someone else’s css is not written standard: flex layout of justify-content: start; change to justify-content: flex-start; on it, no more problems

Modify as below: