I get this error when I try quasar dev:
[ERROR] [plugin vite:dep-pre-bundle] Failed to resolve entry for package "fs". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "fs". The package may have incorrect main/module/exports specified in its package.json.
While looking on the net I found this link with the solution:
here
The solution for quasar vite is to add this part in quasar.config.js
extendViteConf(viteConf, { isServer, isClient }) {
// do something with viteConf... change it in-place
viteConf.resolve = {
alias: {
...viteConf.resolve.alias, // that's important we want to keep the alias set by quasar team
fs: require.resolve('rollup-plugin-node-builtins'),
child_process: require.resolve('rollup-plugin-node-builtins'),
},
};
},
To save you the trouble to search during hours.
Related
At my workplace we were trying to get Vite working with Yarn Workspaces (in yarn v2).
We wanted to create a test environment where we consumed one of the packages we were publishing from the same repository but a different workspace. To illustrate:
packages
package-a
package-b
The packages are referred to in the main package.json like so:
{
...
"workspaces" : [
"packages/package-a",
"packages/package-b"
]
...
"packageManager": "yarn#3.3.1"
}
Where package-b refers to package-a in package-b's package.json like so:
{
...
"dependencies" : {
...
"package-a-name-in-npm": "workspace:packages/package-a"
...
}
...
}
What we found though, was that when it came to running the application in Vite, the package was not being loaded into the browser. This resulted in errors like:
Uncaught SyntaxError: The requested module ... does not provide an export named ...
At runtime only, but TypeScript and ESLint were perfectly happy with our imports.
See my answer below to find out our solution.
Yarn uses symbolic links to link to local workspaces. Vite doesn't seem to handle this well out of the box.
By setting the preserveSymlinks option in vite.config.ts, we were able to resolve this.
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
preserveSymlinks: true // this is the fix!
}
});
I have a react app and all of a sudden I got the below errors while I run npm start:
ERROR in ./node_modules/sass/sass.dart.js 118:12-25
Module not found: Error: Can't resolve 'fs' in .......
webpack compiled with 1 error and 1 warning
I manage to handle it with adding fallback to webpack.config.js like below:
.....
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
fallback:{
"fs":false
},
}
it solved the problem but I don't want to override webpack.config.js because if I remove my node modules and some one else tries to npm install then he will get the error again.
how can I solve the error without overriding webpack.config.js?
I'm trying to make a Vue project and use an npm package for connecting to the retroachievements.org api to fetch some data, but I'm getting an error. Here's my process from start to finish to create the project and implement the package.
Navigate to my projects folder and use the vue cli to create the project: vue create test. For options, I usually chose not to include the linter, vue version 2, and put everything in package.json.
cd into the /test folder: cd test and install the retroachievements npm package: npm install --save raapijs
Modify App.vue to the following (apologies for code formatting, not sure why the post isn't formatting/coloring it all properly...):
const RaApi = require('raapijs');
export default {
name: 'App',
data: () => ({
api:null,
user: '<USER_NAME>',
apiKey: '<API_KEY>',
}),
created() {
this.api = new RaApi(this.user, this.apiKey);
},
}
run `npm run serve' and get the error:
ERROR in ./node_modules/raapijs/index.js 2:14-30
Module not found: Error: Can't resolve 'https' in 'C:\Projects\Web\test\node_modules\raapijs'
I'm on Windows 10, Node 16.17.0, npm 8.15.0, vue 2.6.14, vue CLI 5.0.8, raapijs 0.1.2.
The first solution below says he can run it without error but it looks like the exact same code as I'm trying. Can anyone see a difference and a reason for this error?
EDIT: I reworded this post to be more clear about my process and provide more info, like the versions.
This solution works for me. I installed raapijs with npm install --save raapijs command. Then in my Vue version 2 component I used your code as follow:
const RaApi = require('raapijs');
export default {
data: () => ({
api: null,
user: '<USER_NAME>',
apiKey: '<API_KEY>',
}),
created() {
this.api = new RaApi(this.user, this.apiKey);
},
};
It seems the raapijs package was designed to be used in a Node environment, rather than in Vue's browser based environment, so that's the reason I was getting an error. The package itself was looking for the built in https package in Node, but since it wasn't running in Node, it wasn't finding it.
So I solved my problem by looking at the package's github repo and extractingt he actual php API endpoints that were being used and using those in my app directly, rather than using the package wrapper. Not quite as clean and tidy as I was hoping but still a decent solution.
I'm a C++ developer and beginner in the Node world.
I would like to create a CEP and VUE based Photoshop plugin.
The skeleton plugin works well.
I would like to use node-libcurl package for this plugin.
I installed libcurl - It's OK.
npm i node-libcurl --save
I put down into my C4.js
const { curly } = require('node-libcurl');
When I want to build my project I got this error:
INFO Starting development server... 98% after emitting CopyPlugin
ERROR Failed to compile with 1 error
7:26:51 PM error in
./node_modules/node-libcurl/lib/binding/node_libcurl.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are
configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for > > this binary file)
# ./node_modules/node-libcurl/dist/Easy.js 5:17-60
# ./node_modules/node-libcurl/dist/index.js
# ./src/c4/C4.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.1.22:8080&sockPath=/sockjs-node
(webpack)/hot/dev-server.js ./src/main.js
I tried this webpack.config.js in .... \node_modules\node-libcurl
module.exports = {
target: "node",
node: {
__dirname: false,
},
module: {
rules: [
{
test: /\.node$/,
loader: "node-loader",
},
],
},
};
... but it did not work.
I appreciate any help
Thx:
Carlos
It was my fail.
I got answer from developer.
This library is not supposed to work in the Browser, it is a backend-only library.
/Carlos
After updating a package "office-ui-fabric-react" from "5.124.0 to "6.128.0", all my tests are failing with following error:
FAIL src\***.test.tsx
● Test suite failed to run
\node_modules\office-ui-fabric-react\lib\Callout.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './components/Callout/index';
^^^^^^
SyntaxError: Unexpected token export
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
If you are using create-react-app, You probably don't want to eject it.
To solve this without ejecting we need to be able to modify jest configuration without eject.
Luckily there is this library https://github.com/timarney/react-app-rewired
Follow its instruction and install react-app-rewired in you CRA project
Then you need to change your package.json to include "jest" configuration
"jest": {
"moduleNameMapper": {
"office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1"
},
"transformIgnorePatterns": [
"node_modules/(?!office-ui-fabric-react)"
]
}
Resource: https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
Update
The latest create-react-app already support moduleNameMapper and transformIgnorePatterns configuration.
So there are no need to use react-app-rewired anymore.
https://create-react-app.dev/docs/running-tests/#configuration
export is used in ES modules, whereas because Jest is run in Node it requires common JS modules. See the docs on transformIgnorePatterns on how to convert it to common JS with your TypeScript setup.