I am importing a third party javascript file. When building via webpack I am getting error as 'Window is not defined' . I am able to find the cause of this issue. The reason is when building this javascript file, execution is not happening in browser environment. But I am stuck with how to fix the issue. Any help is appreciated
Solved it using https://www.npmjs.com/package/exenv package.
import ExecutionEnvironment from 'exenv';
if (ExecutionEnvironment.canUseDOM) {
require("third-party-file.js");
}
Related
I am currently using a WebPack configuration that allows for the direct injection of ReactJS into a site. This compiles all of the React code into a single index.js, and I am trying to code split it because the file is getting very large. Without the code split, bootstrap is not loaded, because I have it as part of my WordPress theme. When I use React.lazy() though, I get 404 errors for 0.js which my developer tools say is caused by bootstrap. Here is my index.js:
const Register = lazy(() => import('./components/register/register')); // Import function
and for the rendering:
<Suspense fallback={<div><Loader/></div>}><div id="container"><Register /></div></Suspense>
With the module imported normally like import Register from './components/register/register'; it works perfectly fine, but as soon as I use lazy, the console begins throwing errors. WebPack compiles correctly either way. Here is a screenshot of the console error:
Any help would be appreciated because I usually use Create-React-App and don't know much about customizing WebPack. Thanks!
I worked very hard to figure out what the root of the issue was, and it turned out that the browser was looking for the 0.js chunk on the https://example.com/register/0.js when the file was in fact sitting at https://example.com/wp-content/themes/theme/build/0.js. A few google searches and some trial and error later I figured out a WebPack config that would allow for this to compile correctly. It is as follows:
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/wp-content/themes/theme/build/'
},
Just documenting this in case someone else has the same issue.
I am attempting to use the greensock library for animation, and used yarn to add the library to my project but the files are appearing as "disabled view" (for lack of better word) in my directory. When I attempt to use the library in my JS file I am receiving a Missing plugin? gsap.registerPlugin() error in my browser console and the animation is not executing. I have ha ve attempted to solve this with gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin); but this results in an error (in browser console) that the plugin cannot be found. Any idea how to resolve this issue? What is going wrong? I have also tried to use the CDN delivery script in my HTML but and receiving the same Missing plugin? gsap.registerPlugin() error in the browser console.
Any insight and help is massively appreciated. Screenshot: screenshot of VS code
You need to import the plugins that you want to use in every file that you want to use them in. So the code at the top of the file should be:
import { gsap } from "gsap";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
import { TextPlugin } from "gsap/TextPlugin";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
gsap.registerPlugin(MotionPathPlugin, TextPlugin, ScrollToPlugin);
You can use the GSAP installation page, specifically the install helper, to help you get the correct formatting with your system.
I cant open my vue file with expo. It gives AppEntry.js error. The problem is in AppEntry.js file my vue file hasnt seen so it gives error. I couldnt find how to add .vue extension. I need help guys this error drives me mad.
I updated my expo-cli and vue-native-cli and I use node 10.6.1 version.
node_modules/expo/AppEntry.js
import { registerRootComponent } from 'expo';
import { activateKeepAwake } from 'expo-keep-awake';
import App from "../../App" // The problem part is here. AppEntry doesnt accept .vue file I cant even see it.
if (__DEV__
)
{
activateKeepAwake();
}
registerRootComponent(App);
Also in same place
node_modules/expo/package.json
"sideEffects":
[
"*.fx.js",
"*.fx.web.js"
],
I tried to add .vue here and it didnt work for me. If you ask me to solve this we must add a code which provides AppEntry.js to read .vue extensions.
I expect see the App.vue page but I take AppEntry.js error.
I had similar issue, and I fixed it by installing 'expo-keep-awake' and 'react-native-unimodules' by using 'npm install react-native-unimodules' and 'npm install expo-keep-awake'.
According to this page, you should ensure that react-native-unimodules is installed when using the expo-keep-awake.
Hope this is helpful to you :)
Forgive me if this is something simple as my research has come up empty in regards to this specific issue. I am using Bootstrap the most recent release. I have noticed that there is a file that is new from previous releases called npm.js. I am hosting all the Bootstrap files locally on my hosted web server. I call the file like all the others in the head to the full path to the file. In the console I have this error.
npm.js:2 Uncaught ReferenceError: require is not defined
at npm.js:2
Which is referring to this line.
require('../../js/transition.js')`
Which is from this npm.js file that is in the newest Bootstrap
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
I am unfamilar with this so I am not sure why I am getting this error but, how can I surpress this error and fix this issue? Do I even need this file? From what I understand if I am using modals or tooltips etc I need this. Is this correct?
You will need to download/config the missing libraries or requires. I am not sure which libraries you are using.
You can add the missing libraries to your package.json. Then call for npm install.
I've tried setting up Haste using the official installation guide. Trying to compile a Hello World produces the following error:
Compiling Main into .
Linking haste-compiler/test.js
Linking Main
Linking GHC.Types
Linking GHC.IO.Handle.Text
hastec: /Users/vhsmaia/.haste/jsmods/base/GHC/IO/Handle/Text.jsmod: openBinaryFile: does not exist (No such file or directory)
I've then tried to compile the portable version. The error is now:
hastec: user error (Haste needs to be rebooted; please run haste-boot
Running haste-boot does not amend the error.
I think the problem you have, is that hastec expects your module to have a Main module. Try renaming your file to Main.hs and add a module Main where declaration to the top of the file.