Introduction
In this article, the main focus is just to solve an error message which is appear upon starting a React JS application. The following is the execution of the the command for starting the React JS application :
C:\app_react>npm start
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
> app_react@0.1.0 start
> env-cmd -f .env react-scripts start
node:internal/modules/cjs/loader:489
throw e;
^
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in C:\app_react\node_modules\postcss-safe-parser\node_modules\postcss\package.json
at new NodeError (node:internal/errors:377:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)
at packageExportsResolve (node:internal/modules/esm/resolve:719:3)
at resolveExports (node:internal/modules/cjs/loader:483:36)
at Module._findPath (node:internal/modules/cjs/loader:523:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:925:27)
at Module._load (node:internal/modules/cjs/loader:780:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (C:\app_react\node_modules\postcss-safe-parser\lib\safe-parser.js:1:17) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
How to Solve Error Message [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath ‘./lib/tokenize’ is not defined by “exports”
Upon execution of the React JS application, the above error message has a proper solution for further error handling. Furthermore, several alternative solutions is already exist in an article in this link. So, using the solution exist in the link, below is the execution of several sequence actions from the link as reference. So, handling the above matter need several sequence actions. The following is the sequence actions :
-
First of all, taking an attempt by trying to remove the available node_modules folder in the root folder of the React JS application. Below is the original structure :
C:\app_react>dir Volume in drive C is Windows-SSD Volume Serial Number is CA30-19A4 Directory of C:\app_react 08/16/2022 10:02 AM <DIR> . 08/16/2022 06:19 AM <DIR> .. 08/16/2022 10:12 AM <DIR> node_modules 08/16/2022 09:58 AM 1,484,785 package-lock.json 08/16/2022 10:12 AM 2,079 package.json 08/16/2022 06:20 AM <DIR> public 08/16/2022 06:20 AM 3,432 README.md 08/16/2022 06:20 AM <DIR> src 08/16/2022 06:20 AM 519,702 yarn-error.log 08/16/2022 10:02 AM 600,451 yarn.lock 8 File(s) 2,616,848 bytes 6 Dir(s) 87,295,000,576 bytes free C:\app_react>
-
Next, remove the yarn.lock file as it exist in the previous directory listing. It is available in the root folder of the React JS application.
-
After that, just install ‘yarn’ by typing the following command :
C:\app_react>yarn install yarn install v1.22.19 info No lockfile found. warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... warning firebase > @firebase/polyfill > core-js@3.6.5: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. warning react-scripts > babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates. warning react-scripts > webpack-dev-server > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies warning react-scripts > webpack-dev-server > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. warning react-scripts > workbox-webpack-plugin > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated warning react-scripts > workbox-webpack-plugin > workbox-build > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x. warning react-scripts > @pmmmwh/react-refresh-webpack-plugin > native-url > querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. warning react-scripts > webpack-dev-server > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi@15.1.1: Switch to 'npm install joi' warning react-scripts > workbox-webpack-plugin > workbox-build > rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel. warning react-scripts > webpack-dev-server > webpack-log > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility warning react-scripts > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies warning react-scripts > webpack > micromatch > snapdragon > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated warning react-scripts > resolve-url-loader > rework > css > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated warning react-scripts > webpack > micromatch > snapdragon > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated warning react-scripts > babel-jest > @jest/transform > jest-haste-map > sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added warning react-scripts > optimize-css-assets-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x. warning react-scripts > postcss-preset-env > postcss-color-gray > postcss-values-parser > flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash. warning react-scripts > resolve-url-loader > rework > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated warning react-scripts > webpack > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/address@2.1.4: Moved to 'npm install @sideway/address' warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained warning react-scripts > workbox-webpack-plugin > workbox-build > @hapi/joi > @hapi/topo > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained warning react-scripts > webpack > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated warning react-scripts > workbox-webpack-plugin > workbox-build > strip-comments > babel-plugin-transform-object-rest-spread > babel-runtime > core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. [2/4] Fetching packages... [3/4] Linking dependencies... warning " > @testing-library/user-event@12.8.3" has unmet peer dependency "@testing-library/dom@>=7.21.4". warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta". warning "react-select > @emotion/react > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0". warning "react-select > @emotion/react > @emotion/babel-plugin@11.10.0" has unmet peer dependency "@babel/core@^7.0.0". warning " > styled-components@5.3.5" has unmet peer dependency "react-is@>= 16.8.0". [4/4] Building fresh packages... success Saved lockfile. Done in 239.57s. C:\app_react>
-
Following after, just run the application back by typing ‘npm start’. Actually if there are no other further error message, the following output will appear :
C:\app_react>npm start npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. > app_react@0.1.0 start > env-cmd -f .env react-scripts start i ｢wds｣: Project is running at http://0.0.0.0:3000/ i ｢wds｣: webpack output is served from i ｢wds｣: Content not from webpack is served from C:\app_react i ｢wds｣: 404s will fallback to / Starting the development server...