Closed SLey3 closed 4 months ago
something in your specific project setup is causing it. please create an absolute minimal reproduction of the problem in a Github repo and paste the link here. Need to know your Vite/Rollup/Webpack configuration and plugins and what not to be able to figure out why this is happening.
At first glance it would appear your bundler might not be able to process JSX files. Maybe only 3rd-party files.
Tagify works fine, as can be seen in the online codesandbox demo
something in your specific project setup is causing it. please create an absolute minimal reproduction of the problem in a Github repo and paste the link here. Need to know your Vite/Rollup/Webpack configuration and plugins and what not to be able to figure out why this is happening.
At first glance it would appear your bundler might not be able to process JSX files. Maybe only 3rd-party files.
Tagify works fine, as can be seen in the online codesandbox demo
Ok, I should have clarified the following:
I'm using create react app which from what I know controls all the webpack and babel configuration for me I'm using typescript for my project, I already checked my tsconfig json file and everything is in order to allow jsx perhaps I should use react-app-rewired to change/add some settings in those configuration files (e.g. webpack.config.js, .babelrc)?
Maybe this can help: https://g.co/gemini/share/7f7ff02b5ac8
Go to CRA source code and check what is the default Webpack configuration regarding 3rd-party files in node_modules
. I thought nobody uses CRA anymore, it has been deemed outdated a few years ago :)
Webpack
died about 3-4 years ago and was replaced by Vite
Maybe this can help: https://g.co/gemini/share/7f7ff02b5ac8
Go to CRA source code and check what is the default Webpack configuration regarding 3rd-party files in
node_modules
. I thought nobody uses CRA anymore, it has been deemed outdated a few years ago :)
Webpack
died about 3-4 years ago and was replaced byVite
I'll certainly check out the link you sent. I was not aware that CRA was outdated (I recently started to learn React.js in the implementation of my current project). I'll also looks for a way to migrate from CRA to vite if possible.
Maybe this can help: https://g.co/gemini/share/7f7ff02b5ac8
Go to CRA source code and check what is the default Webpack configuration regarding 3rd-party files in
node_modules
. I thought nobody uses CRA anymore, it has been deemed outdated a few years ago :)
Webpack
died about 3-4 years ago and was replaced byVite
Update: I have made the migration from CRA --> Vite. The website works fine (after having to uninstall and reinstall every dependency and doing migration-related changes) without the Component I have set to include the Tags component from tagify. But the moment I set the component on my page, the website goes blank and this time, no errors on the terminal.
Website blank page as a result of incorporating the Tags Component
In a separate comment from this one, I will put the link to replit that contains the relevant files for you to check out (I'll try to make a simple page with just the component) once its ready.
In a separate comment from this one, I will put the link to replit that contains the relevant files for you to check out (I'll try to make a simple page with just the component) once its ready.
Alright here's the link: https://replit.com/@sLey/Sample-Tagify-Example
(It also includes the prop-types package that I had to install manually myself as initially by just installing tagify, it didn't include prop-types so it raise a failed to resolve import error. Once that was taken care off, check the console after rerunning the program, it includes another error than only shows in the console (I'll also include it here).
Mentioned Console Error:
SyntaxError: The requested module '/node_modules/prop-types/index.js?v=37a0eaf9' does not provide an export named 'array' (at react.tagify.jsx:4:18)
in your replit
codebase I see some issues:
vite
version 3
instead of 5
react
& react-dom
should be defined (in package.json
file) as dependencies
and not devDependencies
because they are used right in the source code of your app.Also try to remove <React.StrictMode>
(from index.tsx
) which in my experience only causes issues.
Please check Chrome devtools console for any errors.
in your
replit
codebase I see some issues:
- you are using a very old
vite
version3
instead of5
react
&react-dom
should be defined (inpackage.json
file) asdependencies
and notdevDependencies
because they are used right in the source code of your app.Also try to remove
<React.StrictMode>
(fromindex.tsx
) which in my experience only causes issues.Please check Chrome devtools console for any errors.
My apologies, writing very late at night sometimes makes me forgetful to do some checks (specifically for the latest versions of dependencies. None the Less, once I updated the dependencies to your specifications and removed strict mode, the same error in Chrome devtools still appears:
SyntaxError: The requested module '/node_modules/prop-types/index.js?v=b0c9cb5d' does not provide an export named 'array' (at react.tagify.jsx:4:18)
trying changing the module
property to small letters here:
https://replit.com/@sLey/Sample-Tagify-Example#tsconfig.json
read more here: https://www.typescriptlang.org/docs/handbook/modules/theory.html#the-module-output-format
all values should be lower-cases I think.
Also try to enable esModuleInterop
in that file
esModuleInterop
Ok I did all of those suggested changes, and the same error still happens. If I may, reading the error, its a syntax error for the props-types module which doesnt have an export named array. Maybe tagify is using an old version of props-types and it got removed in the most recent version?
I've checked that theory already, but Tagify works well with the most recent packages versions, and I high doubt props-types
would change its exported functions names all of a sudden which will break millions of projects.
Trying removing "prop-types": "^15.8.1"
from your package.json
and run npm prune
to make sure it's removed. it comes with react
anyway.
I've checked that theory already, but Tagify works well with the most recent packages versions, and I high doubt
props-types
would change its exported functions names all of a sudden which will break millions of projects.Trying removing
"prop-types": "^15.8.1"
from yourpackage.json
and runnpm prune
to make sure it's removed. it comes withreact
anyway.
well now doing that I get the following:
[plugin:vite:import-analysis] Failed to resolve import "prop-types" from "node_modules/@yaireo/tagify/src/react.tagify.jsx". Does the file exist?
I did ran "npm audit fix" just to make sure no vulnerabilities are present which there isn't and "npm install" to make sure all packages (every one set to the latest version) are installed which they are.
Also I did some research and check this out: Proptypes
In this doc from the latest react version, they use the PropTypes class imported from "prop-types" and from there they can call "PropType.string", etc. But they do mark it as legacy, fyi. And in your source code for the react.tagify.jsx, your importing like this:
import {string, array, func, bool, object, oneOfType} from "prop-types"
I could fork this project and create a pull request, adjusting everything using prop types to the correct format if you don't have time to do it yourself. I think this is a great package and from my research on tag packages, it was the easiest and least dependency-required package I could find.
what is written in the linked page in React docs is something else - the legacy
refers to setting things as static
on a class, because react has moved away from classes
some years ago into functions (with hooks), so that example is irrelevant to this issue you are having here.
what is written in the linked page in React docs is something else - the
legacy
refers to setting things asstatic
on a class, because react has moved away fromclasses
some years ago into functions (with hooks), so that example is irrelevant to this issue you are having here.
ok, could you refer me to the docs for the prop-types package that tagify uses as thats all that came up for me in the latest react docs. I don't really have that much ideas left as of right now than that as that seems to be the explanation for me.
This is how your using it in the react.tagify.jsx, no?
TagifyWrapper.propTypes = {
name: string,
value: oneOfType([string, array]),
loading: bool,
children: oneOfType([string, array]),
...
}
in their github page, they do this:
import PropTypes from 'prop-types';
...
MyComponent.propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray: PropTypes.array,
optionalBigInt: PropTypes.bigint,
optionalBool: PropTypes.bool,
...
}
This is just a suggestion that I think could solve this issue easily, but I would love to hear your side and see what else I could possibly do that is not this change.
I've forked your code and updated some packages in your package.json
as there was a mismatch of packages no fitting each other, and now everything works:
https://replit.com/@yairEO/Sample-Tagify-Example#package.json
Also updated vite.config.js
to work with swc
which is the modern way.
import PropTypes from 'prop-types';
...
MyComponent.propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray: PropTypes.array,
optionalBigInt: PropTypes.bigint,
optionalBool: PropTypes.bool,
...
}
is equivalent to this:
import {array, bool, bigint} from 'prop-types';
Im curious, how did it work for you? I just forked and ran your fork and I got the following error:
SyntaxError: The requested module '/node_modules/prop-types/index.js?v=b05ed2aa' does not provide an export named 'array' (at react.tagify.jsx:13:18)
I don't know, it just works :) all this is very odd
https://github.com/yairEO/tagify/assets/845031/c2e3a1b5-63d9-4268-9749-a441f758cfad
I don't know, it just works :) all this is very odd
replit-bug-report.mp4
100% agree that this is odd, I checked the prop-types source code and I found that they are certainly exporting them as it should at least in their types declaration file. Though i did notice this part in the syntaxerror im getting:
'/node_modules/prop-types/index.js?v=eed56549'
especially if you notice with the that following index.js is a query string and as I scoured the source code, no where in the actual file do I find it using that query string. This is so weird as I just forked your fork and havent changed anything so I don't know what to do so far.
This project uses ejs than cjs correct? and would it be possible that the type declaration file for this project be causing this as well as I just got this error after reinstalling everything again:
Could not find a declaration file for module '@yaireo/tagify/src/react.tagify'. '/Users/sergioleylanguren/Desktop/RealEstatesListings/realestatelistings/node_modules/@yaireo/tagify/src/react.tagify.jsx' implicitly has an 'any' type. Try
npm i --save-dev @types/yaireo__tagify
if it exists or add a new declaration (.d.ts) file containingdeclare module '@yaireo/tagify/src/react.tagify';
ts(7016)
I have changed some things and the ts compiler does recognize every other type folder except for this one if and only if I try to import Tags from '@yaireo/tagify/src/react.tagify'
what type declaration for this project (Tagify)? Myself I don't know TypeScript did not bother writing any type definitions for Tagify
What do you mean by "This project uses ejs than cjs"?
The React version should be imported directly from the source
folder because I did not want to pre-compile it, which will solve your problem, but will also very much can (and probably will) increase the weight of your project's bundle size which is a downside.
I prefer that whoever imports the source file will handle the bundling (for React only).
The "normal" javascript version of this package (Tagify) is pre-bundled and minified.
You can try to actually download (or copy) the source code folder of Tagify into your codebase and import from there (as opposed to importing it from node_modules
just as an experiment
npm i --save-dev @types/yaireo__tagify
what type declaration for this project (Tagify)? Myself I don't know TypeScript did not bother writing any type definitions for Tagify
What do you mean by "This project uses ejs than cjs"?
The React version should be imported directly from the
source
folder because I did not want to pre-compile it, which will solve your problem, but will also very much can (and probably will) increase the weight of your project's bundle size which is a downside.I prefer that whoever imports the source file will handle the bundling (for React only).
The "normal" javascript version of this package (Tagify) is pre-bundled and minified.
You can try to actually download (or copy) the source code folder of Tagify into your codebase and import from there (as opposed to importing it from
node_modules
just as an experiment
Someon made a type declaration for this project then (or auto gen im not sure how that works for packages) cuz running
npm i --save-dev @types/yaireo__tagify
works and it does exist
What do you mean by "This project uses ejs than cjs"?
I meant if the project use embedded javascript (ejs) or common js (cjs)
I prefer that whoever imports the source file will handle the bundling (for React only).
If i were to download the source code folder in its entirety and that works, would I have your permission? I can certainly in good faith in the directory I would create to hold all your code put a CREDITS.md file crediting you for the creation of tagify and linking to the github page for this project.
You don't need my permission for downloading the source-code as it is already on your computer just in the node_modules
folder (under @yaireo/tagify
) so you can simply copy the src
from there to your src
and rename it tagify
just to see if that would work.
I don't know think you need to install that package @types/yaireo__tagify
, as I am not the author and maybe it is causing bugs, who knows.
I meant if the project use embedded javascript (ejs) or common js (cjs
I've never heard of ejs
, I don't know what that is, but the project is bundles as UMD in it's minified vanilla javascript version tagify.min.js
but as I said, the React version is not bundled at all, hence it is what is called "esm" which basically means it's just "raw" javascript without any overhead at all
You don't need my permission for downloading the source-code as it is already on your computer just in the
node_modules
folder (under@yaireo/tagify
) so you can simply copy thesrc
from there to yoursrc
and rename ittagify
just to see if that would work.I don't know think you need to install that package
@types/yaireo__tagify
, as I am not the author and maybe it is causing bugs, who knows.I meant if the project use embedded javascript (ejs) or common js (cjs
I've never heard of
ejs
, I don't know what that is, but the project is bundles as UMD in it's minified vanilla javascript versiontagify.min.js
but as I said, the React version is not bundled at all, hence it is what is called "esm" which basically means it's just "raw" javascript without any overhead at all
Ok so moving the tagify folder to my assets folder and importing the component from there works. I would like to thank you for your time in this issue of mine that is definetly weird and seems to have only happened with me. I have included a credits file in the assets/tagify folder so once I upload the website and it's fully operational online, you should see it there if you wish.
Thank you @yairEO once again.
Prerequisites
Explanation
Hi, I've followed the documentation when it comes to importing the Tags component and using it as I'm using React.js for my project. As of right now, when I load in the page with the component, I'm receiving an error and the whole page goes blank.