aidenybai / million

Optimize React performance and make your React 70% faster in minutes, not months.

Home Page:https://million.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Lost MiniCssExtractPlugin, do not parse scss files

mykhailokonst opened this issue · comments

What version of million are you using?

0.0.73

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

Versions:

"webpack": "5.91.0", "webpack-bundle-analyzer": "4.10.1", "webpack-cli": "5.1.4", "webpack-dev-server": "5.0.4", "mini-css-extract-plugin": "2.8.1", "react": "18.2.0", "react-dom": "18.2.0",

After adding Million Lint, npm run start failed. It tells that I forgot to add MiniCssExtractPlugin in plugins section in webpack, but it exists there, and it build well after removing millionlint plugin.

`plugins: [
new ForkTsCheckerWebpackPlugin({
typescript: {
configFile: path.join(__dirname, '..', 'tsconfig.json'),
},
}),
// Combine all generated styles into a single bundle.css file
new MiniCssExtractPlugin({ filename: server ? '[name].css' : '[name].[contenthash].css' }),
new HtmlWebpackPlugin({
// Do not inject references to the webpack generatad js/css bundles. It will be done
// manually in the template
inject: false,

    // Add hashes to the bundle references to invalidate caching
    hash: true,

    // ejs template to use. Search following this order:
    // - a config/index.html.ejs file inside the project
    // - the framework's default template
    template: findFile('<root>/config/index.html.ejs', '<framework>/index.html.ejs'),

    // Name of the generated template file
    filename: 'index.html',

    // Initial application state set as global window variables. Only available in server mode.
    state: server ? requireFile('<root>/config/server/state.js', '<framework>/server/state.js') : {},
  }),

  // Generate a GO index.html.tmpl template for standalone deploys
  !server &&
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: findFile('<root>/config/index.html.ejs', '<framework>/index.html.ejs'),
      filename: 'index.html.tmpl',
    }),

  // Tell webpack not to require jQuery. If a project uses jQuery it must include a
  // <script> tag in the template
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    // Node.js polyfills
    process: 'process/browser',
  }),

  // Prune from the bundle the unneeded validator-js locales.
  // Framework supported "es" and "en" locales are bundled by default
  new webpack.ContextReplacementPlugin(/validatorjs[\/\\]src[\/\\]lang/, /es|en/),

  // Output gzip version of the assets
  !server && new CompressionPlugin({}),
  new BundleAnalyzerPlugin(),
  MillionLint.webpack(),
],`

Errors:

ERROR in ./shared/modules/status-history/status-history.scss Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js): Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. { plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
at Object.pitch (**/node_modules/mini-css-extract-plugin/dist/loader.js:77:14)
@ ./modules.tsx 11:0-86 19:104-139
@ ./main.tsx 25:0-36 42:238-245

webpack 5.91.0 compiled with 461 errors in 54839 ms`

What's the expected result?

Webpack build should be successful.

Link to Minimal Reproducible Example

Participation

  • I am willing to submit a pull request for this issue.

Thanks for opening this issue! A maintainer will review it soon.

Hey there @mykhailokonst, do you think you can maybe provide a reproduction so I can help out? Thank you very much!

@tobySolutions , sure. You can comment/uncomment millio.webpack() line to check
Codesandbox link

@tobySolutions, any updates here?

@tobySolutions, any updates here?

Taking a look now, thank you very much @mykhailokonst.

I have taken a look and I think I need to inform the team of this issue so they can take a look. I'll pass on your reproduction to the team and I'll get back to you @mykhailokonst. Thank you.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.