Open omgoshjosh opened 2 months ago
@omgoshjosh The migration guide in the README goes over this. Quill >= 2.0 moves to native ES modules, and so ReactQuill did too. If your bundle doesn't support native ES modules, you will need to use babel to transpile it.
It looks like you're using webpack with babel-loader
, so the only thing you need to do is make sure babel-loader
actually picks up react-quill-new
.
Your webpack config should look something like this:
module.exports = {
entry: {
// your entry points
},
module: {
rules: [
// ... other loaders
{
test: /\.(js|jsx|ts|tsx|cjs)$/,
exclude: /node_modules\/(?!(react-quill-new)\/).*/,
loader: 'babel-loader',
options: {
plugins: [
/* your plugins */
],
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
// ... other loaders
],
},
};
with special note to the exclude
clause, which says to not transpile node_modules, except for react-quill-new
thanks for the response @VaguelySerious, i will keep banging my head on it! but yeah it actually works fine during local development with webpack... it is only with jest that it does not work... it seems like it's because we don't use webpack with jest to run tests, we use jest-babel which uses the same config as the babel-loader that webpack is using, but without all the overhead of webpack... maybe i need to update babel to use webpack which we avoided for a long time.
Hmm, I can't tell you whether your jest setup needs webpack as a pre-processor, but it probably shouldn't? If you can't get the babel-loader to work well with jest, it might be worth a shot to migrate to vitest
instead. Its a drop-in replacement for jest, a lot of faster, and it doesn't require babel. I've migrated a few codebases from jest to vitest and it was very smooth every time.
thanks for the tip, i'll close this out for now.
ok, so i have attempted a LOT of hoop jumping to no avail. is there any way we can bring back the build artifact? looking at quill... it doesn't seem like they stopped shipping build artifacts that are "plain js"... in other words, just using quill v2 does not have the same issue that react-quill v3 has now. when i've tried to make it work, i start running into all sorts of problems. for instance once i enable transform on react-quill, it starts complaining about quill and lodash (inside of react-quill).
one more update with details as to what has gotten my first test to pass and now i'll have to look into the other 54 or so tests that are failing (they all seem to be the same issue, front end models not working on a call like expect(instantiatedModel).toHaveOwnProperty('id')
.
{ "exclude": ["transform-classes"] }
Apologies for the delayed response. I can see that using react-quill-new
with Jest is a significant hurdle beyond expectations. I was under the impression that configuring transformIgnorePatterns
correctly should mitigate all the issue, as it essentially produces what would otherwise be the "plain JS" build previously produced by webpack, and that this would have been easy to do.
It looks like those assumptions weren't correct, so I just added back the standalone plain JS build in react-quill-new@3.3.1
, and have re-opened the issue for now.
Please let me know if using dist/react-quill.js
in the new package version is more compatible with your setup, and if there are any other issues. If your problem is solved with this, feel free to close the issue again.
Hello, I'm also running into this issue. I have a number of ignored modules in transformIgnorePatterns
but adding react-quill-new
to the list doesn't seem to change anything. How would I go about trying to use dist/react-quill.js
as you suggest? Do you mean that I should try to import this file in the file where I use ReactQuill component?
i noticed my builds were failing and when looking into it, jest and babel are having trouble and i think it's because of this change here: https://github.com/VaguelySerious/react-quill/commit/1deb164663facea2d2efc8859dd87de197310f92#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L16
i am trying to get a code sandbox that shows the issue, but i am having trouble, so i wanted to get this issue open in the mean time.
Ticket due diligence
v2.0.0-beta.2
ReactQuill version