Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update package.json to fix deprecation of "./" #1461

Closed
wants to merge 1 commit into from

Conversation

NeizanSenpai
Copy link

When executing 'ng build --prod' on Angular:
Generating browser application bundles (phase: building)...(node:1188) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at {{PROYECT_PATH}}\node_modules\css-loader\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use node --trace-deprecation ... to show where the warning was created)

When executing 'ng build --prod' on Angular: 
Generating browser application bundles (phase: building)...(node:1188) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at {{PROYECT_PATH}}\node_modules\css-loader\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
@NeizanSenpai
Copy link
Author

Merge this to fix the deprecation on new apps please!

@ai
Copy link
Member

ai commented Nov 17, 2020

This fix does not work on Node.js <= 14. See 8.1.5 and 8.1.6 releases.

Can you give me a way to reproduce the problem? I do not see the warning in Node.js 15. Post a way to reproduce to this issue.

@ai ai closed this Nov 17, 2020
@Neizan93
Copy link

Angular 11 + Node v15

@ai
Copy link
Member

ai commented Nov 18, 2020

Can you create GitHub project when I can reproduce the warning?

@joypoddar
Copy link

joypoddar commented Nov 28, 2020

Here is a repo where the warning occurs. I use yarn package manager.
Newbie alert!

@ai
Copy link
Member

ai commented Nov 29, 2020

I can’t see this warning on Linux with the latest Node.js 15.

state-hooks/state-hooks
➜ node -v
v15.3.0

state-hooks/state-hooks
➜ yarn build
yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.74 KB  build/static/js/2.13fac87d.chunk.js
  1.4 KB    build/static/js/3.e8d53c0a.chunk.js
  1.17 KB   build/static/js/runtime-main.d5304bec.js
  725 B     build/static/js/main.955628b8.chunk.js
  546 B     build/static/css/main.ab7136cd.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Done in 6.10s.
  1. What Node.js version do you use?
  2. What do you do and where do you see the warning?

@joypoddar
Copy link

  1. Node.js version v15.2.1
  2. I have recreated a scenario where I see the warning. Here is the link of the repo created in the process. Both commands yarn start and yarn build shows that error. Take a look below for details.

System information

Edition: Windows 10 Home Single Language
Version: 20H2

PS D:\webdev> npx create-react-app delete

Creating a new React app in D:\webdev\delete.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.2.1: The platform "win32" is incompatible with this module.
info "fsevents@2.2.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" 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".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 6 new dependencies.
info Direct dependencies
├─ cra-template@1.1.1
├─ react-dom@17.0.1
├─ react-scripts@4.0.1
└─ react@17.0.1
info All dependencies
├─ cra-template@1.1.1
├─ react-dev-utils@11.0.1
├─ react-dom@17.0.1
├─ react-scripts@4.0.1
├─ react@17.0.1
└─ scheduler@0.20.1
Done in 11.89s.

Initialized a git repository.

Installing template dependencies using yarnpkg...
yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.2.1: The platform "win32" is incompatible with this module.
info "fsevents@2.2.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" 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 " > @testing-library/user-event@12.3.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 17 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@5.11.6
├─ @testing-library/react@11.2.2
├─ @testing-library/user-event@12.3.0
├─ react-dom@17.0.1
├─ react@17.0.1
└─ web-vitals@0.2.4
info All dependencies
├─ @testing-library/dom@7.28.1
├─ @testing-library/jest-dom@5.11.6
├─ @testing-library/react@11.2.2
├─ @testing-library/user-event@12.3.0
├─ @types/aria-query@4.2.0
├─ @types/jest@26.0.16
├─ @types/testing-library__jest-dom@5.9.5
├─ css.escape@1.5.1
├─ css@3.0.0
├─ dom-accessibility-api@0.5.4
├─ lz-string@1.4.4
├─ min-indent@1.0.1
├─ react-dom@17.0.1
├─ react@17.0.1
├─ redent@3.0.0
├─ strip-indent@3.0.0
└─ web-vitals@0.2.4
Done in 7.35s.
Removing template package using yarnpkg...

yarn remove v1.22.5
[1/2] Removing module cra-template...
[2/2] Regenerating lockfile and installing missing dependencies...
info fsevents@2.2.1: The platform "win32" is incompatible with this module.
info "fsevents@2.2.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/user-event@12.3.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" 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".
success Uninstalled packages.
Done in 5.44s.

Created git commit.

Success! Created delete at D:\webdev\delete
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd delete
  yarn start

Happy hacking!
PS D:\webdev> cd delete
PS D:\webdev\delete> yarn start
yarn run v1.22.5
$ react-scripts start
(node:12516) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at D:\webdev\delete\node_modules\postcss-safe-parser\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
i 「wds」: Project is running at http://192.168.0.104/
i 「wds」: webpack output is served from
i 「wds」: Content not from webpack is served from D:\webdev\delete\public
i 「wds」: 404s will fallback to /
Starting the development server...
Compiled successfully!

