Module parse failed: Unexpected token (20:77)

[SLey3]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed

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.

• What error message are you getting?

  ERROR in ./node_modules/@yaireo/tagify/src/react.tagify.jsx 20:77
  Module parse failed: Unexpected token (20:77)
  File was processed with these loaders:
  * ./node_modules/source-map-loader/dist/cjs.js
  You may need an additional loader to handle the result of these loaders.
  |             let isReactComp = String(Template).includes("jsxRuntime")
  |             if (isReactComp)
  >                 templates[templateName] = (...props) => renderToStaticMarkup(<Template props={props} />)
  |         }
  |     }

[yairEO]

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

[SLey3]

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)?

[yairEO]

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

[SLey3]

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

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.

[SLey3]

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

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.

[SLey3]

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)

[yairEO]

in your replit codebase I see some issues:

1. you are using a very old vite version 3 instead of 5
2. 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.

[SLey3]

in your replit codebase I see some issues:

1. you are using a very old vite version 3 instead of 5
2. 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.

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)

[yairEO]

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

[SLey3]

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?

[yairEO]

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.

[SLey3]

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.

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.

[SLey3]

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.

[yairEO]

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.

[SLey3]

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.

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.

[yairEO]

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.

[yairEO]

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';

https://stackoverflow.com/a/33524809/104380

[SLey3]

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)

[yairEO]

I don't know, it just works :) all this is very odd

https://github.com/yairEO/tagify/assets/845031/c2e3a1b5-63d9-4268-9749-a441f758cfad

[SLey3]

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 containing declare 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'

[yairEO]

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

[SLey3]

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.

[yairEO]

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

[SLey3]

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

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.