Notice: You are browsing the documentation for PrestaShop 9, which is currently in development.
You might want to read the documentation for the current version, PrestaShop 8. Read the current version of this page
Most of the time, you will use the global JavaScript components object. However, in some cases, you might want to import a Core component using a static path, such as admin-dev/themes/new-theme/js/components/auto-complete-search.ts.
We don’t recommend doing this. If you absolutely need it, make sure to remove the file extension from the import path:
// Incorrect
import AutoCompletSearch from '../../../../admin-dev/themes/new-theme/js/components/auto-complete-search.js'
import AutoCompletSearch from '../../../../admin-dev/themes/new-theme/js/components/auto-complete-search.ts'
// Correct
import AutoCompletSearch from '../../../../admin-dev/themes/new-theme/js/components/auto-complete-search'
If you need to carry out the above import, it is likely you will be using a bundler such as Webpack or Parcel. If the file you are trying to import is a TypeScript file, you need to add the TypeScript loader to your project and a tsconfig file.
Example of a TypeScript loader:
{
test: /\.ts?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
Example of a TypeScript configuration file:
{
"compilerOptions": {
"outDir": "./public/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"allowJs": true,
"baseUrl": "./",
"paths": {
"@app/*": ["js/app/*"],
"@js/*": ["js/*"],
"@pages/*": ["js/pages/*"],
"@components/*": ["js/components/*"],
"@scss/*": ["scss/*"],
"@node_modules/*": ["node_modules/*"],
"@vue/*": ["js/vue/*"],
"@PSTypes/*": ["js/types/*"]
},
"typeRoots": ["js/types", "node_modules/@types"]
},
"ts-node": {
"compilerOptions": {
"module": "commonjs"
}
}
}