Browserify error with material-design-lite. I install with npm material-design-lite and other package.
const React = require('react');
const ReactDOM = require('react-dom');
const googleApiLoader = require('./GoogleAPILoader');
const MicroBarChart = require('react-micro-bar-chart');
//const mdl = require('./material.min.js');
const mdl = require('material-design-lite');
Others requires work perfectly. So my workaround is to put the material.min.js in script directory (as commented).
[11:59:18] Starting 'copy'...
events.js:141
throw er; // Unhandled 'error' event
^
Error: module "material-design-lite" not found from "D:\\MyAPP\\app\\scripts\\fake_2a2b1a27.js"
at notFound (D:\countingit\node_modules\gulp-browserify\node_modules\browserify\index.js:803:15)
at D:\MyAPP\node_modules\gulp-browserify\node_modules\browserify\index.js:754:23
at D:\MyAPP\node_modules\gulp-browserify\node_modules\browserify\node_modules\browser-resolve\index.js:185:24
at D:\countingit\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:44:14
at process (D:\MyAPP\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:113:43)
at D:\MyAPP\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:122:21
at load (D:\countingit\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:54:43)
at D:\MyAPP\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:60:22
at D:\MyAPP\node_modules\gulp-browserify\node_modules\browserify\node_modules\resolve\lib\async.js:16:47
Related
So I've opened an issue on github (https://github.com/tensorflow/tfjs/issues/7001) about this, but not heard anything as of yet so trying here again.
I've got an react native expo application which I have imported my model and weights as such:
import modelJSON from '../../../assets/model/model.json'
import modelWeights from '../../../assets/model/group1-shard.bin'
however when I then initialise the model, like so:
const model = await tf.loadLayersModel(
bundleResourceIO(modelJSON, modelWeights),
).catch((error: Error) => {
log(400, error)
})
I get the following error:
react-native-logs.fx.ts:22
Warn: Error: modelWeightsID must be a number or number array.
Have you wrapped yor asset paths in a require() statements?
at bundleResourceIO (bundle_resource_io.ts:178:1)
at image-card.tsx:103:1
at Generator.next (<anonymous>)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:22:1)
I'm not sure what i'm doing wrong as I've tried requiring the weights as well to the same result.
The full gist is here: https://gist.github.com/TGTGamer/211b6969bf5488dd28973cd6e71ee87c
The packages used are here: https://www.npmjs.com/package/#tensorflow/tfjs & https://www.npmjs.com/package/#tensorflow/tfjs-react-native
I think you could have used this format when importing the files:
const modelJson = require('../../../assets/model/model.json');
const modelWeights= require('../../../assets/model/group1-shard.bin');
const loadModel = async () => {
const model = await tf.loadGraphModel(bundleResourceIO(modelJson, modelWeights));
return model;
}
So I have a Vue application that I was working on. Later I wanted to add a backend to it using Supabase and deploy to Vercel. However, after I added the backend elements to it, it throws the following error when I did npm run serve:
ERROR Failed to compile with 1 error 1:31:54 PM
error in ./src/supabase.js
Module parse failed: Unexpected token (2:24)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { createClient } from "#supabase/supabase-js";
> var supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
| var supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
| export var supabase = createClient(supabaseUrl, supabaseAnonKey);
Anyone knows what this means? I have another Vue app that was set up via Vite and it ran fine in local, but not in this Vue app that wasn't set up by Vite.
change your .env variable from VITE_SUPABASE_URL to VUE_APP_SUPABASE_URL and import.meta.env to process.env.
Example:
From this
import { createClient } from '#supabase/supabase-js'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
To this
import { createClient } from "#supabase/supabase-js";
const supabaseUrl = process.env.VUE_APP_SUPABASE_URL;
const supabaseAnonKey = process.env.VUE_APP_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
In a vuejs application I need to read pdf file.
I installed pdfjs-dist library. But this library need to custom path of an worker.
This worker is brought by this library.
Now I have one component vuejs which contains an import for this library.
And after resolving promise loading module to pdfjs-dist I set an option on this object.
But all tests failed
import("pdfjs-dist").then((pdfjsLib) => {
// pdfjsLib.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = '/node_modules/pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = './node_modules/pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = './../node_modules/pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = './../../node_modules/pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = './../../../node_modules/pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = '../node_modules/pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = '../../../node_modules/pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = './../../node_modules/pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry.js")
// pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = 'cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'
// pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry.js")
Error is always the same and it says that :
Uncaught (in promise) Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".
Is this the path that generate error or the loading task path of webpack ?
How import worker of pdfjs into component vuejs into webpack dev-server env ?
I tried lot of things but it seems that webpack bring forth many others technicals concepts which increase difficult to understand and correctly import worker. Perhaps it exists other solution into webpack config file but I don't found.
For now the single solution have found is this :
copy the worker module (pdfjs-dist) into the node_modules directory to the public directory of your app for respect structure directory
declare path directly to this public directory and target your worker file (pdf.worker.js)
Those result this code line :
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/build/pdf.worker.js'
I'm trying to create a PWA with VUE.
When trying to register the service worker I do it in the file main.js in the following way:
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
const prod = process.env.NODE_ENV === 'production';
const swLocation = '../public/sw-config.js';
if (
prod &&
('https:' === location.protocol || location.host.match(/(localhost|127.0.0.1)/)) &&
navigator.serviceWorker
) {
navigator.serviceWorker.register(swLocation).catch( error => console.log)
console.log('sw register');
}
As you can see my service worker file is called sw-config.js that is in the public folder at the same level as the index.html.
But at the moment of executing npm run build and executing this from a local server with npm http-server I get the message by console: "sw register"
But also the following errors:
A bad HTTP response code (404) was received when fetching the script.
Failed to load resource: net::ERR_INVALID_RESPONSE
I also noticed that this error is not shown in the console the first time the application is executed but if it is reloaded it is when it starts.
I tried to fix it by cleaning all the registered service workers to verify if that was the error but it did not work, this was the code that I used in the Chrome console:
navigator.serviceWorker.getRegistrations().then(function(registrations) { for(let registration of registrations) { registration.unregister() } })
On Chrome Developer Tools I have this:
Chrome=>Dev Tools=>Application=>Service Workers=>Update on reload (selected)
I do not know how to avoid that error in the console, could someone help me?
Thanks!
Everything in public folder is in the root folder of the application after the build.
So your url should be: const swLocation = '/sw-config.js';
I recently created a react application and would like to test it. I am trying to use Jest as Facebook recommends but have run into an issue. The specific error is as follows:
FAIL __tests__/popup-test.js
● Runtime Error
SyntaxError: Unexpected token [
at Function (native)
at Array.forEach (native)
at Array.forEach (native)
npm ERR! Test failed. See above for more details.
The code for popup-test.js
'use strict';
jest.unmock('../dist/test/popup.js');
const React = require('react');
const ReactDOM = require('react-dom');
const TestUtils = require('react-addons-test-utils');
let Popup = require('../dist/test/popup.js');
describe('Popup', () => {
it('works', () => {
var popupTest = TestUtils.renderIntoDocument(
<Popup />
);
var popupNode = ReactDOM.findDOMNode(popupTest);
expect(1).toEqual(1);
});
});
As you can see, the error does not provide me with any information. I know the problem is with requiring my popup file and I can post the contents of the code here. I was hoping though that someone had encountered this problem before and could guide me in the right direction to solving it.
Best,
Aneury Casado