You can now view delete in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.104:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

@ai
Copy link
Member

ai commented Dec 2, 2020

Both Node.js 15.3 and 15.2.1 have the same output on Linux:

➜ yarn build
yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.19 KB  build/static/js/2.711c516a.chunk.js
  1.39 KB   build/static/js/3.d2feea4c.chunk.js
  1.16 KB   build/static/js/runtime-main.05303197.js
  587 B     build/static/js/main.139dd313.chunk.js
  531 B     build/static/css/main.8c8b27cf.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Done in 4.19s.

➜ node -v
v15.2.1

Maybe this error happens only on Windows?

@joypoddar can you open node_modules/postcss/package.json and add "./*": "./*" after "./": "./" in exports section?

{
  "name": "postcss",
  "version": "8.1.10",
  "description": "Tool for transforming styles with JS plugins",
  "engines": {
    "node": "^10 || ^12 || >=14"
  },
  "exports": {
    ".": {
      "require": "./lib/postcss.js",
      "import": "./lib/postcss.mjs",
      "types": "./lib/postcss.d.ts"
      "./": "./",
+     "./*": "./*"
    },

And then check the warning again.

@joypoddar
Copy link

I made the suggested change in the node_modules/postcss-safe-parser/node_modules/postcss/package.json file where the error shows up. It subsequently throws another error (given below). I have updated the repo with commit subsequent error
The change

"exports": {
    ".": {
      "require": "./lib/postcss.js",
      "import": "./lib/postcss.mjs",
      "types": "./lib/postcss.d.ts"
    },
    "./": "./",
    "./*": "./*"
  },

Error

PS D:\webdev\delete> yarn start
yarn run v1.22.5
$ react-scripts start
node:internal/modules/cjs/loader:473
      throw e;
      ^

Error: Cannot find module 'D:\webdev\delete\node_modules\postcss-safe-parser\node_modules\postcss\lib\tokenize'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:946:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:939:15)
    at resolveExports (node:internal/modules/cjs/loader:467:14)
    at Function.Module._findPath (node:internal/modules/cjs/loader:507:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:905:27)
    at Function.Module._load (node:internal/modules/cjs/loader:763:27)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (D:\webdev\delete\node_modules\postcss-safe-parser\lib\safe-parser.js:1:17)
    at Module._compile (node:internal/modules/cjs/loader:1102:14) {
  code: 'MODULE_NOT_FOUND',
  path: 'D:\\webdev\\delete\\node_modules\\postcss-safe-parser\\node_modules\\postcss\\package.json'
}
error Command failed with exit code 1.

Note
The file you specified doesn't have an export section. I also tried adding "./*": "./*" in the position you suggested in the above mentioned location. But that throws a linting error.

@Gi-Totev
Copy link

Gi-Totev commented Jul 9, 2021

I made the suggested change in the node_modules/postcss-safe-parser/node_modules/postcss/package.json file where the error shows up. It subsequently throws another error (given below). I have updated the repo with commit subsequent error
The change

"exports": {
    ".": {
      "require": "./lib/postcss.js",
      "import": "./lib/postcss.mjs",
      "types": "./lib/postcss.d.ts"
    },
    "./": "./",
    "./*": "./*"
  },

Error

PS D:\webdev\delete> yarn start
yarn run v1.22.5
$ react-scripts start
node:internal/modules/cjs/loader:473
      throw e;
      ^

Error: Cannot find module 'D:\webdev\delete\node_modules\postcss-safe-parser\node_modules\postcss\lib\tokenize'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:946:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:939:15)
    at resolveExports (node:internal/modules/cjs/loader:467:14)
    at Function.Module._findPath (node:internal/modules/cjs/loader:507:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:905:27)
    at Function.Module._load (node:internal/modules/cjs/loader:763:27)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (D:\webdev\delete\node_modules\postcss-safe-parser\lib\safe-parser.js:1:17)
    at Module._compile (node:internal/modules/cjs/loader:1102:14) {
  code: 'MODULE_NOT_FOUND',
  path: 'D:\\webdev\\delete\\node_modules\\postcss-safe-parser\\node_modules\\postcss\\package.json'
}
error Command failed with exit code 1.

Note
The file you specified doesn't have an export section. I also tried adding "./*": "./*" in the position you suggested in the above mentioned location. But that throws a linting error.

I know I'm a couple of months late but here is what i did in the postcss json file:
"exports": {
".": {
"require": "./lib/postcss.js",
"import": "./lib/postcss.mjs",
"types": "./lib/postcss.d.ts",
"/": "./"
}
note that the /* property doesn't have the . in front of it and that it is inside the "." property

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants