Rollup library ERROR in resolving fallback for shared module react - javascript

I am creating a design system library with rollup and React 17.0.1, unfortunatelly I am getting this error when I use the library
Error: Can't resolve 'react/jsx-runtime'
The rollup file is this
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
exports: "auto",
sourcemap: false,
preserveModules: false
},
{
file: packageJson.module,
format: 'esm',
sourcemap: false
}
],
plugins: [
svgr(),
json(),
url(),
peerDepsExternal(),
resolve({
jsnext: true,
main: true,
browser: true
}),
babel({
babelrc: true,
exclude: 'node_modules/**',
presets: [
["#babel/preset-react", { runtime: "automatic" }],
]
}),
commonjs({
include: "node_modules/**",
namedExports: {
'styled-components': [ 'styled', 'css', 'ThemeProvider' ],
"react/jsx-runtime": ["jsx", "jsxs", "Fragment"],
"react/jsx-dev-runtime": ["jsxDEV", "Fragment"]
}
}),
typescript({ useTsconfigDeclarationDir: true }),
postcss(),
progress(),
visualizer({})
],
external: [...Object.keys(packageJson.peerDependencies || {})]
},
{
input: 'types/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: "esm" }],
external: [/\.css$/],
plugins: [dts()],
},
]
I looked for lots of solutions but I cannot find any good one... may you help me? Thanks
Lorenzo


It may help. "#rollup/plugin-node-resolve" plugin.
resolve({ extensions: [".js", ".jsx"] })
(tsx and ts if you are using typescript)
please let me know if it didnt help :)

Related

Is there a way for exporting multiple default react components from a react package in rollupjs?

I want to achieve to have multiple default exports. For example, if a react app installs my package named {my-package} then, they should be be able to import like
import Add from {my-package}/Add;
import Multiply from {my-package}/Multiple;
I've tried with making multiple end points in rollup.config.js.
`
export default [
{
input: files,
output: [
{
format: 'cjs',
strict: false,
// file: pkg.main,
dir: pkg.main,
sourcemap: true,
exports: 'named'
},
{
format: 'esm',
strict: false,
dir: pkg.module,
sourcemap: true,
exports: 'named'
}
],
plugins: [
commonjs(),
nodePolyfills(),
nodeResolve({ browser: true }),
image(),
json(),
postcss({
config: {
path: './postcss.config.js'
},
extensions: ['.css', '.scss'],
minimize: true,
inject: {
insertAt: 'top'
},
plugins: [url({ url: 'inline', maxSize: 10, fallback: 'copy' })]
}),
babel({ exclude: 'node_modules/**', presets: ['#babel/preset-react'] }),
typescriptPlugin({
objectHashIgnoreUnknownHack: true,
tsconfig: './tsconfig.json'
}),
cleaner({ targets: ['./dist/'] })
],
external: [
'react',
'react-dom',
'js-beautify',
'next-themes',
'react-split',
'react-codemirror2',
'react-responsive-modal',
'pinterpolate'
]
}
];
`
This is my rollup.config.js
Is it possible witn rollupjs?

Jest won't transform node_module dependencies

Our code references the #myScope/vue-notify library which is set as a external/global in our rollup config. That code is an ES6 module and needs to be transpiled for jest to be able to work with it but by default Jest doesn't transpile node_modules folder. I have tried adding a negative lookahead to the transformIgnorePatterns but no matter what combination I try I just keep getting this error:
My Jest transform settings are as follows:
transform: {
'.+\\.(css|css!|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
'jest-transform-stub',
'^.+\\.(js|jsx)?$': 'babel-jest',
},
transformIgnorePatterns: [
'/node_modules/(?!#myScope/vue-notify)',
'/dist/',
'/docs/',
],
My rollup.config.js is as follows:
import packageJson from './package.json';
import json from '#rollup/plugin-json';
import babel from '#rollup/plugin-babel';
import { addMinExtension } from './utils/utils';
import { terser } from 'rollup-plugin-terser';
import { nodeResolve } from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
const globals = {
DevExpress: 'DevExpress',
jquery: '$',
'#myScope/vue-notify': 'vueNotify',
'file-saver': 'saveAs',
exceljs: 'ExcelJS',
};
const externals = ['jquery', '#myScope/vue-notify', 'file-saver', 'exceljs'];
export default [
{
// Dev UMD Config:
input: packageJson.input,
output: [
{
name: packageJson.moduleName,
file: packageJson.browser,
format: 'umd',
globals: globals,
},
],
external: externals,
plugins: [
nodeResolve(),
commonjs({
include: 'node_modules/**',
}),
json(),
babel({ babelHelpers: 'runtime' }),
],
},
{
// Dev Module Config:
input: packageJson.input,
output: [
{
file: packageJson.module,
format: 'es',
},
],
external: externals,
plugins: [
nodeResolve(),
commonjs({
include: 'node_modules/**',
}),
json(),
],
},
{
// Prod UMD Config:
input: packageJson.input,
output: [
{
name: packageJson.moduleName,
file: addMinExtension(packageJson.browser),
format: 'umd',
sourcemap: true,
globals: globals,
},
],
external: externals,
plugins: [
nodeResolve(),
commonjs({
include: 'node_modules/**',
}),
json(),
babel({ babelHelpers: 'runtime' }),
terser(),
],
},
{
// Prod Module Config:
input: packageJson.input,
output: [
{
file: addMinExtension(packageJson.module),
format: 'es',
},
],
external: externals,
plugins: [
nodeResolve(),
commonjs({
include: 'node_modules/**',
}),
json(),
terser(),
],
},
];
Any help getting this working would be much appriciated!

