Related
I've built and pushed my minified code to a site to test on various devices and it works on windows desktop, various android devices that I've tested with but when I go to iOS devices my code doesn't run and displays like this. (I realize now that every browser on iOS is basically safari and that this is a safari issue)
Here's the link for the isolated code if you want to load it up on your own
https://app.gohighlevel.com/v2/preview/6fAe9cXYdS11V8TSUgIL?notrack=true
I thought maybe I need to change my babelrc to include more devices but I feel like it has something to do with my overall webpack build config I'm just at a loss as to why.
Here are what my configs look like
webpack.config.common.js
const paths = require('./paths');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
);
module.exports = {
entry: ['core-js/stable', 'regenerator-runtime/runtime', paths.appIndexJs],
output: {
filename: '[name].[contenthash].js',
path: paths.appBuild,
publicPath: './'
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', 'scss']
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebPackPlugin({
filename: 'index.html',
inject: true,
template: paths.appHtml
}),
new ESLintPlugin({
formatter: eslintFormatter,
eslintPath: 'eslint',
resolvePluginsRelativeTo: __dirname
})
],
module: {
rules: [
{
test: /\.(js|ts)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
loader: require.resolve('file-loader'),
exclude: [/\.(js|mjs|jsx|ts|tsx|scss)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
]
}
}
webpack.config.prod.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const TerserPlugin = require('terser-webpack-plugin');
//const postcssNormalize = require('postcss-normalize');
const commonConfig= require('./webpack.config.common');
const { merge } = require('webpack-merge');
module.exports = merge(commonConfig, {
mode: 'production',
devtool: 'source-map',
output: {
publicPath: './'
},
module: {
rules: [
{
test:/\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: {
getLocalIdent: getCSSModuleLocalIdent
}
}
},
'resolve-url-loader',
'sass-loader'
],
sideEffects: true
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
],
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin({
cssProcessorOptions: {
map: {
inline: false,
annotation: true
}
}
}),
new TerserPlugin({
terserOptions: {
sourceMap: true
},
parallel: true
})
],
}
})
babelrc
{
"presets": [
"#babel/preset-typescript",
[
"#babel/preset-env",
{
"targets": {
"browsers": [
"> 0.1%",
"ios >= 6"
]
},
"useBuiltIns": "usage",
"corejs": 3
}
],
"#babel/preset-react"
],
"plugins": [
"react-hot-loader/babel",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-runtime"
]
}
package.json
//....package.json details
"devDependencies": {
"#babel/core": "^7.20.2",
"#babel/plugin-transform-runtime": "^7.19.6",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#types/react": "^18.0.25",
"#types/react-dom": "^18.0.9",
"babel-loader": "^9.1.0",
"babel-plugin-import": "^1.13.5",
"clean-webpack-plugin": "^4.0.0",
"core-js": "^3.26.1",
"css-loader": "^6.7.2",
"eslint": "^8.28.0",
"eslint-config-react-app": "^7.0.1",
"eslint-loader": "^4.0.2",
"eslint-webpack-plugin": "^3.2.0",
"file-loader": "^6.2.0",
"gulp": "^4.0.2",
"gulp-inline-source": "^4.0.0",
"gulp-replace": "^1.1.3",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.7.0",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"react-dev-utils": "^12.0.1",
"react-hot-loader": "^4.13.1",
"regenerator-runtime": "^0.13.11",
"resolve-url-loader": "^5.0.0",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.6",
"url-loader": "^4.1.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"axios": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.56.1",
"swr": "^1.3.0"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
"> 0.1%",
"ios >= 6"
]
}
So Like I said in my comment the issue ended up being my terser minifier. The version I posted is the latest version as of this post and apparently will not work on safari once minified as when I built the code without the minfier it worked fine on safari.
The version of Terser plugin I rolled back to is "terser-webpack-plugin": "4.2.3".
There maybe other version that works but this is the version that worked for me and fixed my issue
All,
I am trying to include babel-plugin-proposal-class-properties in my code bundle, but I get the following error;
2020-01-07 08:19:31.593 [error][tid:NSOperationQueue 0x2817acc40 (QOS: UNSPECIFIED)][RCTCxxBridge.mm:414] Failed to load bundle(http://169.254.99.36:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(index.js: Cannot find module 'babel-plugin-plugin-proposal-class-properties' from '/Users/bburch/Projects/systems/SystemsDockConfig'
- Did you mean "#babel/plugin-proposal-class-properties"? (null))
My .babelrc looks like;
{ "presets": [
"#babel/env",
"#babel/react", ], "plugins": ["proposal-class-properties",] }
I also have tried this syntax;
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": ["#babel/plugin-proposal-class-properties"]
}
In either case, somehow the "plugin" part of the package name is being doubled and of course the module is not found when that happens.
My package.json;
{
"name": "SystemsDockConfig",
"version": "0.0.2",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/plugin-syntax-object-rest-spread": "^7.7.4",
"#babel/preset-env": "^7.7.7",
"buffer": "^5.0.7",
"eslint": "^6.8.0",
"eventemitter3": "^4.0.0",
"native-base": "^2.13.8",
"react": "16.8.3",
"react-native": "0.59.10",
"react-native-ble-plx": "1.1.0",
"react-native-camera": "^1.0.0",
"react-native-router-flux": "^4.0.6",
"react-native-version-number": "^0.3.1",
"react-native-wheel-datepicker": "^2.1.8"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/runtime": "^7.6.3",
"babel-jest": "^24.9.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
I suggest you change your .babelrc to babel.config.json and use{
make sure you install
npm i --save-dev #babel/plugin-proposal-class-properties
this should work
bable.config.json
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
I'm trying to study rails with angular but I stock with implementing scss-loader. I already search this in google. I already add what they are trying to do, but unfortunately nothing happen and I always got this error
Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi".
I add scss.d.ts
declare module "*.scss" {
const content: string
export default content
}
and here is my environment.js
const { environment } = require('#rails/webpacker')
const typescript = require('./loaders/typescript')
environment.loaders.prepend('typescript', typescript)
environment.loaders.prepend('html', {
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
minimize: true,
removeAttributeQuotes: false,
caseSensitive: true,
customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
customAttrAssign: [ /\)?\]?=/ ]
}
}]
})
environment.loaders.prepend('style', {
test: /\.(scss|sass|css)$/,
use: [{
loader: "to-string-loader"
}, {
loader: "css-loader"
}, {
loader: "resolve-url-loader"
}, {
loader: "sass-loader"
}]
})
module.exports = environment
even add a stylesheet_pack_tag
<%= stylesheet_pack_tag 'application' %>
<div>
<default-selector></default-selector>
</div>
<%= javascript_pack_tag 'application' %>
I got error. Does my version of my sass-loader matters here?
{
"name": "acbook_angular",
"private": true,
"dependencies": {
"#angular/common": "^7.2.8",
"#angular/compiler": "^7.2.8",
"#angular/core": "^7.2.8",
"#angular/platform-browser": "^7.2.8",
"#angular/platform-browser-dynamic": "^7.2.8",
"#angular/router": "^7.2.10",
"#rails/webpacker": "^4.0.2",
"core-js": "^2.6.5",
"html-loader": "^0.5.5",
"rxjs": "^6.4.0",
"ts-loader": "^5.3.3",
"typescript": "^3.3.3333",
"zone.js": "^0.8.29"
},
"devDependencies": {
"css-loader": "^2.1.1",
"resolve-url-loader": "^3.0.1",
"sass-loader": "^7.1.0",
"to-string-loader": "^1.1.5",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1"
}
}
I already solve it by replacing my environment
environment.loaders.prepend('style', {
test: /\.(scss|sass|css)$/,
use: [{
loader: "to-string-loader"
}, {
loader: "css-loader"
}, {
loader: "resolve-url-loader"
}, {
loader: "sass-loader"
}]
})
to this
environment.loaders.insert('sass', {
test: /\.scss$/,
use: [
"to-string-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
});
and thanks for this link
I've built a Node/React/Webpack app and just deployed it. Everything works just like on localhost for my desktop (Ubuntu 16.04 with Chrome and Firefox) and from an Android Galaxy Core phone using Chrome, but on an iPhone 5S using Safari and Firefox I don't get anything except the name of the app showing up in the title of the tab.
I don't think it's a case of CSS messing with me - I tried to go directly to one of the internal pages and it didn't redirect me to the main page like it should have, so I think it isn't loading at all.
Are there any common gotchas with this? This is the second Node/React/Webpack app I've built, using pretty similar methods, and the first one did fine on everything.
Here is my package.json file - if there's anything else that would be helpful to see just ask.
{
"name": "last-minute",
"version": "1.0.0",
"description": "connect to others nearby for last-minute hanging out",
"main": "webpack.prod.js",
"engines": {
"node": "9.5.0",
"npm": "6.1.0"
},
"scripts": {
"test": "jest --config jest.config.json",
"start": "node server/server.js",
"build": "webpack --config webpack.prod.js",
"dev": "webpack --config webpack.dev.js --mode development && node server/server.js",
"light": "webpack --config webpack.light.js --mode development && node light-server/style-server.js"
},
"author": "Doug Sauve",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.0.0-beta.44",
"#babel/preset-env": "^7.0.0-beta.44",
"#babel/preset-react": "^7.0.0-beta.44",
"#google/maps": "^0.4.6",
"babel-loader": "^8.0.0-beta.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"bcryptjs": "^2.4.3",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"express": "^4.16.2",
"google-maps-react": "^2.0.2",
"jest": "^22.4.4",
"moment": "^2.22.1",
"mongoose": "^5.0.14",
"node-sass": "^4.9.1",
"nodemailer": "^4.6.5",
"normalize.css": "^8.0.0",
"raf": "^3.4.0",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-geocode": "0.0.9",
"react-redux": "^5.0.7",
"react-test-renderer": "^16.0.0",
"redux": "^4.0.0",
"sass-loader": "^6.0.7",
"socket.io": "^2.1.0",
"style-loader": "^0.20.3",
"validator": "^10.2.0",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13",
"webpack-merge": "^4.1.2"
}
}
webpack.common.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: ['babel-polyfill', path.join(__dirname, `/src/main.js`)],
output: {
path: path.join(__dirname, `/public`),
filename: `bundle.js`
},
module: {
rules: [
{
test: /\.js$/,
exclude: [
path.join(__dirname, '/node_modules'),
],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: [
['transform-class-properties', { 'spec': true }],
['transform-object-rest-spread']
]
}
}
}, {
test: /\.s?css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
]
}
]
}
};
webpack.prod.js
const merge = require ('webpack-merge');
const webpack = require ('webpack');
const common = require ('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});
It seems to be an issue on older versions of iOS, not sure what the breakpoint is.
About a week ago my app was deploying fine to production, however now I am seeing
Uncaught Error: Cannot find module "./lib/bootstrap.loader!./no-op.js"
var path = require('path');
var webpack = require('webpack');
var config = module.exports = {
entry: [
'bootstrap-loader',
'./app/frontend/javascripts/main.js'
],
stats: {
// Configure the console output
colors: true,
modules: true,
reasons: true
},
progress: true,
keepalive: true,
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015', 'react']
}
}, {
test: /\.css$/,
loader: 'style!css'
},
{ test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" },
{ test: /\.woff$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(woff2?|svg)$/, loader: 'url?limit=10000' },
{ test: /\.(ttf|eot)$/, loader: 'file' }
]
},
output: {
path: './app/assets/javascripts/',
filename: 'bundle.js',
publicPath: '/assets/',
devtoolModuleFilenameTemplate: '[resourcePath]',
devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]',
},
resolve: {
extensions: ['', '.js', '.jsx'],
modulesDirectories: [ 'node_modules', 'bower_components' ],
},
plugins: [
new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('.bower.json', ['main'])
]),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
//new webpack.optimize.CommonsChunkPlugin('common-bundle.js'),
//new webpack.optimize.CommonsChunkPlugin('public-bundle.js')
]
};
My package.json
"devDependencies": {
"babel-core": "~6.4.0",
"babel-loader": "~6.2.1",
"babel-preset-es2015": "~6.3.13",
"babel-preset-react": "~6.3.13",
"exports-loader": "~0.6.2",
"expose-loader": "~0.6.0",
"grunt": "~0.4.5",
"grunt-babel": "~6.0.0",
"grunt-cli": "~0.1.13",
"grunt-contrib-watch": "~0.6.1",
"grunt-webpack": "~1.0.11",
"history": "~1.17.0",
"imports-loader": "~0.6.3",
"jquery": "~2.1.4",
"lodash": "~3.0.0",
"react": "~0.14.6",
"react-dom": "~0.14.6",
"webpack": "~1.12.10",
"webpack-dev-server": "~1.14.0"
},
"dependencies": {
"autoresponsive-react": "^1.1.10",
"bluebird": "~3.1.1",
"bootstrap": "~3.3.6",
"bootstrap-loader": "~1.0.3",
"bootstrap-sass": "~3.3.6",
"bootstrap-webpack": "0.0.5",
"chunk-manifest-webpack-plugin": "0.0.1",
"classnames": "^2.2.3",
"css-loader": "~0.23.1",
"extract-text-webpack-plugin": "~1.0.1",
"file-loader": "~0.8.5",
"grunt-react": "~0.12.3",
"less": "~2.5.3",
"less-loader": "~2.2.2",
"node-sass": "~3.4.2",
"react-bootstrap": "~0.28.1",
"react-dropzone": "~3.3.2",
"react-grid-layout": "^0.10.0-beta1",
"react-image-component": "^1.0.0",
"react-input-autosize": "^0.6.6",
"react-modal-dialog": "^2.0.0",
"react-responsive": "^1.1.0",
"react-router": "~2.0.0-rc4",
"react-router-component": "~0.29.0",
"react-select": "^0.9.1",
"react-spinjs": "^2.0.1",
"react-swipe": "^3.0.0",
"reflux": "~0.3.0",
"reflux-core": "^0.3.0",
"reflux-promise": "^1.0.2",
"resolve-url-loader": "~1.4.3",
"sass-loader": "~3.1.2",
"style-loader": "~0.13.0",
"superagent": "~1.6.1",
"superagent-bluebird-promise": "~3.0.0",
"url-loader": "~0.5.7"
}
}
When I deploy I am receiving this error. When I look at bootstrap-loader I don't know what is happening, if someone knows that can point me in the right direction I am most greatful.
Here is similar error https://github.com/shakacode/bootstrap-loader/issues/4
They resolve this by ensuring that latest version of bootstrap-loader is installed:
npm install --save bootstrap-loader#1.0.0-rc
or
npm install --save bootstrap-loader#latest