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

Babel has deoptimised the styling #4

Open jesusr00 opened 2 years ago

jesusr00 commented 2 years ago

[BABEL] Note: The code generator has deoptimised the styling of /home/jesusrlm/Projects/coj/COJ.Web.Frontend/node_modules/@mui/icons-material/esm/index.js as it exceeds the max of 500KB.

I am using the package and Material UI.

image

Why I see this behavior? It's an issue?

jaywcjlove commented 2 years ago

@jesusr00 You should go to the @babel organization to ask this question.

Oh, Maybe it is the log typed out by next.js. 😯

szilarddoro commented 2 years ago

This is clearly caused by using next-remove-imports, so it's probably worth a check @jaywcjlove .

jaywcjlove commented 2 years ago

@szilarddoro

jaywcjlove commented 2 years ago

@szilarddoro @jesusr00 Can you provide an example for me to test.

szilarddoro commented 2 years ago

@jaywcjlove - Please find my repository which tries to reproduce these issues: https://github.com/szilarddoro/react-md-editor-demo

Node version: v14.17.0 Yarn version: 1.22.17 @uiw/react-md-editor version: 3.9.3 next-remove-imports version: 1.0.6

You can find configuration for Storybook as well so that you can try it in a normal React environment as well as a Next.js one.

My original repository is a bit more complex (also contains @mui/material, etc.), but in this case I could also reproduce an issue where react-markdown/index.js throws an error regarding ES Module requires, which are obviously not supported. (Note: This can be something that is totally unrelated this issue)

Stack trace:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/to/project/react-md-editor-demo/node_modules/react-markdown/index.js
require() of ES modules is not supported.
require() of /path/to/project/react-md-editor-demo/node_modules/react-markdown/index.js from /path/to/project/react-md-editor-demo/node_modules/@uiw/react-markdown-preview/lib/index.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.
Instead rename /path/to/project/react-md-editor-demo/node_modules/react-markdown/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /path/to/project/react-md-editor-demo/node_modules/react-markdown/package.json.

One of the solutions I could come up with was to use next-transpile-modules and transpile both @uiw/react-md-editor and @uiw/react-markdown-preview packages and also enable the experimental esmExternals configuration of Next.js like this:

const withTM = require('next-transpile-modules')([
  '@uiw/react-md-editor',
  '@uiw/react-markdown-preview',
])

// ... other plugins ...

const nextConfig = {
  // ...other configuration...
  experimental: {
    esmExternals: `loose`
  }
}

module.exports = withTM(nextConfig)

In this case I didn't even need to use next-remove-imports.

I'm happy to help with additional information if you need anything else.

gnovotny commented 1 year ago

I would advise against using this lib, or any of the author's markdown libs for that matter. Or just fork them and remove the bad code practices. It will save you a lot of headache in the long run.

mkbctrl commented 1 year ago

@gnovotny can you be more specific what headaches are you talking about? I am about to embark on this beautiful journey, so any heads up will be appriecated