shoelace: Create React App doesn't work out of the box with Shoelace

Thanks, everyone. I just tried from scratch and it seems to be working fine with 2.0.0-beta.87. I also decided to make a video showing how to setup a CRA with Shoelace.

https://www.youtube.com/watch?v=Ku2mJCJgvLs

I’m going to close this since it seems to be resolved now. If anyone is still having an issue with this, please make sure you’re using 2.0.0-beta.87 and report back if the problem persists for you!

The CRA issue described with errors about needing: ‘@babel/plugin-transform-classes’ seems unrelated to the package.json exports changes. I installed @shoelace-style/shoelace 2.0.0-beta.83 (version before the exports changes) in a newly created CRA project and get the same error.

---

Now haven’t touched create-react-app in a while, but was able to get the error to go away in CRA in two ways (not sure I’d recommend either approach though):

1. Customising babel with ‘craco’

Was able to get it working using https://craco.js.org/ to customise the babel config, roughly this:

npm install --save-dev @craco/craco @babel/plugin-proposal-class-properties @babel/plugin-transform-classes

adjust package.json scripts to use craco:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
}

Create a craco.config.js file with this:

module.exports = {
  babel: {
    plugins: [
      ["@babel/plugin-proposal-class-properties", { loose: true }],
      "@babel/plugin-transform-classes",
    ],
  },
};

2. Changing “browserslist” in package.json

After reading this: https://github.com/facebook/create-react-app/issues/11339#issuecomment-907813993

changing the browserslist in package.json to just “last 1 chrome version”, it seems to work in development at least:

{
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version"
    ]
  }

So it seems CRA configures it’s babel settings depending on the specified browser support, and the out-of-the-box settings are configuring it in a way that doesn’t like shoelace.

---

Haven’t done much testing beyond this… but yea it would probably be good if shoelace worked out of the box in CRA as it’s probably still pretty popular (despite in my opinion, better alternatives like vite’s react preset etc). Not sure what needs changed though to make it work.

@ajmchambers - I was having this issue.

Just installed shoelace in a sample Create React App today - am new to react and shoelace, so this may be totally unrelated.

I implemented your first solution, and now I am getting:

Compiled with problems:

ERROR in ./node_modules/@shoelace-style/shoelace/dist/chunks/chunk.JHBEU2I5.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/basyarosemann/source/my-app/node_modules/@shoelace-style/shoelace/dist/chunks/chunk.JHBEU2I5.js: When using '@babel/plugin-transform-parameters', it's not possible to compile `super()` in an arrow function with default or rest parameters without compiling classes.
Please add '@babel/plugin-transform-classes' to your Babel configuration.
  13 |   constructor(form) {
  14 |     var __super = (...args) => {
> 15 |       super(...args);
     |       ^^^^^^^^^^^^^^
  16 |     };
  17 |     if (form) {
  18 |       __super(form);
    at File.buildCodeFrameError (/Users/basyarosemann/source/my-app/node_modules/@babel/core/lib/transformation/file/file.js:209:12)
    at NodePath.buildCodeFrameError (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/index.js:106:21)
    at hoistFunctionEnvironment (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/conversion.js:191:27)
    at NodePath.arrowFunctionToExpression (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/conversion.js:121:7)
    at PluginPass.Function (/Users/basyarosemann/source/my-app/node_modules/@babel/plugin-transform-parameters/lib/index.js:26:16)
    at newFn (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/visitors.js:159:21)
    at NodePath._call (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:84:31)
    at TraversalContext.visitQueue (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitSingle (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:72:19)
    at TraversalContext.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:121:19)
    at traverseNode (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitMultiple (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:67:17)
    at TraversalContext.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:119:19)
    at traverseNode (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitMultiple (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:67:17)
    at TraversalContext.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:119:19)
    at traverseNode (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitSingle (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:72:19)
    at TraversalContext.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:121:19)
    at traverseNode (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitMultiple (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:67:17)
    at TraversalContext.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:119:19)
    at traverseNode (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitSingle (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:72:19)
    at TraversalContext.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:121:19)
    at traverseNode (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitSingle (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:72:19)
    at TraversalContext.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:121:19)
    at traverseNode (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:96:16)
    at TraversalContext.visitMultiple (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:67:17)
    at TraversalContext.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:119:19)
    at traverseNode (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/traverse-node.js:18:17)
    at NodePath.visit (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/path/context.js:90:52)
    at TraversalContext.visitQueue (/Users/basyarosemann/source/my-app/node_modules/@babel/traverse/lib/context.js:96:16)
``