React-sketchapp: Error while building ./my-command.js. You may need the appropriate loader to handle this file type

[pcooney10]

👋 Hello! Thanks for contributing. Please use the template that matches your intention

_I am..._

| -------------------------------------------------------------------------------------------------
| Reporting a bug or issue
| -------------------------------------------------------------------------------------------------

Expected behavior:
Should be able to use ES6+/ES7 features with the appropriate .babelrc configuration.

Observed behavior:
Error while building from an npm module that uses the following ES6+/ES7 syntax:

static propTypes = {
  theme: PropTypes.object,
  markedDates: PropTypes.object,
  ...
};

How to reproduce:
With this repo. The presets in my .babelrc file are ["react", "stage-0", "es2015"]. I have also tried the following plugins: ["transform-object-rest-spread", "transform-class-properties"].

Sketch version:
43.1

Please attach screenshots, a zip file of your project, and/or a link to your github project
Repo: https://github.com/pcooney10/rn-calendar

[pcooney10]

I think the issue is that skpm ignores the node_modules directory, so my .babelrc settings were not getting applied to node_modules\react-native-calendars. Thank you to @mathieudutour for helping me figure that out (#53).

I think I can get around this limitation using a webpack.config.js file, but I am having some difficulty writing one that works. If anyone could post an example of one, that would be greatly appreciated ! It may also be helpful to include one in the examples!

[pcooney10]

Hey - does anyone have a webpack.config.js that works with react-sketchapp and skpm?

I came across another react-native module that uses ES.Next syntax, and I am unable to compile it & use it in my app. This is my current attempt at a webpack config:

    module.exports = {
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: new RegExp(/node_modules\/(?!react-native-calendars(?:\/|$)).*/),
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['react', 'react-native', 'es2015', 'stage-0']
              }
            }
          }
        ]
      }
    };

[jongold]

cc @mathieudutour

[mathieudutour]

what's the error with the last config exactly?

[pcooney10]

I am getting a few, Module not found: Error: Can't resolve, Field 'browser' doesn't contain a valid alias configuration, and doesn't exist on ViewPropTypes. @mathieudutour

Full list: https://gist.github.com/pcooney10/0d3fbb7612a38cf4a78cb4f85cd0c486

[mathieudutour]

skpm changed the way it's handling the webpack config in v1.0 so it might work now. It's not really an issue with either react-sketchapp or skpm (i'm pretty sure requiring react-native-calendars in a sketch plugin will fail anyway) so closing this for now