So I'm developing a chrome extension with React. Everything works fine, but every time a change is made, I have to rebuild the extension with:
npm run build
...and then go back into my browser and load the extension with the build. This works fine, as aforementioned, but it's time consuming, and I feel that there's a better way.
I can't test in-browser because I'm using Chrome APIs (storage sync, etc.)
Is there any other way to test? Or do I have to build every time?
Use rollup-plugin-chrome-extension.
npm init vite#latest
npm i rollup-plugin-chrome-extension#beta -D
Update these files
// vite.config.js
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import { chromeExtension } from "rollup-plugin-chrome-extension";
import manifest from './manifest.json'
export default defineConfig({
plugins: [react(), chromeExtension({ manifest })],
});
// manifest.json
{
"manifest_version": 3,
"name": "Rpce React Vite Example",
"version": "1.0.0",
"action": { "default_popup": "index.html" }
}
Then run npm run dev
Go to chrome://extensions in your browser and drag the dist folder from your project into the window. Start developing with hot reloading.
I'm getting this error: regeneratorRuntime is not defined
My babel.config.js file:
https://www.codepile.net/pile/XqDxeAq6
My webpack.config.js file
https://www.codepile.net/pile/5ndebjVq
Install the runtime dependency:
npm i --save-dev #babel/plugin-transform-runtime
Add the plugin to your babel configuration:
{
"plugins": ["#babel/plugin-transform-runtime"]
}
Uncaught ReferenceError: regeneratorRuntime is not defined in React
Had issue while running the npm test
C:\projects\Test\node_modules\#aws-amplify\ui\dist\style.css:13:root {^
error:
SyntaxError: Unexpected token :
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (node_modules/aws-amplify-react/src/Amplify-UI/Amplify-UI-Components-React.jsx:5:1)
here are my import statements
import Amplify from 'aws-amplify';
import { AuthPiece } from 'aws-amplify-react';
import { Auth, Logger, JS } from 'aws-amplify';
If I comment out the style.css it works without any errors.
But how can I remove this issue so that it doesnt cause issue to others when I commit code.
Had checked all the existing answers provided in different forums.But that doesnt work for me.
I ran into this problem as well, and this thread helped me resolve it. In my case, I needed to install identity-obj-proxy package and map it to the jest config:
npm install --save-dev identity-obj-proxy
package.json
"jest": {
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
}
}
I hope this helps!
Package.json:
"angular-auth0": "3.0.0",
app.js
import auth0 from 'angular-auth0';
Error in console.
angular-auth0.js?2d7e:152 Uncaught ReferenceError: auth0 is not defined
angular-auth0.js:
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = auth0;
/***/ })
/******/ ]);
Using webpack.
Any ideas?
You are most likely missing the auth0-js package.
https://www.npmjs.com/package/auth0-js
Run:
npm install auth0-js
Other possible solution:
https://github.com/auth0/angular-auth0/issues/28
require('angular-auth0/src');
I try to play with react-router but can't make it working with browserify. I'm stuck with this error:
events.js:182
throw er; // Unhandled 'error' event
^
Error: Cannot find module 'react-router-dom' from '/usr/src/app'
at /usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
at process (/usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
at ondir (/usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
at load (/usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
at /usr/src/app/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:152:21)
npm info lifecycle irregular_verbs#1.0.0~start: Failed to exec start script
My first js file is server.js which generate a bundle to load app.js.
I removed everything on my app.js file to be sure that no personal components create a conflict. So it is very light now! But still doesn't work.
My app.js file:
var React = require('react');
require('react-router-dom');
React.render(<div><p>Blop</p></div>, document.getElementById('base_ihm'));
Without the require('react-router-dom');, everything works!
My server.js:
var express = require('express');
var browserify = require('browserify');
var React = require('react');
var jsx = require('node-jsx');
var app = express();
// Constants
const PORT = 8080;
jsx.install();
// Enable compression
var compression = require('compression');
app.use(compression());
// Create a path name bundle.js which call app.js and apply browserify
app.use('/bundle.js', function(req, res) {
res.setHeader('content-type', 'application/javascript');
browserify('./app.js', {
debug: true
})
.transform('reactify')
.bundle()
.pipe(res);
});
// static ressources
app.use(express.static(__dirname + '/static/css'));
app.use(express.static(__dirname + '/static/images'));
// Main route
app.use('/', function(req, res) {
res.setHeader('Content-Type', 'text/html');
res.end(React.renderToStaticMarkup(
React.createElement(
'html', null,
// Header
React.createElement(
'head', null,
// Title
React.createElement('title', null, 'Irregular Verbs'),
// Meta
React.createElement('meta', {charSet: 'UTF-8'}, null),
React.createElement('meta', {name: 'viewport', content: 'width=device-width, initial-scale=1'}, null),
// Custom CSS
React.createElement('link', { rel: 'stylesheet', href: 'main.css' }, null)
),
// Body
React.DOM.body(
null,
React.DOM.div({
id: 'base_ihm',
dangerouslySetInnerHTML: {
__html: React.renderToString(React.createElement('div', null))
}
}),
// Use the path create just before
React.DOM.script({
src: '/bundle.js'
})
)
)
));
});
var server = app.listen(PORT, function() {
var addr = server.address();
console.log('Listening # http://%s:%d', addr.address, addr.port);
});
Is react-router well installed?
There is the content of my package.json file:
{
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.13.3",
"body-parser": "^1.15.2",
"node-jsx": "^0.13.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.0.0",
"browserify": "^14.4.0",
"reactify": "^1.1.1",
"mysql": "^2.11.1"
}
}
I use docker and docker-compose. On my Dockerfile, I added RUN npm ls and RUN ls node_modules: I can see react-router and react-router-dom. So there are here!
Any cache with docker?
I rename my image to be sure to use the good one and not an old one.
I also restart my container using docker-compose up --force-recreate.
So I presume it is ok.
Erreur with server.js where browserify is used
I think I've made a mistake in my server.js file but I have no idea...
There are what I have tried with no success:
I try to add a global:true then global:false at my transform('reactify')
In my Dockerfile, I try to add npm install react-router-dom -g to be sure it was installed
I finaly upgraded my versions. And also tried react-router-dom in version 4.1.1
I replace the require('react-router-dom') by require('./node_modules/react-router-dom') but get the same error (except it was the new path which wasn't found).
Do you have any idea?
Thank you for your help!
Sorry for the late answer. It was finaly a Docker/Docker-compose problem...
Even using docker-compose up --force-recreate, the old image was still used.
I renamed my container in my docker-compose.yml file so at the next start, it created a new container with the new image.