-
-
Notifications
You must be signed in to change notification settings - Fork 803
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Create React App doesn't work out of the box with Shoelace #1049
Comments
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
The CRA issue described with errors about needing: '@babel/plugin-transform-classes' seems unrelated to the package.json exports changes. I installed 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:
adjust package.json scripts to use craco: {
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
} Create a module.exports = {
babel: {
plugins: [
["@babel/plugin-proposal-class-properties", { loose: true }],
"@babel/plugin-transform-classes",
],
},
}; 2. Changing "browserslist" in package.jsonAfter reading this: facebook/create-react-app#11339 (comment) 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. |
Maybe related: Maybe need |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
Yes, I can also confirm that changing "browserslist" in package.json of the CRA worked. Thank you! |
Adding the Did some digging, but no solutions. After running build we have this output (picked this file as it was the first errored from CRA). Example of "use strict";
class FormDataEventPolyfill extends Event {
constructor(formData) {
super("formdata");
this.formData = formData;
}
}
class FormDataPolyfill extends FormData {
constructor(form) {
if (form) {
super(form);
this.form = form;
form.dispatchEvent(new FormDataEventPolyfill(this));
} else {
super();
}
}
append(name, value) {
if (!this.form) {
return super.append(name, value);
}
let input = this.form.elements[name];
if (!input) {
input = document.createElement("input");
input.type = "hidden";
input.name = name;
this.form.appendChild(input);
}
if (this.has(name)) {
const entries = this.getAll(name);
const index = entries.indexOf(input.value);
if (index !== -1) {
entries.splice(index, 1);
}
entries.push(value);
this.set(name, entries);
} else {
super.append(name, value);
}
input.value = value;
}
} And there is also this chunk (which is created by esbuild I guess) // src/internal/formdata-event-polyfill.ts
var FormDataEventPolyfill = class extends Event {
constructor(formData) {
super("formdata");
this.formData = formData;
}
};
var FormDataPolyfill = class extends FormData {
constructor(form) {
var __super = (...args) => {
super(...args);
};
if (form) {
__super(form);
this.form = form;
form.dispatchEvent(new FormDataEventPolyfill(this));
} else {
__super();
}
}
append(name, value) {
if (!this.form) {
return super.append(name, value);
}
let input = this.form.elements[name];
if (!input) {
input = document.createElement("input");
input.type = "hidden";
input.name = name;
this.form.appendChild(input);
}
if (this.has(name)) {
const entries = this.getAll(name);
const index = entries.indexOf(input.value);
if (index !== -1) {
entries.splice(index, 1);
}
entries.push(value);
this.set(name, entries);
} else {
super.append(name, value);
}
input.value = value;
}
}; The error in create-react-app refers to that chunk:
That error message was added in babel because of this: babel/babel#15148 So kinda back where we started, create-react-app combined with the defined browserslist is configuring babel in such a way where it runs into the above issue with the above code output by esbuild. Or something like that... ¯\_(ツ)_/¯ |
Pinging @samuelstroschein for any insights. I'd hate to have to roll back #1007 but we need to get this sorted for React users. 😕 |
Thats the thing though, the same issue occurs in |
Is this a React thing then? What version? I've been testing the last few versions of Shoelace in a CRA I created some time ago using React 17.0.2 and never encountered an issue. |
I attempted to recreate the issue in code-sandbox but couldn't reproduce it there, had to do it on my machine directly:
edit import { SlButton } from '@shoelace-style/shoelace/dist/react'
function App() {
return (
<div className="App">
<SlButton>Test</SlButton>
</div>
);
}
export default App;
Dependencies look like this:
Node: v18.11.0 Edit: https://stackblitz.com/edit/node-qdvgun?file=package.json,src%2FApp.js |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
I just setup a fresh create-react-app project with the latest version, 5.0.1, and here's the default, unmodified browserslist in
Unfortunately, this error still occurs when importing from Shoelace:
The quick fix for users is adding |
Added in 6284ed0 per Lit's recommendation so this doesn't bite us if and when we switch to es2022 or higher. Of course, the issue above still remains. |
Hey , Where do i have to add @babel/plugin-transform-classes to get it fixed? |
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! |
UPDATE: The original issue mentioned below has been resolved, but a new issue was uncovered regarding Create React App + Shoelace. See below for more details.
Jump to the latest issue 👇
View original issue
Describe the bug
After updating to 2.0.0-beta.86, getting import error (probably due to recent package.json exports field changes, using vite 3.2.5).
Importing like this:
Produces this error:
This can be fixed by changing the import to this:
Possible solutions
./dist/react.js
file, add that to the exports and import using@shoelace-style/shoelace/dist/react.js
The text was updated successfully, but these errors were encountered: