I'm getting the error from the title in my Vue app with Vite. I seem to have tried everything that I could find online but nothing really seems to work in my case.
The problem started when I installed aws-sdk to connect to my linode bucket storage, and importing it like import aws from 'aws-sdk'.
I tried almost everything from this issue, and quite a few variants from that in vite.config.js that I found elsewhere.
When using the following in my vite.config.js it works in dev:
define: {
global: "window",
},
But gives me the following error in prod:
[vite]: Rollup failed to resolve import "aws-sdk" from "/var/www/html/kwigy/src/linode.js".
[...]
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
[...]
And that doesn't seem to be a good solution anyway according to what I found online.
Adding a script to the tag or making a file that imports the said script in main.js also works in dev but gives the same error in prod.
I also tried to install requirejs, to use it as const aws = require('aws-sdk') but I have to admit I do not really understand how to configure that from the docs.
Does anybody have a solution to my problem? I have been stuck for a full day on this now.
Related
I am trying to import a custom web component from a web component library built with StencilJS in my Vue application created with Vite (version 4.0.4). This is the code in my main.js file:
import { createApp } from 'vue';
import App from './App.vue';
import { defineCustomElements } from '#arnab7/cheesejs/loader';
createApp(App).mount('#app');
defineCustomElements(window);
In my App.vue, this is what is ausing the issue:
<template>
<div id="body">
<checker-board></checker-board>
</div>
</template>
The <checker-board></checker-board> is causing the error. The full error text is:
"GET http://localhost:5174/node_modules/.vite/deps/checker-board.entry.js?import net::ERR_ABORTED 504 (Gateway Timeout)
TypeError: Failed to fetch dynamically imported module: http://localhost:5174/node_modules/.vite/deps/checker-board.entry.js?import undefined
index-e0c21bd2.js:917 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isProxied') at initializeComponent (index-e0c21bd2.js:917:23)"
Removing the web component removes all errors. This is the link to the library (which I created) I am trying to import from: https://github.com/arnab4477/CheeseJS I have followed all the instrutions from Stencil docs while building it and do not see any issue with the library itself. I have seen some similar issues with other libraries as well. However, this library is lazy loaded (Stencil lazy loads all the components) which might be causing the issue with Vite.
I have looked at many similar issues and tried multiple solutions with no success
There are some similar issues on Github where Vite throws this error for other dependencies as well. I followed the suggested solutions but none of them worked. I tried
restarting the server
deleting and re-installing node_modules
deleting the .vite folder from the node_modules, but this would reappear anyway after a restart
running this command which I found on github that solved someone's issue: node ./node_modules/esbuild/install.js
I have also seen this very similar question: Importing Bootstrap to Vue 3 causes net::ERR_ABORTED 504 (Gateway Timeout) where restarting and re-installing node_modules fixed the issues. I have tried the solutions but it does not work for me.
I don't know what else to do. Someone please help me.
Edit:
Just to make sure that the problem was on Vite's end and not the library's end, I quickly created a Create React App and tested it there. It works perfectly. So at least I have a solution, but unfortunately it seems like I have to use CRA now which I really didn't want to touch ever again. Anyone have any solution for Vite please?
So I am trying to build my custom NuxtJS module. So far I've read the docs, looked at some existing real packages, and followed these:
https://nuxtjs.org/docs/directory-structure/modules/#write-your-own-module
https://nuxtjs.org/tutorials/creating-a-nuxt-module
This is my simple code located in modules/pauth/index.js
export default function () {
// const { nuxt } = this
console.log('robert modules')
}
I have tried different variations I could find online but nothing seems to be working. The project compiles fine, and there is no errors.
If I make a typo in the name of module in nuxt.config.js it will give me an error, which means it is actually seeing my module.
This is my config file (part of it):
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
'#nuxtjs/laravel-echo',
'#nuxtjs/axios',
'vue-social-sharing/nuxt',
'#nuxt/image',
'vue-scrollto/nuxt',
'#nuxtjs/moment',
'~/modules/pauth',
],
I am expecting to see my console.log but nothing seems to happen. It's like it's ignored or something. I also tried to inspect the NuxtJS instance in the browser but I did not see my module there.
I am also constantly rebuilding with npm run dev.
What am I doing wrong?
I tried to make a small app using peerjs but when I tried to import Peer from "peerjs", my code crash with:
Uncaught ReferenceError: assignment to undeclared variable parcelRequire
At http://localhost:8080/_snowpack/pkg/peerjs.js:20
I didn't find anything on internet. And I don't why snowpack is using parcel because I didn't install any plugin
I tried to import Peerjs with Skypack but it's same.
On the other hand, when I test to import another library, here I tested with canvas-confetti, it work. So I don't know why Snowpack doesn't like Peerjs
This is an issue with the peerJs library.
You can see the line of code that is causing this issue here
You could perhaps mitigate it by setting window.parcelRequire before importing the peerJs library. Consider filing an issue to peerJs's github.
There is a similar error in parcel-bundler https://github.com/parcel-bundler/parcel/issues/1401 used by the status-widget developed by Atlassian https://bitbucket.org/atlassian/statuspage-status-widget/issues/3/uncaught-referenceerror-parcelrequire-is
You can fix this by adding esModuleInterop: true and allowSyntheticDefaultImports: true to tsconfig.json
For Instance Fix
Add variable in
node_modules/
peerjs/dist/peerjs.js
var parcelRequire
instead of
parcelRequire
I have been scratching my head for last one day on this. I am using Ngx-Toastr package in my angular application. Below are the points which I think help you understand the problem.
In dev server (ng serve) I didn't get any error there was no Nullinjector problem, then I make a production build using the following command (ng build). Until this point everything works fine. Now I need to optimize the bundle size so I ran this (ng build --prod). Build was successful no error Now it's time to serve the code (I am using Node server to serve this). Here the problem starts -
First it's asking for
'NullInjectorError: No provider for ToastrService'
which is coming from the Ngx-Toastr Package it self and It makes sense so I add that service to the appmodules and also in other Lazy loaded modules in the providers array. So after this the error has gone . But next is what I want to talk about -
Next it is asking for 'NullInjectorError: No provider for Overlay!' So I though there must be this service from the package which needs to be added in the providers array. So I tried to import it from the package it self and to add it in the providers array like below:
import { Overlay } from 'ngx-toastr/overlay/overlay';;
doing so got the below error
Module not found: Error: Can't resolve 'ngx-toastr/overlay/overlay'
Next I tried searching for this problem and found some stackoverflow solutions which suggest to add the following line:
import {OverlayModule} from '#angular/cdk/overlay';
I added this module in the imports array of every modules. Nothing got changed.
Now I have no clue what to import and where to import. And I am also not sure whether I am going right or not or where should I start looking into it. I also doubt that this error is coming from that package or what!! cause It should work without implicitly importing those services.
I run the following command to get the error ahead of production build:
ng serve --prod --optimization=false
Please also mention how to debug the following error, sometime after production build we get error like this which is undoubtly makes no sense:
ERROR Error: "StaticInjectorError[t -> t]:
StaticInjectorError(Platform: core)[t -> t]:
NullInjectorError: No provider for t!"
I hope my explanation makes some sense to you. Thanks for your time and sorry for this long question.
Lastly FYI : I have already removed node-modules and re-installed it.
Make sure you're using a version of ngx-toastr compatible with your version of angular and typescript. https://github.com/scttcper/ngx-toastr#dependencies
ngx-toastr v13 requires angular >= 10
Although I am able to start the npm project using npm start without any issues with webpack or babel, once I run npm test, I find the following error related to testing App.js using App.test.js (where App.js imports ApolloClient):
TypeError: Cannot assign to read only property '__esModule' of object '[object Object]'
| import ApolloClient from 'apollo-boost';
| ^
at node_modules/apollo-boost/lib/bundle.cjs.js:127:74
at Array.forEach (<anonymous>)
at Object.<anonymous> (node_modules/apollo-boost/lib/bundle.cjs.js:127:36)
Essentially, I'm confused as to why I get an error when running the test but not when starting the project.
I've tried adding in a number of babel plugins to both .babelrc and in my webpack config file:
#babel/plugin-transform-object-assign
#babel/plugin-transform-modules-commonjs
babel-plugin-transform-es2015-modules-commonjs
However, I haven't been able to resolve the issue. My thinking was that this is related to the fact that the file that fails to compile was originally CommonJS.
I was only able to find something relatively similar here, https://github.com/ReactTraining/react-router/pull/6758, but I didn't find a solution.
Is there something that I'm missing specifically related to running tests? I should also mention I've tried frameworks other than Jest and ran into the same issue.
EDIT:
I removed everything from App.test.js except the imports to isolate the issue so it just contains the following:
import React from 'react';
import { shallow } from 'enzyme/build';
import App from './App';
UPDATE:
I was able to resolve the initial error by upgrading apollo-boost from version 0.3.1 to 0.4.2. However, I now have a different error that is similarly frustrating. I am using Babel 7 and have added the plugin #babel/plugin-syntax-dynamic-import to both my .babelrc and to my webpack.config.js files. Despite this, I get the following error related to the use of a dynamic import in App.js when running the Jest to test App.test.js:
SyntaxError: Support for the experimental syntax 'dynamicImport' isn't currently enabled
Add #babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
I'm not sure if there is a parsing error or something else, but I've tried numerous things that have not worked. The closest discussion I could find related to this problem is, https://github.com/facebook/jest/issues/5920, however, the proposed solutions don't work for me.
UPDATE:
One thing that I'm trying is to avoid duplication of the babel options as right now they're both in .babelrc and in the babel-loader options within webpack.config.js. From what I found online (Whats the difference when configuring webpack babel-loader vs configuring it within package.json?), the way to make webpack use the settings in .babelrc is to not specify options. However, doing so results in the same error described above showing up only this time when running npm start. I will add that the project that was originally created using create-react-app, however, in order to support multiple pages, I needed to customize webpack's configuration and so ejected from it. I'm not sure why this is so convoluted.
its probably a babel configuration issue, I'm pretty sure jest needs to be compiled to work with create-react-app...
did you specify a setup file in package.json:
"jest": {
"setupFiles": [
"/setupTests.js"
]
}
and in setupTests.js:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
It turns out that one of the components in the project's src directory had its own local package.json file even though it wasn't being used and was not installed as a local dependency in the top level package.json (instead imports were done using relative urls). For some reason, the existence of this file changed the behavior of webpack and other tools when starting and testing the project such that none of the top level configurations were used for files within directories with separate package.json files. Once I removed these local package.json files from the components sub-directory, all the prior issues were resolved. One hallmark of this problem is that compilation errors were not showing up for JavaScript files that weren't nested under an alternate package.json file.
Hopefully this is useful for anyone that encounters similar errors as I don't think the cause can be directly determined from the compiler messages alone.