J'ai un problème sur le chemin d'alias de set webpack en utilisant create- react -app et craco , je le google déjà mais je ne peux pas résoudre le problème.
J'ai un Module not found: Can't resolve '@app/App' in 'C:\ReactSandbox\my-project\src erreur Module not found: Can't resolve '@app/App' in 'C:\ReactSandbox\my-project\src chaque fois que Module not found: Can't resolve '@app/App' in 'C:\ReactSandbox\my-project\src application à l'aide de la commande yarn start
create-react-app my-projectcd my-projectyarn add @craco/cracocat > craco.config.js (voir configuration ci-dessous)craco react-scripts par craco dans la section 'script' de package.json (craco start, craco build, etc.)src/index.js (remplacer la ligne 4, voir le code ci-dessous)yarn startimport React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '@app/App'; //replace './App' into '@app/App'
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
const path = require("path");
module.exports = {
webpack: {
resolve: {
alias: {
"@app": path.resolve(__dirname, "src/"),
}
}
}
};
Module not found: Can't resolve '@app/App' in 'C:\ReactSandbox\my-project\src
J'évite d'appeler l'enfer relatif du chemin, au lieu d'un module d'importation comme ../../../../FilterComment.js , il serait propre d'écrire @app/FilterComment.js
4 Réponses :
Gardez simplement votre fichier craco.config.js comme ceci, et vous devez ajouter 1 fichier supplémentaire avec le nom jsconfig.json
c'est contenu:
{
"javascript.preferences.importModuleSpecifier": "non-relative"
}
@app/FilterComment.js Cela a également fonctionné pour VSCode (l'éditeur comprend maintenant où @app pointe). Mais si vous voulez que VSCode effectue l'importation automatiquement, vous devez ajouter plus de configuration pour qu'il force toujours l'importation à partir du chemin absolu.
.vscode/settings.json fichier .vscode/settings.json :
{
"compilerOptions": {
"module": "commonjs",
"target": "es2016",
"jsx": "preserve",
"checkJs": true,
"baseUrl": "./src/",
"paths": {
"@app/*": ["./*"]
}
},
"exclude": ["node_modules", "**/node_modules/*"]
}
react script ne vous permet pas de mettre des "chemins" dans tsconfig.json, il se supprime automatiquement pour vous
mon look craco.config.js aime ci-dessous, cela fonctionne:
const path = require('path');
module.exports = {
// ...
webpack: {
alias: {
'@': path.join(path.resolve(__dirname, './src')),
}
}
}
Aucune éjection n'est nécessaire avec craco. J'utilise le même craco.config.js alias craco.config.js mais sans path.join et cela fonctionne bien
Utilisez react-app-rewire-alias pour react-app-rewired ou personnaliser-cra . Installez et configurez comme ceci:
import App from '@app/App'
ou utilisez jsconfig.json avec configPaths()
La configuration de la typescript nécessite des étapes supplémentaires, consultez la documentation
Vous pouvez maintenant importer:
// config-overrides.js:
const {alias} = require('react-app-rewire-alias')
module.exports = function override(config) {
alias({
"@app": "src",
})(config)
return config
}
Nous avons besoin de 2 étapes pour ajouter des alias
créez un fichier séparé tsconfig.path.json et ajoutez des alias:
const {
override,
addWebpackAlias
} = require('customize-cra');
const path = require("path");
module.exports = override(
addWebpackAlias({
"@utils": path.resolve(__dirname, "./src/utils"),
}),
);
Ajouter créé tsconfig.path.json à principal tsconfig.json
{
"extends": "./tsconfig.paths.json",
... other staff ...
}
Ajouter des alias à config-overrides.js
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"]
}
}
}