I am working on a react project which was built using create-react-app and later we ejected and modified the webpack config a lot. Right now I am having a hard time importing const enums from external libraries. I don't have control over that external package. It has the const enums defined in its d.ts files.
I have tried with babel-plugin-use-const-enum babel plugin and preset. It doesn't help me either.
My webpack config:
.....
.....
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: [paths.appSrc],
loader: require.resolve("babel-loader"),
options: {
customize: require.resolve("babel-preset-react-app/webpack-overrides"),
plugins: [
[require.resolve("babel-plugin-const-enum"), { transform: "constObject" }],
[require.resolve("#babel/plugin-transform-typescript"), { isTSX: true, optimizeConstEnums: true }],
[require.resolve("#babel/plugin-transform-react-jsx")],
[require.resolve("#babel/plugin-proposal-class-properties"), { loose: true }],
[require.resolve("#babel/plugin-proposal-nullish-coalescing-operator")],
[require.resolve("#babel/plugin-proposal-optional-chaining"), { isTSX: true }],
[require.resolve("#babel/plugin-transform-arrow-functions")],
[require.resolve("#babel/plugin-proposal-private-methods"), { loose: true }],
[
require.resolve("babel-plugin-named-asset-import"),
{
loaderMap: {
svg: {
ReactComponent: "#svgr/webpack?-svgo,+titleProp,+ref![path]",
},
},
},
],
],
presets: ["#babel/preset-env"],
},
},
.....
.....
My tsconfig:
{
"compilerOptions": {
"typeRoots": ["./typings", "node_modules/#types"],
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"noEmit": true,
"jsx": "react",
"downlevelIteration": true
},
"exclude": ["dist/**/*"],
}
The problem is that the build is successful but I am facing the runtime issue with all the const enums import like below
Uncaught TypeError: Cannot read properties of undefined (reading '<ConstEnumName>').
Package versions:
"#babel/core": "^7.11.6",
"babel-loader": "^8.1.0",
"typescript": "^3.9.7",
"webpack": "^4.44.2",
According to this thread, where the plugin's creator is involved, babel does not transpile .d.ts files, making it impossible to get enums from there. The only option seems to be migrating your config to use ts-loader and include the .d.ts files that have the enum declarations
tsconfig
{
...
"exclude": ["dist/**/*"],
"include": ["node_modules/[external_library]/**/*.d.ts"],
}
Related
I have a React app built with craco that I want to add react-pdf to display PDF files in a react component.
I'm getting the following error:
I've added the following to the craco.config.js file which apparently replaces the webpack.config
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '#primary-color': '#1c48f2' },
modules: true,
javascriptEnabled: true
}
},
}
},
{ plugin: CracoTerserOverridePlugin }
],
webpack: {
options: {
presets: [
"#babel/preset-env",
"#babel/preset-react"
],
plugins: [
[
"#babel/plugin-proposal-class-properties",
"#babel/plugin-syntax-class-properties"
]
],
},
plugins: process.env.NODE_ENV === 'production' ? [
...
}),
] : [],
}
};
tsconfig.json
{
"compilerOptions": {
"baseUrl": "src",
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
I've tried positions within this object, but nothing seems to fix it. I'm assuming I need to add something else.
You are targeting "es5" , but you are using a module using "ES6" properties.
privateClassProperties are only available from "ES6"
Is it possible for you to target "ES6" ?
Difficult to tell it is in the tsc transpilation phase or babel phase.
If it is during babel phase, you will need a .babelrc file,
you may need a .babelrc specifying target browser version, if it does not work in tsconfig.json
"presets": [
["babel-preset-env", {
"targets": {
"browsers": "last 2 versions"
},
}]
]
My library react-utils-jave with no side effects and with preserveModules bundle cant be used without importing in a react-dropdown-jave` project bundle.
I want to extract only one function from library and provide to bundle, but no all library.
src/index.ts → dist...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
react-utils-jave (imported by src/Dropdown.tsx)
library to use: https://github.com/javeoff/react-utils
lib where i use: https://github.com/javeoff/react-dropdown
TSConfig.json
{
"compilerOptions": {
"declaration": true,
"noEmit": false,
"outDir": "./dist/",
"rootDir": "src",
"lib": ["dom", "dom.iterable", "esnext"],
"module": "ESNext",
"jsx": "react-jsx",
"strict": true,
"skipLibCheck": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noUncheckedIndexedAccess": true,
"incremental": true,
"noImplicitOverride": true,
"isolatedModules": false,
"composite": true,
"sourceMap": false
},
"include": ["src/**/*.ts", "src/**/*.tsx"]
}
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import swc from 'rollup-plugin-swc';
import { terser } from 'rollup-plugin-terser';
const config = () => {
const plugins = [
typescript({
tsconfig: 'tsconfig.json',
}),
swc({
rollup: {
exclude: /node_modules/,
},
jsc: {
parser: {
syntax: 'typescript',
},
},
}),
];
if (process.env.NODE_ENV === 'production') {
plugins.push(terser());
}
return {
input: 'src/index.ts',
output: {
format: 'esm',
dir: 'dist',
preserveModulesRoot: './src',
preserveModules: true,
},
plugins,
external: ['react/jsx-runtime', 'react'],
};
};
export default config;
I tried replace swc to babel
Replace import * from to import { onClickOutside } from './...'
Add commonjs and node-resolve plugins to library to use
Set sideEffects: false in library to use
Set module param with path to dist/index.js in library to use
I'm trying to make React UI component libraries. In my tsconfig, if I set {..., "jsx": "react-jsx"}, I see in the bundle index.esm.js that React code is included.
But if I use the old jsx {"jsx": "react"}, React code is not included in the bundle.
I am using rollup to bundle. This is rollup.config.ts
export default {
input: "./index.ts",
output: [
{
file: pkg.main,
format: "cjs",
},
{
file: pkg.module,
format: "es",
},
],
external: ["react", "react-dom", "#emotion", "#mui/material", "#mui/style"],
plugins: [
resolve(),
external(),
commonjs(),
typescript({
useTsconfigDeclarationDir: true,
}),
terser(),
],
};
This is tsconfig
{
"compilerOptions": {
"declaration": true,
"declarationDir": "lib/types",
"esModuleInterop": true,
"moduleResolution": "Node",
"jsx": "react-jsx",
"resolveJsonModule": true,
"strict": true,
"target": "ESNext"
},
"include": ["./**/*"],
"exclude": ["./**/*.stories.tsx", "./lib", "./node_modules"]
}
How can I use the react-jsx and not include the React code in the bundle. I tried setting sideEffects:false in package.json but it did not work.
I'm trying to integrate the jest to my current react project. It's a typescript project. I followed the ts-jest instructions and configured the jest. If I run simple test cases, It works well. When I add the following line or any import line the terminal gives me an error.
import React from 'react';
When I run the "npm test" command, the terminal gives me the following error. The error source is the sample test file. (test.tsx)
SyntaxError: Cannot use import statement outside a module.
I tried lots of different solutions but none of them worked.
My tsconfig.json file is;
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src",
"global.d.ts",
"test"
],
"exclude": [
"build",
"coverage",
"node_modules",
"public"
]
}
babel.config.js is;
module.exports = {
presets: ['#babel/preset-env']
}
jest.config.js is;
/** #type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'ts-jest',
transform: {
'^.+\\.(ts|tsx)?$': 'ts-jest',
"^.+\\.(js|jsx)$": "babel-jest",
},
transformIgnorePatterns: ["/src/(?!serviceWorker)"],
globals: {
'ts-jest': {
diagnostics: false
}
},
moduleNameMapper: {
"\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|less)$": "<rootDir>/src/test/resourceFileMock.ts",
}
};
Thank you for any advice.
could you try with these values in your tsconfig.json:
"target": "es5",
"module": "commonjs",
"lib": ["es6"],
"jsx":"preserve",
"strict": true
Remove below values:
"module": "esnext",
Very new to bundling. My team is used to code completion and being able to jump to the type declaration file of a corresponding component using command + click in their editor (VSCode).
However the bundle generated does not come with this behaviour... I don't know how to go form here, or what I am missing. These feature are very important to my team. Any help is appreciated 🙏
Versions
typescript: 3.7.5
rollup: 1.31.0
rollup-plugin-typescript2: 0.26.0
rollup.config.js
import babel from 'rollup-plugin-babel';
import commonjs from '#rollup/plugin-commonjs';
import resolve from '#rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import svgr from '#svgr/rollup';
import url from '#rollup/plugin-url';
import json from '#rollup/plugin-json';
import external from 'rollup-plugin-peer-deps-external';
import includePaths from 'rollup-plugin-includepaths';
const pkg = require('./package.json');
export default {
cache: false,
input: 'src/index.ts',
output: { file: pkg.module, format: 'esm' },
plugins: [
external({
preferBuiltins: false,
}),
babel({
exclude: /node_modules/,
plugins: ['external-helpers'],
externalHelpers: true,
}),
json(),
resolve(),
svgr({
ref: true,
svgo: false,
}),
typescript({
clean: true,
typescript: require('typescript'),
}),
url(),
includePaths({
paths: ['src'],
}),
commonjs({
namedExports: {
'prop-types': [
'oneOfType',
'func',
'shape',
'any',
'number',
'object',
'bool',
'string',
],
},
}),
],
};
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"baseUrl": "src",
"declaration": true,
"declarationMap": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["dom", "dom.iterable", "esnext"],
"module": "es6",
"moduleResolution": "node",
"noEmit": true,
"noErrorTruncation": true,
"outDir": "./dist",
"skipLibCheck": true,
"strict": true,
"target": "es5",
"rootDir": "src"
},
"include": ["src"],
"exclude": ["storybook", "dist"]
}
package.json
Relevant bits only 👇
{
"main": "dist/index.js",
"module": "dist/index.js",
"typings": "dist/index.d.ts",
}
Found the issue - it was because I was using absolute paths. Changing import paths to relative imports or using a plugin to convert absolute to relative import paths when building fixes this issue.