ESLint failing on relative imports with webpack

I have been trying to get eslint working in an existing project, following the airbnb style guide. I have most of it working, but I can't get the relative imports that I use to pass linting. an example of one of my relative imports is:
import { actions as practiceActions } from 'reducers/practice';
which give the following linting error.
Unable to resolve path to module 'reducers/practice'
my .eslintrc.json is as follows:
{
"env": {
"browser": true,
"mocha": true
},
"extends": ["airbnb-base"],
"globals": {
"spy": true,
"stub": true,
"mount": true,
"shallow": true,
"chai": true,
"expect": true,
"sinon": true,
"getStoreAction": true,
"getMockStore": true,
"render": true
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"react"
],
"rules": {
"semi": 2,
"max-len": [1, 100, 2],
"indent": ["error", 4],
"import/extensions": ["warn", "never"],
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error"
},
"settings" : {
"import/extensions": ["js", "jsx", "png"],
"import/resolver": { //note that I have also tried just using "webpack" as the resolver, with the same outcome.
"node": {
"extensions": [".js",".jsx"]
}
},
"import/ignore": ["node_modules", ".(scss|less|css)$"]
}
}
My webpack config is quite long, but it's the default from create react app. There have been no manual changes to this.
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
),
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web',
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
},
},
{
test: /\.module.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[path]__[name]___[local]',
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new InterpolateHtmlPlugin(env.raw),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
performance: {
hints: false,
},
Everything else seems to work fine linting-wise, and the relative imports are working in the application. I just can't get them to be recognized by my linter.

I'd recommend taking a further look at the docs for eslint-plugin-imports webpack resolver. Specifically, try passing the location of your webpack config explicitly in .eslintrc.json:
{
// ...
"settings": {
"import/resolver": {
"webpack": {
"config": "my.webpack.config.js"
}
}
// ...
}
}
Hopefully that causes the resolver to pick up all resolve options in the webpack config.

HandlebarsIntl intergration with webpack 3

I wish to use Handlebars Intl for my handlebar templates but it will throw an error
'helpers.formatNumber is undefined' while using.
This is my web pack configuration
{
test: /\.tpl$/,
include: [
path.resolve(__dirname, 'src/views'),
],
use: {
loader: 'handlebars-loader',
options: {
minimize: true,
assumeObjects: true,
knownHelpers: ['formatNumber'],
knownHelpersOnly: false,
helperDirs: [
path.resolve(__dirname, 'src/js/handlebar-helpers'),
],
partialDirs: [
path.resolve(__dirname, 'src/views/partials')
],
extensions: [
".tpl"
]
}
}
}
and this is my handlebar header.tpl
<li>{{formatNumber 25000}}</li>
I have already linked HandlebarsIntl with my Handlebars before it calls
HandlebarsIntl.registerWith(Handlebars); and i can see that registered helpers under Handlebars.helpers
Ref:
https://github.com/pcardune/handlebars-loader
https://formatjs.io/handlebars/
please help me on this

ReferenceError: regeneratorRuntime is not defined

I'm using rollup to build a module from my project, and it's not including regeneratorRuntime. What am I missing here?
module.exports = {
external: [],
entry: './src/appProxypass/index.js',
dest: './packages/proxypass-app/index.js',
format: 'cjs',
plugins: [
require('rollup-plugin-commonjs')({
}),
require('rollup-plugin-babel')({
babelrc: false,
runtimeHelpers: true,
// externalHelpers: true,
'presets': [
'es2015-rollup',
'stage-2'
],
'plugins': [
'transform-async-to-generator',
'syntax-async-functions',
'transform-flow-strip-types',
'transform-class-properties'
],
exclude: 'node_modules/**'
}),
require('rollup-plugin-cleanup')()
]
}

Categories

Resources