I am using webpack for my react project to generate index.bundle.js file.
This is my webpack.config.js...code
const path = require('path');
module.exports = {
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js',
},
// entry:{
// path: path.join(__dirname, '/dist')
// },
devServer: {
port: 3000,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(sa|sc|c)ss$/, // styles files
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|jpeg|webp)$/, // to import images and fonts
loader: "url-loader",
options: { limit: false },
}
]
},
};
This is my index.html file... index.html file is inside public folder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="/index.bundle.js"></script>
</body>
</html>
My index.bundle.js file is inside dist file, name as index.bundle.js.
I want to check here that my index.bundle.js is compiled successfully or not so, i am trying to run that index.bundle.js inside index.html. So i can see my react project using index.bundle.js. so here what i am doing.
i am using Open In Default Browser extension to run my html code on browser. I am not sure i am doing right step!, If not How can i run html code
second thing
if inside index.html i change my script src path to
<script src="../dist/index.bundle.js"></script>
i am getting this error..
index.bundle.js:2 Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: 2752
at Object.set [as exports] (index.bundle.js:2:1234650)
at 2752 (index.bundle.js:2:168796)
at a (index.bundle.js:2:1233913)
at index.bundle.js:2:1237036
at index.bundle.js:2:1237044
Related
I have a sass file that I want to override the existing stylesheet but I'm unable to see the sass override when I inspect in the browser. I included a screen shot that doesn't show the design system and override:
_titlebar.scss - variable used from design system.
.ui-dialog.active-dialog:not(.ui-dialog-minimized) .ui-dialog-titlebar {
background-color: var(--linq-color-primary-500);
}
_index.css
#import './_status.scss';
#import './_titlebar.scss';
I use a design system in the application that include the core file, a theme file and the material design theme. I removed part of the https for the design system for security reasons below
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Alio</title>
<link href="app/alio/img/LINQ-logo.svg" rel="shortcut icon" />
<script src="runtime/js/bootstrap.js"></script>
<link href="runtime/css/frames-loader.css" rel="stylesheet" />
**<link href="https://.../theme/blueberry-muffin.css"
rel="stylesheet" media="all" />
<link href="..../snackpaq-core.css"
rel="stylesheet" media="all" />
<link href="https://.../material-theme.css"
rel="stylesheet" media="all" />**
<title></title>
</head>
<body>
<script type="text/javascript">
bs_init();
</script>
gruntfile.js
module.exports = function (grunt) {
var env = grunt.option('env'); // i.e.: --env develop
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
banner: '/*\n' +
' * <%= pkg.name %>\n' +
' * \n' +
' * Version: <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)\n' +
' * Copyright <%= grunt.template.today("yyyy") %> MORPHIS - http://www.morphis-tech.com/\n' +
' */\n',
sass: {
css: {
options: {
sourcemap: env == 'develop' ? 'auto' : 'none'
},
files: {
'css/expanded-default.css': 'scss/expanded-default.scss',
'css/expanded-light.css': 'scss/expanded-light.scss',
'css/expanded-light-rtl.css': 'scss/expanded-light-rtl.scss',
'css/expanded-dark.css': 'scss/expanded-dark.scss',
'css/expanded-dark-rtl.css': 'scss/expanded-dark-rtl.scss',
'css/expanded-purplelight.css': 'scss/expanded-purplelight.scss'
.....
}
}
},
cssmin: {
options: {
banner: '<%= banner %>',
},
css: {
files: {
'css/light.min.css': ['css/light-rtl.css'],
'css/light-rtl.min.css': ['css/light-rtl.css'],
'css/dark.min.css': ['css/dark-rtl.css'],
'css/dark-rtl.min.css': ['css/dark-rtl.css']
}
}
},
watch: {
sass: {
files: [
'scss/**/*.{scss,sass}',
'widgets/**/*{scss,sass}',
'../base/scss/**/*{scss,sass}',
'../base/widgets/**/*{scss,sass}'
],
tasks: ['sass:css']
},
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass', 'cssmin']);
};
Can someone please provide a reason why and a solution to what I need to do to get the the sass override to work properly.
I created a test react component library (React, Typescript) and am trying to use Rollup to package it up into UMD to I can import the component into an HTML page.
The sample component I created just takes a label prop and colors it orange. Something super simple so complex logic would be taken out of the equation.
React code to render the above text:
import * as React from 'react';
import * as Test from 'react-webpack-demo';
function App() {
return (
<div>
<h1>
{
React.createElement(Test.Brand, { label: 'Brand Label Text'})
}
</h1>
</div>
);
}
export default App;
The above component was packaged via Rollup into CJS format to be imported. I have also attempted to package the same content into UMD so it can be imported into HTML. The full rollup.config.js file is below:
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import typescript from '#rollup/plugin-typescript';
import external from 'rollup-plugin-peer-deps-external';
import packageJson from './package.json';
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true
},
{
file: packageJson.module,
format: 'umd',
name: 'Test',
sourcemap: true
}
],
plugins: [
resolve(),
babel({
exclude: 'node_modules/**',
presets: [
'#babel/preset-react',
'#babel/preset-typescript'
]
}),
external(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' })
],
external: [
...Object.keys(packageJson.dependencies || {}),
...Object.keys(packageJson.peerDependencies || {})
]
}
]
I then attempt to import the newly packaged UMD file into my HTML page and render it into a DOM element as such:
<html lang="en-US">
<head>
<title>Test</title>
<meta charset="utf-8" />
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<h1>Testing rollup in plain HTML</h1>
<hr />
<div id='brand-test'></div>
<script>
const el = React.createElement;
const domContainer = document.getElementById('brand-test');
ReactDOM.render(el(
Test.Brand,
{
label: 'Demo works!'
}
), domContainer);
</script>
</body>
</html>
But I get the following error:
The above error occurred in the component:
Brand#file:///Users/jacorbello/repos/temp/react-webpack-demo/dist/umd/index.js:33:1
Uncaught TypeError: React__namespace.createElement is not a function
Brand Brand.tsx:8
React 17
test.html:20 Brand.tsx:8:11
Any help would be greatly appreciated here.
Thanks in advance for your time!
Seems like the script tag is in incorrect order. Your library needs React to be imported before it's script can be executed.
Just fix the order to get it working
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
I'm using TailwindCSS to create a portfolio website. Not using anything fancy, just a static website using Tailwind.
Recently, my font that is "Inter" from Google Fonts is not rendering on mobile browsers. It was working before suddenly stopped worked when I extended a few colors.
The weird thing is, everything works fine on desktop browsers with mobile screen sizes using dev tools in Chrome and Safari.
Does anyone know what seems to be the problem or experienced the same issue?
Thanks in advance!
Here is my code:
My src css file:
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap');
#tailwind base;
#tailwind components;
#tailwind utilities;
My tailwind.config.js file:
module.exports = {
purge: {
mode:'layers',
content:['./public/**/*.html/']
},
darkMode: 'media', // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
'body': ['Inter'],
},
colors: {
cwc: {
red:'#FF0000',
},
black: {
900:'#000000',
800:'#0D0D0D',
700:'#191919',
600:'#333333',
},
bg: {
white:'#F6F9FC',
},
text: {
primary:'#0b0014',
paragraph:'#61656b',
secondary:'#61656b',
tertiary:'#90959D',
highlight:'#1f66ff',
},
button: {
neutral:'#676B71',
hover: '#0b0014',
},
},
},
},
variants: {
extend: {},
},
plugins: [],
}
My postcss.config.js file
const cssnano = require(cssnano);
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
cssnano({
preset:'default',
}),
]
}
Setup Google Fonts
First of all, head over to Google Fonts and find a cool font you want to use.
Open up the font and click the "Select this style" button for each style you like.
Select Google Font styles
With it selected, you'll get a sidebar on the right showing the <link> attribute for it. Copy this link method.
Now head back to your project and open the index.html file. We'll place this import above our styles.css file.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- other stuff -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
</html>
Add to Tailwind
Now let's extend our Tailwind theme to have it know about this font.
Open the tailwind.config.js file and extend the theme's fontFamily option.
module.exports = {
theme: {
extend: {
fontFamily: {
'press-start': ['"Press Start 2P"', 'cursive']
}
}
}
};
If your font like this example uses spaces, it's best to use the double escape '""' it will make sure it's used in the right way.
Our font will now be available as font-press-start we can add this to our heading on the homepage like this:
<h1 class="text-6xl font-press-start">Welcome</h1>
I just installed a clean Laravel project with the Jetstream starter kit, so it also installed Tailwind CSS.
I then tried to use the sample code from Tailwind but it won't show up.
This is my simple test code from the Tailwind docs: (from https://tailwindcss.com/docs/hover-focus-and-other-states)
app.blade.php: (You can run the code snippet because this is actually what I get in my project)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<button class="bg-red-500 hover:bg-red-700">
Hover me
</button>
</body>
</html>
this is the tailwind.config.js file:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography')],
};
this is the webpack.mix.js file:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
and this is the app.css file:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
run npm run dev or npm run watch to compile the assets if you didn't already.
You should first run this command npm run dev then run php artisan serve
For any URL which doesn't start with /static, I serve this index.html:
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="import" href="/app.html">
</head>
...
</html>
Note: the / in /app.html to ensure it always serves app.html from the root.
I wish to run gulp/vulcanize over app.html to:
create a bundle which sits in: /static/<version-or-timestampp-or-hash-here>/app.html
change the import in index.html to point to the the above generated bundle
I currently have the following gulp file that will do the vulcanize, but it won't do the versioning or change index.html link:
var gulp = require('gulp');
var vulcanize = require('gulp-vulcanize');
gulp.task('vulcanize', function() {
return gulp.src(['app.html'])
.pipe(vulcanize({
stripComments: true,
inlineScripts: true,
inlineCss: true
}))
.pipe(gulp.dest('static'));
});
gulp.task('default', ['vulcanize']);
How do I achieve the two points above?