I'm trying to use require.ensure in my react component:
componentDidMount() {
require.ensure([], () => {
require('public/jscripts/brightcove/index.js');
});
}
but keep getting an error: Cannot set property 'default' of undefined
It happens at this point in the brightcove videojs script:
// At this point, `window.videojs` will be the earliest-defined copy of this
// version of videojs.
var videojs = window.videojs;
// https://github.com/videojs/video.js/issues/2698
videojs['default'] = videojs;
Does anyone know why this might be happening?
The full script is here btw, I saved it as a local file hence the path public/jscripts/brightcove/index.js: https://players.brightcove.net/1752604059001/B1xXFuBodW_default/index.js
Related
I followed https://docs.meteor.com/packages/dynamic-import.html to set up dynamic imports, and it works fine on localhost.
For context, I am creating a blog (Meteor/React/Apollo) which renders MDX files, and these files need to be imported, so I have a list of all my posts as such:
import("./imports/posts/61a000d03a1931b8819dc17e.mdx")
import("./imports/posts/619cae2f03f4ff710aa3d980.mdx")
import("./imports/posts/619e002d386ebf2023ea85c3.mdx")
import("./imports/posts/619fff7c5b312d7622acda86.mdx")
I have a Post.jsx component:
import React, { useState, useRef } from "react"
import { useHistory, useParams } from "react-router-dom"
import { useQuery } from "#apollo/client"
import { GET_POST_ID } from "../../api/posts/queries"
const Post = () => {
const Post = useRef()
const history = useHistory()
const { slug } = useParams()
const [loadedPost, setLoaded] = useState(false)
const [viewer, showViewer] = useState(false)
const open = () => showViewer(true)
const { data, loading, error } = useQuery(GET_POST_ID, { variables: { slug }})
if (loading) return null
if (error) {
console.log(error)
return null
}
import(`./posts/${data._id}.mdx`).then(MDX => {
Post.current = MDX.default
setLoaded(true)
}, (err) => {
console.log(err)
})
return loadedPost ? (
<>
<div className="postContent">
<div className="markdownOverride markdown-body">
<Post.current />
</div>
</div>
</>
) : null
}
export default Post
This works well and good on my local network. However, if I attempt to access it from outside my local network, an error is thrown in the console that all the blog modules are not found. The Apollo/GraphQL portion works fine, but the actual module can't be imported.
How do I get this to work outside of localhost?
Thanks.
EDIT: The error messages are, for each post:
Uncaught (in promise) Error: Cannot find module '/imports/posts/61a000d03a1931b8819dc17e.mdx`
And when I load the actual post page:
Uncaught (in promise) TypeError: Failed to fetch
Isn't your error thrown by console.log(err) ?
import(`./posts/${data._id}.mdx`).then(MDX => {
Post.current = MDX.default
setLoaded(true)
}, (err) => {
console.log(err) // <---- here
})
This means your path isn't right for /imports/posts/61a000d03a1931b8819dc17e.mdx.
To me you can't use changing parameters when doing dynamic imports.
./posts/${data._id}.mdx, because your meteor or webpack compilation needs to treat all the data._ids avalaible in your database in order to compile and prepare the file...
This might be why it works in development mode but not in production.
You can just do dynamic imports of modules or components (already compiled), no more to me. Take a look at your output compilation bundles, and try to find where are your components...
It turns out that I needed to specify the ROOT_URL correctly when initializing Meteor. With an ngrok http tunnel on port 3000 pointing to https://some-hash.ngrok.io, I had to start Meteor with: ROOT_URL="https://some-hash.ngrok.io" meteor. When I do this, I can access it fine and everything loads from my local IP and the ngrok URL, but I can't seem to load it up from localhost (it times out).
Specifying my local or public IP did not work, I could not get it to load through any of those methods.
I am trying to build a face detection application with opencv4nodejs, vue + electron-builder. During the process of application setup I cam across a problem where I get the following error during npm run serve after installing opencv4nodejs.
Failed to compile.
./node_modules/opencv4nodejs/build/Release/opencv4nodejs.node 1:2
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)
It would be great if some one can help me with it. Thank you in advance
Update: I have added my view.config.js for reference
module.exports = {
chainWebpack: config => {
config.module;
// add ts files
// .rule('ts')
// .use('ts-loader')
// .loader('ts-loader')
// .tap(options => {
// modify the options...
// return options
// })
}
};
As our friend #Eldar commented adding node-loader to vue.config.js works for me. Thank you
module.exports = {
chainWebpack: config => {
config.module .rule('ts')
.use('ts-loader')
.loader('ts-loader')
.end()
.rule(/\.node$/)
.use('node-loader')
.loader('node-loader')
.end()
}
};
Hope this is useful folks.
I am using Cypress to test my Electron application.
Since Cypress uses the browser mode, FS is not supported.
So I am getting this error:
Error in mounted hook: "TypeError: fs.existsSync is not a function"
And I found this on the documentation:
https://docs.cypress.io/api/commands/task.html#Event
So I added this on my test:
it('Sample test', () => {
cy.task('readSettingsJson', settingsFolder).then((content) => {
// This can print the JSON file contents correctly
console.log('content = ' + content)
})
})
And on my plugins/index.js:
on('task', {
readSettingsJson(foldername) {
if (!fs.existsSync(foldername)) {
fs.mkdirSync(foldername, { recursive: true })
// some command to copy the file
} else {
// This is what I am testing at this moment
return fs.readFileSync(path.join(filename, '/settings.json'), 'utf8')
}
return null
}
})
However, it doesnt seem to work. I still get the error:
Error in mounted hook: "TypeError: fs.existsSync is not a function"
And despite the test printing the json file correctly, my app still can't load the JSON file.
Am I missing anything? Help please!
Cypress support for Electron apps are in very early alpha release:
https://www.cypress.io/blog/2019/09/26/testing-electron-js-applications-using-cypress-alpha-release/
As an alternative, try using Spectron, which is the testing framework that is currently recommended by Electron team:
https://www.electronjs.org/spectron
I want to integrate my theme from styled-components to styleguidist. According official docs I've created ThemeWrapper and added this into config:
...
const path = require('path');
const styleguideComponents = {
Wrapper: path.join(__dirname, '/srs/styled-components/ThemeWrapper.tsx'),
};
...
module.exports = {
...
styleguideComponents,
...
};
But when I try to build it next error appears:
Module not found: Can't resolve 'rsg-components/Wrapper' in
'/My/User/Folder/Desktop/trello/front-end/node_modules/react-styleguidist/lib/rsg-components/ReactExample'
Probably the path is not correct. What is the right one, and how to change it?
Well, after changing component mask in styleguidist config, it works fine. I thing the problem was with loading default styleguidist page(as mentioned in error message), and after actual component were added, the error doesn't appear anymore.
I just began to use Broadcasting with Pusher and Echo. My problem is that I'm getting an error and I can't find how to resolve it. The error message look pretty straigthfoward, but I have no idea where I should head to get rid of it.
My laravel is an upgrade from Laravel 5.3. I uncommented the App/Providers/BroadcastServiceProvider::class into config.php.
I created an event and set the Private channel.return new PrivateChannel('dealer.'$this->client->dealer_id);
I added the new channel into routes/channels.php
Broadcast::channel('dealer.{dealerId}', function ($user, $dealerId) {
return (int) $user->dealer_id === (int) $dealerId;
});
I added this to bootstrap.js
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'my-secrect-key'
});
I also added everything to the .env file. Finally, I added the channel to the script at the end of the applayout.blade.php
Echo.private(`dealer.1`)
.listen('NewClient', (e) => {
console.log(e);
});
When I load the page, this is the error I got from the console:
Pusher : Error : {
"type":"WebSocketError",
"error":{
"type":"PusherError",
"data":{
"code":null,
"message":"Auth value for subscription to private-dealer.1 is invalid: should be of format 'key:signature'"
}
}
}
What am I missing/doing wrong?
Upgrading Laravel 5.3 to 5.4 you should make changes in your .env file
Change From:
PUSHER_KEY
PUSHER_SECRET
to
PUSHER_APP_KEY
PUSHER_APP_SECRET
Someone answered it on Laracast. Link