React-dates: Babel dependencies properly included for development

[JuanCaicedo]

I'm seeing some errors within my webpack build (coming from babel) when trying to get started with this component. They seem to require that I install the babel plugins used by react-date's own .babelrc.

To verify, I ran $ npm install babel-plugin-inline-react-svg babel-preset-airbnb babel-plugin-transform-replace-object-assign.

I _think_ the problem comes from the fact that when you run $ npm install react-dates, it only installs production dependencies, but these babel plugins are inside devDependencies. Since react-dates will be handled inside of my own webpack build (in development), I think that means that I will need react-date's dev dependencies.

I'm not sure what it's like to manage a library that is used within a webpack build, yet has it's own webpack build and dependencies. I think maybe it would be nice to be able to just get a dist copy that has already been built, so that it's agnostic to the build system.

Let me know if I can provide any more information to help with this!

[ljharb]

This issue is caused if you are (incorrectly) transpiling node_modules. If you don't configure your babel to do this, you won't run into it.

[JuanCaicedo]

Thanks for the quick response. Perhaps I'm understanding how babel is configured, but as far as I can tell, I'm not doing anything with node_modules

// .babelrc
{
  "plugins": [
    [
      "module-resolver", {
        "root": ["."],
        "alias": {
          "styles": "./styles"
        },
        "cwd": "babelrc"
    }],
    [
      "wrap-in-js",
      {
        "extensions": ["css$", "scss$"]
      }
    ],
    ["transform-define", "./env-config.js"]
  ],
  "presets": [
    "next/babel"
  ],
  "ignore": []
}

Perhaps it has to do with the preset I'm using?

[ljharb]

Nothing in that seems like it'd transpile node_modules.

What are the errors you're seeing?

react-dates, installed from npm, should be using the pre-transpiled code in lib - babel plugins are only required for developers of react-dates, not users of it.

[JuanCaicedo]

They're along the lines of

error  in ./node_modules/react-dates/lib/css/_datepicker.css

Module build failed: ReferenceError: Unknown plugin "inline-react-svg" specified in "<project-root>/node_modules/react-dates/.babelrc.env.development"

So it definitely looks like things are being accidentally built like in development

[JuanCaicedo]

Also I'm confused about how importing a css file could cause this error

[ljharb]

aha! looks like wrap-in-js is transpiling that css; and it's reading the .babelrc inside react-dates.

That's a bug in that plugin; it should be setting --no-babelrc when it transforms CSS files.

[JuanCaicedo]

Awesome, thanks for finding that and for all your help @ljharb ! I'm trying to find a way to set that, but I'm not very familiar with how babel plugin development goes. I'll close this issue and open one there though

[JuanCaicedo]

I added this issue so I can close the one here https://github.com/davibe/babel-plugin-wrap-in-js/issues/2, but I'm still having trouble 😬