search

uiwjs / next-remove-imports

The default behavior is to remove all .less/.css/.scss/.sass/.styl imports from all packages in node_modules.
https://uiwjs.github.io/next-remove-imports/
MIT License
17 stars 2 forks source link

[bug] failed to remove Library CSS imports with PNPM #5

Open TechQuery opened 1 year ago

TechQuery commented 1 year ago

Related Library

https://github.com/idea2app/Idea-React

Reproduce Scaffold

idea2app/Next-Bootstrap-ts#13

Next.js configuration

const withLess = require('next-with-less'),
  withoutCSSImport = require('next-remove-imports'),
  withPWA = require('next-pwa');

const { NODE_ENV } = process.env;

/** @type {import('next').NextConfig} */
module.exports = withPWA({
  ...withLess({
    reactStrictMode: true,
  }),
  ...withoutCSSImport(),
  pwa: {
    dest: 'public',
    register: true,
    skipWaiting: true,
    disable: NODE_ENV === 'development',
  },
});

Environment

@uiwjs

jaywcjlove commented 1 year ago
image

https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?from-embed=&file=/package.json @TechQuery

TechQuery commented 1 year ago

@jaywcjlove I know what the MVP looks like, and I followed the document's way to configure my project, but it failed with the official error:

info  - Creating an optimized production build
Failed to compile.

./node_modules/.pnpm/idea-react@0.26.7_xvmvhqrecqn36a4jhoxc6tew7a/node_modules/idea-react/dist/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules\.pnpm\idea-react@0.26.7_xvmvhqrecqn36a4jhoxc6tew7a\node_modules\idea-react\dist\index.js

Import trace for requested module:
./node_modules/.pnpm/idea-react@0.26.7_xvmvhqrecqn36a4jhoxc6tew7a/node_modules/idea-react/dist/index.js
./pages/component.tsx

./node_modules/.pnpm/idea-react@0.26.7_xvmvhqrecqn36a4jhoxc6tew7a/node_modules/idea-react/dist/index.css
Module build failed: Error: Final loader (./node_modules/.pnpm/next@12.2.5_sfoxds7t5ydpegc3knd667wn6m/node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String
    at processResult (D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\next@12.2.5_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\compiled\webpack\bundle5.js:57340:17)
    at D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\next@12.2.5_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\compiled\webpack\bundle5.js:57426:5
    at D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\next@12.2.5_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\compiled\webpack\bundle5.js:21091:3
    at iterateNormalLoaders (D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\next@12.2.5_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\compiled\webpack\bundle5.js:20917:10)
    at iterateNormalLoaders (D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\next@12.2.5_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\compiled\webpack\bundle5.js:20924:10)
    at D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\next@12.2.5_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\compiled\webpack\bundle5.js:20939:3
    at runSyncOrAsync (D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\next@12.2.5_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\compiled\webpack\bundle5.js:20822:12)
    at iterateNormalLoaders (D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\next@12.2.5_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\compiled\webpack\bundle5.js:20935:2)
    at D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\next@12.2.5_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\compiled\webpack\bundle5.js:20908:4
    at D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\next@12.2.5_sfoxds7t5ydpegc3knd667wn6m\node_modules\next\dist\compiled\webpack\bundle5.js:57400:15
jaywcjlove commented 1 year ago

image

@TechQuery I'm not sure if this is caused by using pnpm.

jaywcjlove commented 1 year ago

https://github.com/pnpm/pnpm/issues/1993

https://github.com/uiwjs/next-remove-imports/blob/ac963aaf8e9412d1475448ca566836830adb7663/index.js#L13

jaywcjlove commented 1 year ago
jaywcjlove commented 1 year ago

Not sure if that solves your problem. @TechQuery Upgrade v1.0.7

TechQuery commented 1 year ago

@jaywcjlove Same error, even I reinstall all packages after removing node_modules & pnpm-lock.yaml.

jaywcjlove commented 1 year ago

I've never used pnpm, so I don't know if it can solve your problem.

I ran it with yarn v1.22.10 and it worked. @TechQuery

TechQuery commented 1 year ago

@jaywcjlove I was a Yarn 1.x user, but NPM & Yarn occupied 60GB+ disk space, PNPM saves me.

jaywcjlove commented 1 year ago

image

I tested it with no problem. @TechQuery

TechQuery commented 1 year ago

image

I tested it with no problem. @TechQuery

@jaywcjlove http://localhost:3000/component will show you the error.

jaywcjlove commented 1 year ago

https://github.com/pnpm/pnpm/blob/30e7e65238175ef996e5e113583447a2a99a5d22/packages/exe/setup.js#L11-L12

https://github.com/pnpm/pnpm/issues/991

I've researched it, but I don't think it can be solved. You can refer to other people's solutions.

https://github.com/pnpm/pnpm/search?q=require.resolve&type=issues

@TechQuery

TechQuery commented 1 year ago

@jaywcjlove https://pnpm.io/npmrc#node-linker mentioned in https://github.com/pnpm/pnpm/issues/991#issuecomment-1120101531 failed to resolve this error too...

TechQuery commented 1 year ago

@jaywcjlove I roll back to Yarn 1.x, but the error is still there... https://github.com/idea2app/Next-Bootstrap-ts/pull/13/commits/d8fbc7c62ffed6d085b35f805743ec018637ed1c

jaywcjlove commented 1 year ago

@TechQuery 

- const removeImports = require('next-remove-imports');
+ const removeImports = require('next-remove-imports')();
TechQuery commented 1 year ago

@jaywcjlove 

- const removeImports = require('next-remove-imports');
+ const removeImports = require('next-remove-imports')();

It worked in Development mode, but still failed in Building mode:

[BABEL] Note: The code generator has deoptimised the styling of D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\lodash@4.17.21\node_modules\lodash\lodash.js as it exceeds the max of 500KB.
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data .D:\Work\idea2app\Next-Bootstrap-TS\node_modules\.pnpm\idea-react@0.26.7_xvmvhqrecqn36a4jhoxc6tew7a\node_modules\idea-react\dist\index.umd.css:1

SyntaxError: Unexpected token '.'

> Build error occurred
Error: Failed to collect page data for /component

Code diff is here: https://github.com/idea2app/Next-Bootstrap-ts/pull/13/commits/d2207f814e88be74ad93fc89d67eeabb42696075

jaywcjlove commented 1 year ago

image

image

Is there a cache problem?

I'm running fine.

@TechQuery

TechQuery commented 1 year ago

@jaywcjlove It throws a same error after removing .next folder and re-building.

Vercel building failed as well: https://github.com/idea2app/Next-Bootstrap-ts/runs/7980212322?check_suite_focus=true

So, only Mac OS X works, not Windows & Linux?

jaywcjlove commented 1 year ago

@TechQuery I am not sure. I cloned the project again and deleted the cache directory:

rm -rf ~/.pnpm-st*
TechQuery commented 1 year ago

@jaywcjlove Same error in building after removing .pnpm-store & re-installing.

Development mode always works while the configuration is correct.

jaywcjlove commented 1 year ago

:(

TechQuery commented 1 year ago

@jaywcjlove Now I roll back to Yarn 1.x or NPM 6.x, React 17/18 type compatibility errors thrown:

Type 'React.ReactNode' is not assignable to type 'import("D:/Work/idea2app/Next-Bootstrap-TS/node_modules/@types/ react-transition-group/node_modules/@types/react/index").ReactNode'.

After I used @ts-ignore, CSS building error above thrown again...

I think it may be OS Path compatibility problem.