I added this to the production config:
babelQuery: {
plugins: [["import", { libraryName: "antd", style: true }]],
},
but I'm still getting errors like ReferenceError: Menu is not defined. Am I missing something? Everything works fine locally when I add the same to the dev config so I'm a little confused.
I'm currently having the exact same problem. So I'll add the extra info here.
I too the information from the following page to setup the ant-design kit:
https://ant.design/docs/react/use-with-create-react-app
The webpack.dev.babel contains the following babelQuery and is working fine:
babelQuery: {
presets: ['babel-preset-react-hmre'].map(require.resolve),
plugins: [['import', { libraryName: 'antd', style: true }]],
},
The development environment runs fine.
But, when adding the same plugins configuration to the webpack.prod.babel like this:
babelQuery: {
plugins: [['import', { libraryName: 'antd', style: true }]],
},
I'm getting the error like #userinev when loading the page after running the production build.
Uncaught ReferenceError: Menu is not defined
It's having issues with loading the first component that gets loaded from the antd library.
When removing the plugins configuration from the prod-config, the app is loading, but the styling is missing.
UPDATE:
The dot (.) in Menu.Item is the problem in the production-build.
The workaround is to create an 'alias', like
const Item = Menu.Item;
See: https://github.com/ant-design/ant-design/issues/5060#issuecomment-283339199
Alternatively, you can remove the boilerplate's including on package.json of the babel plugin that causes error:
Delete this:
"plugins": [
"transform-react-inline-elements"
]
Related
I'm trying to set up path aliases in my tsconfig.json for a React app bundled with Vite. Here is the relevant part of my tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
...
"paths": {
"*": ["src/*", "node_modules/*"],
"components/*": ["src/components/*"],
"containers/*": ["src/containers/*"],
"pages/*": ["src/constants/*"],
"store/*": ["src/store/*"],
"types/*": ["src/types/*"],
"NestedFolder/*": [
"src/components/NestedFolder/*"
],
}
},
"include": ["src/**/*", "*"]
}
The only issue is with the NestedFolder. When I import this way, everything works:
import { ComponentName } from "components/NestedFolder/types";
However, the nested alias fails:
import { ComponentName } from "NestedFolder/types";
// error
EslintPluginImportResolveError: typescript with invalid interface loaded as resolver
Occurred while linting .../src/components/NestedFolder/canvas/index.ts:1
Rule: "import/namespace"
// error on hover in VS Code
Unable to resolve path to module 'NestedFolder/types'.eslintimport/no-unresolved
I would like to do nested components because I have several folders that are nested 3-4 levels and it would be nice to have a cleaner view of my imports. Is there a way to do this?
You need to install the vite-tsconfig-paths plugin to set up path aliases using TypeScript and Vite.
If nothing changes and you are using VSCode make sure to restart the TypeScript server by pressing Ctrl+Shift+P or Cmd+Shift+P, typing restart, and then selecting the command: TypeScript: Restart TS server
The accepted answer did not work for me. I found that I had to install the following packages:
npm i eslint-plugin-import eslint-import-resolver-alias eslint-import-resolver-typescript
And then add the following configurations, with the important ingredient being strongly-defined alias paths:
const path = require('path');
module.exports = {
root: true, // important to ensure nested eslint scoping in monorepos
plugins: ['#typescript-eslint', 'import'],
extends: [
'airbnb-typescript-prettier',
'plugin:import/typescript'
],
parser: '#typescript-eslint/parser',
parserOptions: {
project: path.join(__dirname, './tsconfig.json'),
tsconfigRootDir: './src',
},
settings: {
"import/parsers": { // add this definition
"#typescript-eslint/parser": [".ts", ".tsx"],
},
'import/resolver': {
alias: {
map: [
// define each alias here
['components', path.join(__dirname, './src/components')],
],
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
},
typescript: {
project: path.join(__dirname, './tsconfig.json'),
},
},
},
}
I think this could be improved on by harmonizing the aliases between the .eslintrc and vite.config so aliases only need to be defined once, using a tactic like the one defined here: https://stackoverflow.com/a/68908814/14198287
if vite-tsconfig-paths is not working for you. Make sure you didn't install v4.0.0. That version has a bug.
v4.0.1 fix it.
Install with the following:
npm install vite-tsconfig-paths#latest
Should install v4.0.1 at least.
I think this could be improved on by harmonizing the aliases between the .eslintrc and vite.config so aliases only need to be defined once, using a tactic like the one defined here: https://stackoverflow.com/a/68908814/14198287
I'm refactoring a React webapp from CRA to using Vite and having issues with Storybook. The storybook's GUI opens, and I see a list of stories on the left panel. But whichever story I choose I get an error TypeError: fn.apply is not a function in Canvas tab like shown here:
I found a similar issue on Storybook's GitHub, and tried to change names StorybookName to storybookName in all the stories, also checked all the React components in the stories to make sure all of them are correctly defined as functions.
When it was using CRA storybook worked fine, but with Vite it's not working. Maybe I'm missing some configuration for Vite, so here's my vite.config.js as well:
import react from '#vitejs/plugin-react';
import { defineConfig } from 'vite';
import svgrPlugin from 'vite-plugin-svgr';
const path = require('path');
export default defineConfig({
esbuild: {
jsxFactory: 'jsx',
jsxInject: `import { jsx } from '#emotion/react'`,
},
optimizeDeps: {
include: ['#emotion/react'],
},
plugins: [
react({
jsxImportSource: '#emotion/react',
babel: {
plugins: ['#emotion/babel-plugin'],
},
}),
svgrPlugin({
svgrOptions: {
icon: true,
},
}),
],
});
And here's main.js from storybook:
const path = require('path');
const svgrPlugin = require('vite-plugin-svgr');
module.exports = {
core: {
builder: 'storybook-builder-vite',
},
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: ['#storybook/addon-links', '#storybook/addon-essentials'],
viteFinal: (config) => {
return {
...config,
plugins: [
...config.plugins,
svgrPlugin({
svgrOptions: {
icon: true,
},
}),
],
};
},
};
In Chrome Dev Tools I get this error:
I found the reason and it appears that all the configurations I had were correct. The problem was in the way how I aplied one of the decorators for Storybook. Basically, I wasn't correctly exporting one of the decorators and therefore was applying undefined instead of a decorator.
So, for whoever faces this issue, please note that it's most of the time a problem with syntax. Check all your functions, components, decorators and so on and make sure they are all correctly defined and exported.
The error message itself doesn't give any clue where to dig, which is a big shame, so this one is pretty tough to debug.
I've got a fresh CRA made, and I am using the Ant Design library.
Looking at the instructions, it's not 100% clear to me what exactly I need to do, however from what I can gather, since I have ejected my app, I can modify my webpack.config.js file and be done with it.
Unfortunately, it seems the changes I have made are not being reflected
I have added the below into my rules array
{
test: /\.less$/,
use: [{
loader: require.resolve('style-loader'),
}, {
loader: require.resolve('css-loader'), // translates CSS into CommonJS
}, {
loader: require.resolve('less-loader'), // compiles Less to CSS
options: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
}],
},
Does anyone know how I can get this working please?
Instead of ejecting. You can use customize-cra package to override default settings. Ant design has already added the docs on the usage for create react app. Please check this link.
Hope this helps!
I am using vs code with create-react-app --typescript, if i get any type errors i see it in the browser and typescript prevents compilation. i would like to see the errors only in google console and terminal but allow the valid js to compile.enter image description here
You cannot do that. But you can put //#ts-ignore before the line which contains the error.
In your case:
{/*
//#ts-ignore */} //this will do the trick
{value.galleryId} <DragHandle />
If you use webpack the ForkTsCheckerWebpackPlugin will achieve something like you want to do. This plugin will separate the compile process from the error reporting. After you have installed and imported this plugin, you will need to set the ts-loader to compile only mode. In the plugins section the plugin needs to be injected, to do the error reporting separately.
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
//...
module: {
rules: [{
test: /\.tsx?$/,
use: [
// ...
{
loader: 'ts-loader',
options: {
// disable ts checker - will run it in fork plugin leater
transpileOnly: true
}
}
]
},
// ..
],
plugins: [
new ForkTsCheckerWebpackPlugin({
tsconfig: path.resolve(__dirname, 'tsconfig.json')
}),
// ...
I seem to be having an issue when building my frontend using Laravel mix.
I'm using react-loadable for loading components with promises, as for routing I make use of a declarative config file:
export default [
{
path: '/clients',
exact: true,
auth: true,
component: Loadable({
loader: () => import('./screens/index'),
loading: LoadingComponent,
}),
},
]
When building the js files, I get following error (pointing to the 'i' of import):
ERROR in ./resources/js/modules/clients/routes.js Module build failed:
SyntaxError: Unexpected token (10:26)
When searching the web I came across the fact that, when you wanted to use arrow functions or class properties, you'd need to add a Babel plugin (babel-plugin-transform-class-properties).
So I did add a .babelrc file with following config (it also seems that laravel-mix would automatically make use of the babelrc file):
{
"plugins": ["transform-class-properties"]
}
Still no success.
Any ideas?
Try adding this to your .babelrc file:
{
"presets": [
["es2016"],
"react"
],
"plugins": [
"babel-plugin-transform-class-properties"
]
}