Related
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 :)
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?
I create a BLOB file and write JavaScipt code there, then create a URL and import the module from it.
const myJSFile = new Blob( [ 'export default true;' ], { type: 'application/javascript' } );
const myJSURL = URL.createObjectURL( myJSFile );
import( myJSURL ).then(async ( module ) => {
console.log( module.default );
});
This works great in the browser console. However, I am having a problem when building a project using Webpack.
I suspect the problem is with WebPack or Babel configuration.
Webpack common config:
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
// Where webpack looks to start building the bundle
entry: [
'core-js/modules/es6.promise',
'core-js/modules/es6.array.iterator',
'./src/main.js',
],
target: 'web',
// Where webpack outputs the assets and bundles
output: {
path: path.resolve(__dirname, 'dist'),
assetModuleFilename: '[name].[contenthash].[ext]',
filename: '[name].[contenthash].bundle.js',
chunkFilename: '[id].[chunkhash].bundle.js',
// publicPath: '/',
},
// Determine how modules within the project are treated
module: {
rules: [
{
test: /\.(gif|png|jpe?g)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images/'
}
}
]
},
// JavaScript: Use Babel to transpile JavaScript files
{ test: /\.js$/, use: ['babel-loader'] },
// Images: Copy image files to build folder
{ test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },
// Fonts and SVGs: Inline files
{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },
],
},
// Customize the webpack build process
plugins: [
// Generates an HTML file from a template
new HtmlWebpackPlugin({
// template: path.resolve(__dirname, 'src/index.html'), // шаблон
template: 'src/index.html',
// filename: 'index.html', // название выходного файла
// inject: false, // true, 'head'
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
},
// chunks: 'all',
// excludeChunks: [],
}),
new CopyWebpackPlugin(
{
patterns: [
{ from: 'src/assets', to: 'assets' },
// { from: 'src/components', to: 'components' },
]
}
),
],
resolve: {
// modules: [path.resolve(__dirname, 'src'), 'node_modules'],
extensions: ['.js', '.jsx', '.json', '.ts'],
alias: {
'#': [
path.resolve(__dirname, 'src'),
'./src/main.js'
],
},
},
}
Babel config
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
esmodules: true,
},
},
],
],
plugins: [
'#babel/plugin-proposal-class-properties',
'#babel/plugin-transform-runtime',
"#babel/plugin-syntax-dynamic-import"
]
};
I've used require-from-string before, which internally uses the native Module module to achieve this.
Speaking generally, Blobs don't really interoperate well between browser and node land, and modules are also not treated identically.. so it's not a surprise that blob+module has problems. :)
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!
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.