airbnb/react-sketchapp

Webpack Loader issue when exporting SVGs

jhernandez5922 opened this issue · 1 comments

Reporting a bug or issue

Expected behavior:

  • When using the quick start guide, I should be able to see the result in sketch.

Observed behavior:
Got this error when running skpm-build

error Error while building ./my-command.js
./node_modules/react-sketchapp/lib/module/components/index.js 6:9
Module parse failed: Unexpected token (6:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export { Image } from './Image';
| export { RedBox } from './RedBox';
> export * as Svg from './Svg';
| export { View } from './View';
| export { Text } from './Text';
 @ ./node_modules/react-sketchapp/lib/module/index.common.js 5:0-29 5:0-29
 @ ./node_modules/react-sketchapp/lib/module/index.sketch.js
 @ ./src/my-command.js

How to reproduce:
I just followed the install guide. Both the curl command and the cloning the repo.

Sketch version:

Please attach screenshots, a zip file of your project, and/or a link to your github project
Here is the project I tried running it on, which is just the cloned repo.

I also tried setting up things manually in my own repo I planned to use it in, and got the same result.
basic-setup.zip

Hi, there's a related/duplicate issue here: #508 . It seems to be caused by a switch from commonjs imports to ES imports for the Sketch package.json entrypoint. As a simple fix, try this:

Create a new file in your project root (e.g. basic-setup folder): webpack.skpm.config.js

const path = require('path');

module.exports = (config) => {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        'react-sketchapp': 'react-sketchapp/lib',
      },
    };
};

If that doesn't work, you can try running this in your Terminal (install older version as a temporary fix to unblock for now):

cd basic-setup # if not done yet already
npm install --save --save-exact @skpm/builder@0.5.16
npm install --save --save-exact react-sketchapp@3.2.0
rm webpack.skpm.config.js # The one included in `basic-setup` has an unnecessary node object override that breaks the build