I am getting below error while budling for production using vite , The build is working fine locally .
Here is the error ,
Error: [vite]: Rollup failed to resolve import "react-is" from "../../node_modules/styled-components/dist/styled-components.browser.esm.js".
Can anyone please suggest
I tried to add below plugin in vite config js but its not working
plugins: [
react({
babel: {
plugins: [
[
"babel-plugin-styled-components",
{
displayName: true,
fileName: false,
},
],
],
},
}),
];
Related
Ive added reveal.js to my rails 7 app and with a little tinkering I can switch between slides, however the transitions (eg, slide or fade) do not work.
In terms of installation:
yarn add reveal.js
application.js
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
let deck = new Reveal({
plugins: [ Markdown ]
})
deck.initialize();
slides html:
<div class="reveal">
<div class="slides">
<section data-transition="slide"><h1>Horizontal 1</h1></section>
<section data-transition="fade"><h1>Horizontal 2</h1></section>
</div>
</div>
What I have done/tried
I dont have any javascript errors in my console so im thinking this might just some issue with the css / the way im importing the css. so far I have tried copying the reveal.scss content (from node_modules) into a file in my assets/stylesheets/reveal.scss with no luck:
Module parse failed: Unexpected character '#' (1:0)
12:31:02 js.1 | You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
12:31:02 js.1 | > #use "sass:math";
I also tried commenting out the lines (only 3) that use the math property, however that didnt work for me.
I tried importing the css direction (in assets/stylesheets/application.scss) with:
#import "reveal.js/dist/reveal"
// and
#import "reveal.js/css/reveal"
the file in dist is a .css file, while the other one has the contents that I copied before and showed the same error regarding sass:math.
Next I thought I might not have sass so I did yarn add sass and yarn add node-sass, which also didnt make the transitions work.
Now when I open the demo.html and index.html files (that come with the reveal.js dependency in the node_modules) in a browser tab transitions work seamlessly. Meaning it must have to do with how im importing the css/scss?
EDIT: webpack.config.js
const path = require("path")
const webpack = require("webpack")
module.exports = {
mode: "production",
devtool: "source-map",
entry: {
application: "./app/javascript/application.js"
},
output: {
filename: "[name].js",
sourceMapFilename: "[file].map",
path: path.resolve(__dirname, "app/assets/builds"),
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
}
It looks like you need to install and then add the appropriate loaders to your webpack config. Here is the official webpack documentation. It would look something like this:
const path = require("path")
const webpack = require("webpack")
module.exports = {
mode: "production",
devtool: "source-map",
entry: {
application: "./app/javascript/application.js"
},
output: {
filename: "[name].js",
sourceMapFilename: "[file].map",
path: path.resolve(__dirname, "app/assets/builds"),
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
}
I'm working on a project which has a React component library, and a Next JS app which imports said library. I've read a lot of questions on SO and attempted most of the solutions to no avail.
We have the component library working, fonts and all, and in storybook looks great
There's two fonts we import in our package.json (in devDependencies)
"#fontsource/inter": "4.5.12",
"#fontsource/material-icons": "4.5.4",
The material-icons font is imported in our <Icon /> component
import "#fontsource/material-icons";
And referenced in the tailwind config
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
theme: {
fontFamily: {
sans: ["Inter", "ui-sans-serif", "sans-serif"],
heading: ["Inter", "ui-sans-serif", "sans-serif"],
},
This works in storybook with no problems
But when imported into the Next JS app and the same component used
The files seem to be available in the node_modules folder of the Next JS app
Here is the roll up config:
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import json from "#rollup/plugin-json";
import pkg from "./package.json";
export default [
{
input: "src/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true,
},
{
file: pkg.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
resolve(),
commonjs(),
typescript({ tsconfig: "./tsconfig.json" }),
postcss(),
json(),
],
external: [
"react",
"react-dom",
"#fontsource/inter/400.css",
"#fontsource/inter/600.css",
"#fontsource/inter/700.css",
"#fontsource/material-icons",
"react-loading-skeleton/dist/skeleton.css",
],
},
{
input: "dist/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
external: [
"react",
"react-dom",
"#fontsource/inter/400.css",
"#fontsource/inter/600.css",
"#fontsource/inter/700.css",
"#fontsource/material-icons",
"react-loading-skeleton/dist/skeleton.css",
],
},
];
QUESTION: what I'd ideally like to do is export all the referenced css from the component library, such that in the next app's _app.tsx I can use
import "#us/component-library/styles.css";
How do I configure rollup to bundle the referenced css and expose it in the build folder?
Also: if there is an alternative or better way of doing this, we aren't precious over the plugins used and would be open to being shown a better (or correct) way of doing this.
Appreciate any help!
If anyone is still in the same boat - here's how I solved it in the end...
New rollup.config.js
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import json from "#rollup/plugin-json";
import pkg from "./package.json";
import copy from "rollup-plugin-copy";
export default [
{
input: "src/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true,
},
{
file: pkg.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
postcss(),
resolve(),
commonjs(),
typescript({ tsconfig: "./tsconfig.json" }),
json(),
copy({
targets: [
{
src: "node_modules/#fontsource/inter/files/*",
dest: "./dist/files",
},
{
src: "node_modules/#fontsource/material-icons/files/*",
dest: "./dist/files",
},
],
}),
],
external: ["react", "react-dom"],
},
{
input: "dist/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
external: ["react", "react-dom"],
},
];
Then in src/theme/input.css
#import url("../../node_modules/#fontsource/inter/400.css");
#import url("../../node_modules/#fontsource/inter/600.css");
#import url("../../node_modules/#fontsource/inter/700.css");
#import url("../../node_modules/#fontsource/material-icons/index.css");
#import url("../../node_modules/react-loading-skeleton/dist/skeleton.css");
#tailwind base;
#tailwind components;
#tailwind utilities;
...
foo {
bar...
Then in our consuming Next app, I no longer have to have the #fontsource/font import in the package.json.
In my head, this works because the rollup build, using rollup-plugin-postcss, leverages the css imports and bundles everything together as part of the css, rather than trying to re-package imports or manage external dependencies from the consuming app.
Pretty sure my rollup config can still be trimmed down, in particular where I'm using rollup-plugin-copy to copy the #fontsource/font files. But for now this is working and means our consuming apps don't need to care about importing fonts.
However, this has is drawbacks as I'm not sure how this would work if we wanted to override the font.
Perhaps re-defining the inter font in the calling app? And then assigning something else to it?
Or maybe overriding the fontFamily in our tailwind config? Not sure yet. Will update when I have a better answer.
Hope this helps someone else - when I get more time to spend on trimming the rollup config I'll post the latest.
Kia Ora!
I have a react app where I have the following component:
component.js
import styles from './styles.css';
const SomeComponent = (props) => {
return <div className={`${styles["container"]}`}>Hey :D</div>
}
export default SomeComponent;
styles.css
#value container: #f5f5f5;
.container {
background-color: red;
}
The styles["container"] should return the transpiled name of the CSS class container. Right now is returning an empty object.
All of this was working perfectly fine until I updated some dependencies for my project. In our company we had really old dependencies, so we decided to update them.
Old configuration (with this it worked)
Webpack config
Package.json
Running on node 11.0.0.
New configuration (with this everything works except what I described earlier)
Webpack config
New package.json
Running on node 14.17.3.
More info
I know that this is not a reproducible example, but I have not been able to create one. I cannot even install the dependencies alone to isolate the problem.
I have made some digging and I think the problem has to be in this part of the webpack configuration. Or maybe is having the same name for a variable and for a class. I have just realised that it works perfectly for class names with different names than values.
test: /\.css$/,
exclude: [
path.resolve(__dirname, 'node_modules/#material'),
path.resolve(__dirname, 'node_modules/#rmwc'),
path.resolve(__dirname, 'node_modules/react-dual-listbox/lib/react-dual-listbox.css'),
path.resolve(__dirname, 'node_modules/react-image-lightbox/style.css'),
path.resolve(__dirname, 'web/js/src/modules/Common/styles/material.css'),
],
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: { localIdentName: '[path]___[name]__[local]___[hash:base64:5]' },
},
}],
},
In the documentaion of the css loader module I found the option namedExport: true, but I cannot use it becuase that appears in the version 6.2.9 and I'm using 3.6.0 (previously I was using 2.1.1).
Any idea how to fix this?
In Webpack, how to configure css loaders to use css files from specific path? I tried below code to fetch files from path 'src/styles', but did not work.
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
include: [
path.resolve(__dirname, "src/styles/" ),
]
}
]
I have 'style.css' under 'src/styles' folder. In 'index.js' I just did
import 'style.css'
because I want path to be resolved from loader.
When I build, getting below error:
**ERROR in ./src/index.js
Module not found: Error: Can't resolve 'style.css' in 'D:\webpack-demo\src'
# ./src/index.js 2:0-19**
Please help.
I can't find how to make vendor scripts load before my own scripts. In manifest.json I tried:
"dependencies": {
"main.js": {
"files": [
"scripts/vendor_script.js",
"scripts/custom_script.js"
],
"main": true
},
Doesn't work: vendor script is called after my custom script. Also tried:
"dependencies": {
"plugins.js": {
"files": [
"scripts/vendor/owl.carousel.min.js"
]
},
"main.js": {
"files": [
"scripts/main.js"
],
"main": true
},
Same. Any suggestion?
[EDIT] my current manifest.json file, where I followed the advice from https://discourse.roots.io/t/custom-javascript-in-manifest-json-and-building-out-into-a-single-file/3316:
{
"dependencies": {
"main.js": {
"vendor": [
"scripts/vendor/owl.carousel.min.js"
],
"files": [
"scripts/main.js"
],
"main": true
},
"main.css": {
"files": [
"styles/main.scss",
"styles/vendor/font-awesome.min.css",
"styles/vendor/owl.carousel.min.css"
],
"main": true
},
"customizer.js": {
"files": [
"scripts/customizer.js"
]
},
"jquery.js": {
"bower": ["jquery"]
}
},
"config": {
"devUrl": "http://127.0.0.1/pot/"
}
}
[EDIT #2]
$ node
> require('asset-builder')('./assets/manifest.json').globs.js
require('asset-builder')('./assets/manifest.json').globs.js
[ { type: 'js',
name: 'main.js',
globs:
[ 'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\transition.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\alert.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\button.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\carousel.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\collapse.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\dropdown.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\modal.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\tooltip.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\popover.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\scrollspy.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\tab.js',
'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\bootstrap-sass\\assets\\javascripts\\bootstrap\\affix.js',
'scripts/vendor/owl.carousel.min.js',
'assets/scripts/main.js' ] },
{ type: 'js',
name: 'customizer.js',
globs: [ 'assets/scripts/customizer.js' ] },
{ type: 'js',
name: 'jquery.js',
globs: [ 'D:\\EasyPHP\\www\\pot\\wp-content\\themes\\pot\\bower_components\\jquery\\dist\\jquery.js' ] } ]
The script I'm trying to use is Owl Carousel. If I add the following in head.php it works fine:
<script src="<?php bloginfo("template_url"); ?>/assets/scripts/vendor/owl.carousel.min.js" type="text/javascript" charset="utf-8"></script>
If, instead, I set my manifest.json as shown previously I get a ".owlCarousel is not a function" in Firebug and my slider doesn't work.
Note: I didn't use Bowel, it's not mandatory in regular Sage workflow right? I just copied owl.carousel.min.js into assets/scripts/vendor/.
On a fresh Sage 8 installation I was able to quickly install OwlCarousel using Bower, exactly as described in the Sage documentation without any issue; its script and styles were both correctly included before project scripts and styles.
Font Awesome requires a Bower override because its default Bower main property instructs Bower to use a LESS and a SCSS file; once I set it to just use SCSS it worked fine. Sage 8 ships with a working set of Bower overrides which you should use as an example. See here.
Something else is going wrong with your scripts or your asset builder setup if you're unable to manually add scripts in the correct order. I suspect your asset paths may be incorrect. The best way to troubleshoot and ensure your manifest points to the correct asset paths is to start an interactive node session in a new terminal window.
First run (in your theme dir):
node
Then run (also in your theme dir):
require('asset-builder')('./assets/manifest.json').globs.js
or (still in your theme dir):
require('asset-builder')('./assets/manifest.json').globs.css
The output will display both the assets' paths and the order they're being included.
If you modify manifest.json while running the gulp watch task it may be necessary to halt the task, run a default gulp build, and then restart your gulp watch task.
If you still have difficulty after viewing the asset-builder output using the steps above then please post (either here or on the Roots forum) the output here along with the installation steps you took when installing the vendor scripts and custom scripts you're attempting to use so that someone can attempt to recreate your environment.