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-project
cd my-project
yarn add @craco/craco
cat > 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 start
import 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/*"] } } }