A peculiar outcome arises when running a Vue.js project folder on MacOS using the Vite development server

While working on a MacOS system, I encountered an issue when copying the entire directory of a vue.js 3 project using the command: cp -rp dir1 dir2. Subsequently, when attempting to run a development server in the copied directory (dir2) with the command: npm run dev, an error message was displayed:

(node:98097) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use node --trace-warnings ... to show where the warning was created)

/Users/dev/projects/ ... /dir2/node_modules/.bin/vite:2 import { performance } from 'node:perf_hooks' ^^^^^^

SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:73:18) at wrapSafe (node:internal/modules/cjs/loader:1153:20) at Module._compile (node:internal/modules/cjs/loader:1205:27) at Module._extensions..js (node:internal/modules/cjs/loader:1295:10) at Module.load (node:internal/modules/cjs/loader:1091:32) at Module._load (node:internal/modules/cjs/loader:938:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) at node:internal/main/run_main_module:23:47

This led me to investigate further, as I could not identify any differences between the directories even though hidden files were copied. Running the command: diff -qr dir1 dir2 revealed no distinctions.

To find a solution, I decided to copy the directory using: rsync -a dir1/ dir2, which ultimately resolved the issue and allowed me to successfully run the development server in dir2 without encountering any problems.

Reflecting on this experience made me ponder whether the challenge stemmed more from the disparity between cp and rsync rather than being solely related to vue.js and vite. It baffles me that despite seemingly identical copies of the directories, there was a significant difference in functionality between them.

vue.jsvite

Answer №1

It has been discovered that within the node_modules/.bin directory, there are some files that are symbolic links. Interestingly, these symbolic links are not taken into account when using the command cp -rp dir1 dir2.

To ensure all files are copied recursively, including hidden files and symbolic links, one should use the command cp -R dir1 dir2

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a python script on the client side with the help of Vue.js

Because of restricted computation capabilities, I need to execute a python script on the user's browser. Currently, my website utilizes Vue.js for the frontend and Django for the backend. Do you have any suggestions on how I can specifically run thi ...

pythonvue.jsclient

The Selenium test functions correctly in the production environment, however it encounters issues when run

I am facing an issue with my Vue.js application while writing Selenium tests. The test passes when run against the deployed production version of the app, but fails when run against a local version. When running the app locally, it is not from a build, bu ...

pythonseleniumvue.jsselenium-chromedriver

jinja2.exceptions.UndefinedError: The variable 'asset' has not been defined

Currently in my project, I am using a Python backend to fetch data from an API and then rendering it through Flask to the Vue.js frontend. However, I have encountered an error titled that is causing some issues. I have double-checked and printed the varia ...

javascriptpythonvue.jsflask

Django Vue3 encounters access-control-allow-origin restriction

I am currently working on a Django rest-api project that uses Vue on the front-end. Unfortunately, I encountered an error while making requests via Vue: Console output: The following error is displayed: Access to XMLHttpRequest at 'https://api.iyziw ...

javascriptpythondjangovue.jsvuejs3

What is the most efficient method for transferring Flask variables to Vue?

I am currently developing a visualization application using a flask server and vue.js for the front end. Other discussions on this topic explore how to avoid conflicts between vue.js and flask variable syntax, as shown here. In my scenario, I'm inte ...

javascriptpythonvariablesflaskvue.js

Solving the CORS problem between Vue.js and Flask: Troubleshooting XMLHttpRequest Blockade

Description: Currently working on developing a web application utilizing Vue.js for the frontend and Flask for the backend. The initial phase involves creating a simple login page, but encountering CORS (Cross-Origin Resource Sharing) issues when making r ...

pythonvue.jsflaskcors

Flask static serving causes Vue app to not render

Currently, I am in the process of developing a basic web application utilizing Flask for the backend and Vue for the client side. Here is an overview of my folder structure: . ├── client/ │ ├── dist/ │ │ ├── css/ │ │ ...

pythonvue.jsflaskvuejs3

An error occurred: gyp ERR! stack - The command `python -c import sys; print "%s.%s.%s" % sys.version_info[:3]` has failed

While attempting to npm install in a Vue project, I encountered an error even after running vue create (name): npm ERR! gyp verb check python checking for Python executable "c:\Python310\python.exe" in the PATH npm ERR! gyp verb `which` ...

pythonvue.jsnpmnpm-install