I'v just deployed my app to Heroku but when I run it in a browser the network tells me it cannot find the system.js file which lives in jspm_packages/system.js
The app works fine locally so I presume heroku is not installing jspm? Do I need to add a script just for Heroku?
here is the jspm settings in my my package.json
"jspm": {
"directories": {
"baseURL": "www"
},
"dependencies": {
"google-maps-api": "npm:google-maps-api#^1.1.0",
"react": "npm:react#^0.14.2",
"react-dom": "npm:react-dom#^0.14.2"
},
"devDependencies": {
"babel": "npm:babel-core#^5.8.24",
"babel-runtime": "npm:babel-runtime#^5.8.24",
"core-js": "npm:core-js#^1.1.4"
}
},
"devDependencies": {
"babel-eslint": "^4.1.3",
"eslint-plugin-react": "^3.5.1",
"jspm": "^0.16.14"
}
You do not need to submit your jspm packages on heroku. For production run:
jspm bundle-sfx lib/main
and replace your scripts with:
<script src="build.js"></script>
(or wherever is your bundled javascript file is)
Related
I have the ESLint installed globally in VSCode. In one of my React projects it is working. Later, I created a React Native projects using Expo and it isn't running there.
I saw that I had the following settings in my packages.json file for my React project:
"dependencies": {
"#next/font": "13.1.1",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0"
}
I copied the
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
lines into my React Native project like so:
"dependencies": {
"expo": "~47.0.12",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1"
},
but it still doesn't work, even after closing and reopening my React Native project.
I came across ESLint not working in VS Code?
I've tried running eslint in a terminal in VSCode, but I get the following error in both my React and React Native projects.
C:\Users\myuser\source\globomantics> eslint
eslint : The term 'eslint' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included,
verify that the path is correct and try again.
At line:1 char:1
+ eslint
+ ~~~~~~
+ CategoryInfo : ObjectNotFound: (eslint:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
I am trying to expo start in my project and running it on tunnel using IOS. I have tried searching for it, creating new project and tried everything I found on internet but nothing works.
My package.json
{
"name": "test_proj",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"expo": "32.0.0",
"react": "16.6.3",
"react-native": "0.58.5"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.52.0",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
App.json
{
"name": "test_proj",
"displayName": "test_proj",
"expo": {
"sdkVersion": "32.0.0"
}
}
From the Expo documentation
Expo SDK v32.0.0 is based once again on React Native 0.57 “September 2018”, the same major version as SDK 31.
So as far as I am aware SDK 32 only works with react-native: 0.57.1 so trying other versions won't work.
In Expo projects the react-native dependency usually looks like this in the package.json
react-native: "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
So returning your react-native dependency to what it was originally may fix the issue.
An alternative reason for the mismatch error is that it can be caused by using the bundler with one version of react-native and then trying to use a different version without clearing the bundler.
To fix this error you can do it by:
Closing the bundler
Clearing the cache
Restarting the bundler
Restarting the app
I wrote a small Excel add-in using node.js with jQuery. The source code was generated by "yo office". Below is the content of package.json file.
{
"name": "my-office-add-in",
"description": "",
"author": "",
"version": "0.1.0",
"scripts": {
"start": "browser-sync start --config bsconfig.json",
"validate": "./node_modules/.bin/validate-office-addin"
},
"dependencies": {
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"datatables.net": "^1.10.16",
"datatables.net-dt": "^1.10.16",
"office-addin-validator": "^1.0.1",
"office-ui-fabric-js": "^1.3.0"
},
"devDependencies": {
"browser-sync": "^2.18.5",
"#types/office-js": "^0.0.37"
}
}
I need to get rid of BrowserSync usage and use another command to start my application. The reason I need to do that is my Excel add-in is being placed onto a shared folder and used by multiple users. BrowserSync synchronizes views in browsers of different users who work simultaneously.
Can someone show me the alternative solution? Thanks in advance.
You can use any package that spins up an https web server.
http-server is an alternative you can get using npm.
https://www.npmjs.com/package/http-server
To install:
npm install http-server --save-dev
From there change your start script to "start": "http-server --ssl"
That will start a server at your root directory and you can navigate to your index file.
With almost every npm package that I'm trying to use with vue.js 1.0 I receive this error:
{ Error: Cannot find module '!!./../../../node_modules/css-loader/index.js!./../../../node_modules/vue-loader/lib/style-rewriter.js!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./dashboard.vue' from '/Users/jamie/Code/forum/node_modules/vue-html5-editor/dist'
at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:46:17
at process (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:173:43)
at ondir (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:188:17)
at load (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:69:43)
at onex (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:92:31)
at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:117:15)
It drives me nuts! I'm using vue.js with browserify. Looked everywhere on the web:
https://github.com/webpack/css-loader/issues/240
https://github.com/webpack/css-loader/issues/180
https://github.com/webpack/css-loader/issues/295
https://github.com/webpack/css-loader/issues/163
Nothing seems to work! What am I doing wrong!?
2 packages where I've this problem:
https://github.com/lian-yue/vue-upload-component/
https://github.com/PeakTai/vue-html5-editor
My gulpfile:
const elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
require('laravel-elixir-stylus');
elixir(mix => {
mix.browserify('main.js');
mix.styles([
'./node_modules/normalize-css/normalize.css',
'./node_modules/nprogress/nprogress.css',
'./node_modules/sweetalert/dist/sweetalert.css',
]);
mix.stylus('app.styl');
});
A solution would really help me out.
--EDIT--
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browserify-official": "^0.1.3",
"laravel-elixir-stylus": "^2.0.3",
"vue-html5-editor": "^0.5.1"
},
"dependencies": {
"browserify": "^13.1.0",
"laravel-elixir-vueify": "^2.0.0",
"normalize-css": "^2.3.1",
"nprogress": "^0.2.0",
"stylus": "^0.54.5",
"sweetalert": "^1.1.3",
"vue": "^1.0.26",
"vue-resource": "^0.9.3",
"vue-router": "^0.7.13",
"vue-spinner": "^1.0.2",
"vue-upload-component": "^2.0.0-beta"
}
}
Those are webpack packages and you are using browserify. If you need to use webpack packages you should be using webpack as your bundler.
I did have a go at installing the vue-upload-component package to see how easy it would be with browserify and elixir but it's awkward to say the least. I didn't get it working because it uses babel transforms to compile the vue files, so first you need to pull them in manually and then you would likely need to write an elixir extension to use those transforms to get it to work. Obviously each webpack package will be different so you would need to do that each time you install one, which is hardly convenient.
I had some luck changing the configuration output of the Vue component I wanted to use to use webpack -p instead of just webpack.
I could then take that output without the hot module code and put it through browserify:
browserify file.js --standalone SomeLibrary > file.browser.js
Where file.js is the webpack -p output, SomeLibrary is the name you want on the global window scope from the browserify packaging, and file.browser.js is your resultant file to include in your project.
I have built a web app on top of Stephen Grider's ReduxSimpleStarter, a react-redux boilerplate. It uses Webpack for bundling. Now I want to host my app on firebase. When I do so, the bundling doesn't work, and I am left with a simple index.html.
Could someone please explain how I trigger Webpack bundling for an app that is not locally hosted?
These files might be relevant, though I am not sure.
//package.json
{
"name": "testapp",
"version": "0.0.0",
"description": "testapp",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.9.1",
"babel-preset-stage-1": "^6.1.18",
"jquery": "^2.2.0",
"lodash": "^3.10.1",
"material-ui": "^0.14.4",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-tap-event-plugin": "^0.2.2",
"redux": "^3.0.4",
"redux-promise": "^0.5.1"
}
}
.
//webpack.config
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel'
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
I found the solution. Include "webpack": "^1.12.9" in the dependencies object. Then, change
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
to
"scripts": {
"start": "node ./node_modules/webpack/bin/webpack.js"
},
I know it is answered but this is an additional note to the answer which will help a lot.
Tip 1:
When you deploy the application on Firebase and try to access browser (especially React,Redux) application you may get an error saying :
can not find module "run" in bundle.js
So as mentioned in the answer it is must, and after this- you must execute the command: npm start
This command will regenerate the bundle.js and will not include/require the "run" module which we were using while development. After this- you can deploy the latest bundle.js to the server.
Tip 2: In webpack.config inside output:{...} section you should set path and publicPath to a new directory i.e. /public/. Otherwise on Firebase host when you mentioned 'public' directory as default directory to deploy - then it will create problem and application will not run on Firebase server.
Note: actually I am not sure and do not know how to tell firebase to use files on my root and not in my 'public' folder
But I think that outputting the Webpack generated files and keeping other public files (css, html) inside public folder is good as otherwise firebase deploy may upload other files sitting in root directory as well. (correct me if I'm wrong).
Ok so finally when you are updated the webpack.config output values as:
output: {
path: __dirname+ '/public',
publicPath: '/public/',
filename: 'bundle.js'
}
Then (finally making sure you are done with Tip.1 as well) and run the command to get latest bundle.js npm start. And finally you are good to go and deploy using:firebase deploy I believe you may have followed the initial steps of initiating firebase login and other init commands before running last deploy command.
Note: The "firebase serve" command is also helpful to debug and test if application is running well on local machine then it will run well on live Firebase server as well.