CODEWITHSUNDEEP
webpackviterollupcss-loader
Bas Slagter
Bas Slagter

Reputation: 9929

Ignore require from external package using Vite

I am setting up a new project using Vite. Setup is still simple with the basic config:

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [react()],
});

Now, I did an npm install of a (company) component library which apparently has some (webpack) loader dependencies. Now, when i run Vite (npm run dev) I get:

Could not resolve "!style-loader!css-loader!react-datepicker/dist/react-datepicker.min.css"

    node_modules/<package>/es/Components/Input/DateInput.js:11:8:
      11 │ require('!style-loader!css-loader!react-datepicker/dist/react-datepicker.min.css');
         ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "!style-loader!css-loader!react-datepicker/dist/react-datepicker.min.css" as
  external to exclude it from the bundle, which will remove this error. You can also surround this
  "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.

I tried some vite/rollup configuration option with "external" etc. but do not seem to get it to work. I am fine with ignoring this css file completely since we do not use this Datepicker component.

Any ideas?

Upvotes: 2

Views: 486

Answers (0)

Related Questions