I have some components with svg's loaded inline using webpack raw loader e.g...
import React, { Component } from 'react'
import svg from '!raw!../assets/images/logo.svg'
export default class Logo extends Component {
render() {
return (<a href={this.props.url} dangerouslySetInnerHTML={{__html: svg}} />)
}
}
When trying to test these components server side using tape, they fall over. If I have css modules included, it is no problem, I can use css-modules-require-hook but svg's will not work. So I really need a raw loader require hook or something like that.
require('babel-register');
require('css-modules-require-hook/preset');
/* tests after this can import components with css includes */
I tried using isomorphic-ensure but this did not work.
require('babel-register');
require('css-modules-require-hook/preset');
require('isomorphic-ensure')({
loaders: {
raw: require('raw-loader'),
raw: require('react-svgdom-loader')
},
dirname: __dirname
})
I get the following error:
Cannot find module '!raw!../assets/images/
If you're not using webpack for your tests then you could use the ignore-styles module.
You may have to configure it if you plan to use it with css-modules-require-hook as it will also also ignore CSS files by default. e.g:
require('ignore-styles').register(['.svg'])
Related
I want to migrate my Vue 2 project from webpack to Vite.
And have to use 3rd party web components that built with lit-element.
Those components throws errors during the runtime (by vue):
Unknown custom element: < foo-component > - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
And also (by lit-element)
Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot':
Failed to convert value to 'CSSStyleSheet'.
As far as I can see those 3rd party web components do only this in theirs index files (inside node_modules):
import FooComponent from './FooComponent';
customElements.define('foo-component', FooComponent);
So before (with webpack setup) I just imported them and everything used to work. Well, actually for webpack lit-scss-loader was used also for those components.
I assume that Vite perhaps needs some additional configuration, or maybe something similar to "webpack" loader is needed here, but not sure what direction I have to move.
What I'm doing wrong?
Configure #vite/plugin-vue to ignore Lit elements, e.g., elements starting with my-lit in their registered name:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
// treat all components starting with `my-lit` as custom elements
isCustomElement: tag => tag.startsWith('my-lit'),
},
},
}),
],
})
demo
A couple of steps needed.
Imagine I have 3rd party webcomponents named "foo". So all of them are in node_modules/#foo.
I need to do these steps:
Tell Vite that all components starting with "foo-" are webcomponents.
isCustomElement: (tag) => tag.startsWith('foo-')
Add "postcssLit" plugin to help vite to prepare css for the webcomponents.
Tell to Vite how to threat css paths for webcomponents.
'~#foo': fileURLToPath(new URL('./node_modules/#foo', import.meta.url))
Here is the full config:
//vite.config.ts
import postcssLit from 'rollup-plugin-postcss-lit';
export default defineConfig({
plugins: [
vue(
{
template: {
compilerOptions: {
// 1. Tell Vite that all components starting with "foo-" are webcomponents
isCustomElement: (tag) => tag.startsWith('foo-')
}
}
}
),
vueJsx(),
// 2. This "postcssLit" plugin helps to make css for the webcomponents
postcssLit()
],
resolve: {
alias: {
// 3. Tell to Vite how to threat css paths for webcomponents
'~#foo': fileURLToPath(new URL('./node_modules/#foo', import.meta.url))
}
}
});
I am writing a component library in/for react and using Rollup to bundle it. As part of the build process I am using Terser to make sure the bundle is as small as possible. As part of the minification process, Terser renames the variables and then renames then back at export. Like so:
export{_ as BtnResponsive,l as Button};
This works fine when importing my library into other ES modules. Like so:
import { BtnResponsive } from '#namespace/component-lib';
But when I create a Storybook story Button.stories.tsx and import my component like so:
import { ComponentStory, ComponentMeta } from '#storybook/react';
import { BtnResponsive } from '#namespace/component-lib';
export default {
title: 'Components/BtnResponsive',
component: BtnResponsive,
} as ComponentMeta<typeof BtnResponsive>;
const Template: ComponentStory<typeof BtnResponsive> = (args) => <BtnResponsive {...args} />;
export const Primary = Template.bind({});
Primary.args = { children: 'Primary', theme: 'primary' };
Storybook then renders the component in my story like
<_ theme="primary">
Primary
</_>
Storybook somehow doesn't respect the renamed export. Does anyone know how to either make storybook respect the component name? or know how I can adjust Terser so Storybook understands the name correctly?
Thanks in advance!
Terser apparently has options that you can use to prevent it from mangling function names. In my rollup.config.js I had to add the following:
terser({
keep_fnames: true,
})
It's a common thing to create a index.js file in an React application with the only purpose to export several modules, in order to avoid having too many import statements on other components. This can be done by:
index.js
export { Credits } from './Credits.js';
export { SocialMedia } from './SocialMedia.js';
any module that might use those exports:
import * as var_name from index.js
And this is very nice. It wraps exports into a single file. However, when I changed my project to React with typescript, I found that .tsx files cannot be exported like that. The image below is the error I got after changing the project to typescript and the extensions became .tsx
Is there a way of 'bundle' export React .tsx files with the structure shown above? If not, what is the simplest way of centralizing .tsx files export?
My webpack.config.js:
module.exports = {
module: {
rules: [{
test: /\.scss$/,
use: ["sass-loader"]
}]
}
};
You can definitely use the same style of having an index file to group up exports for a whole folder. The simplest way around your problem would be to omit the file extension (assuming you only have one "index" file in the folder).
For example, let's say you have a component in 'common/Example.tsx':
import React from 'react'
export const Example = () => (<div>I'm an example component</div>)
You can then export it in an index file 'common/index.tsx':
export { Example } from './Example'
And import it from somewhere else, e.g. 'App.tsx':
import { Example } from './common'
I have a set of spec v1 custom elements which I'm using webpack 4 to bundle (and babel-loader to transpile).
The components all look similar to this:
export class CompDiv extends HTMLDivElement {
constructor(...args) {
const self = super(...args);
self.property = null;
return self;
}
connectedCallback() {
console.log('connected CompDiv');
}
}
customElements.define('comp-div', CompDiv, { extends: 'div' });
Now to be able to create custom packages from these components using selective, named imports I need to mark these files as side-effect-free.
The component registration, though, takes place in the module itself:
customElements.define('comp-div', CompDiv, { extends: 'div' });
As far as I understand, that is a sideeffect.
Now I have an index.js that basically looks like this:
export { CompDiv } from './components/comp-div/comp-div';
...
export { CompBtn } from './components/comp-btn/comp-btn';
My webpack entry point looks like this:
import 'document-register-element';
import 'babel-polyfill';
import { CompDiv } from './index';
Now when I do this, CompBtn (and all other exports in index.js) ends up being part of the bundle even though it's not imported in my webpack entry point.
What would be the recommended way of allowing for treeshaking in webpack with these web components?
From webpack guide - Mark the file as side-effect-free:
All the code noted above does not contain side effects, so we can simply mark the property as false to inform webpack that it can safely prune unused exports.
So, setting "sideEffects": false in package.json tells webpack that your modules are side effect free. So that it can prune unused exports (in your case, unused re-exports). This is generally used by library authors.
But that's just one side of the equation.
From webpack configuration docs - optimization.sideEffects:
Tells webpack to recognise the sideEffects flag in package.json or rules to skip over modules which are flagged to contain no side effects when exports are not used.
So, in order to leverage that previously mentioned option, the library consumer will have to set the optimization.sideEffects option to true in their webpack config file:
// webpack.config.js
module.exports = {
...
optimization: {
sideEffects: true
}
...
}
Note that, in production mode, this option is enabled by default. So, you'll only need to set it for development mode.
N.B.: In this case, you are both the author and the consumer of your modules.
Lastly, let's look at your webpack entrypoint:
// webpack entrypoint
import 'document-register-element';
import 'babel-polyfill';
import { CompDiv } from './index';
If you don't use your imported CompDiv later in this file, webpack will prune it - assuming you've set "sideEffects": false in package.json and optimization.sideEffects to true in your webpack config.
But, for example, even if you only imported 'babel-polyfill' and won't explicitly use anything from it later in this file, webpack will not prune it, because the package.json for babel-polyfill library doesn't contain "sideEffects": false.
I hope that clears things up.
I get the file structure like this
before build
I want to make it like this below with webpack
after build
BTW, I also want to use ES6 import and export for the module loader,
such as in nav.js
class Nav extends Component {
// react code here
}
export defalt Nav
and in header.js
import Nav from `nav/bundle`
// header react code
// .......
export defalt Header
also need the bundle the redux and react-route npm package within the node_module
is it possible for webpack to do this stuff? some suggestions?
Here's a rough idea you could try to adapt:
{
// generate these dynamically through JavaScript
entry: {
footer: <path to footer js>,
...
},
output: {
path: './demo',
filename: '[name]/bundle.js' // name maps to entry keys
},
...
}