I have set up a Vue application (version 3 with TypeScript) within a directory structure where the Vue app is nested inside a directory named /my-vue-app. In the same directory, there is a folder containing my Node.js server code (not TypeScript) that I am using for server-side rendering of the Vue app. Here is how my directory structure looks:
- /app-container
|
- /app-container/.babelrc.json
- /app-container/webpack.server.js
- /app-container/my-vue-app
|
- /app-container/my-vue-app/babel.config.js
- /app-container/my-vue-app/package.json
- /app-container/my-vue-app/tsconfig.json
- /app-container/my-vue-app/public
- /app-container/my-vue-app/src
|
- /app-container/my-vue-app/src/App.ts
- /app-container/my-vue-app/src/main.ts
- /app-container/my-vue-app/src/views
| -- some stuff
- /app-container/my-vue-app/src/components
| -- some stuff
- /app-container/my-vue-app/src/router
|
- /app-container/my-vue-app/src/router/index.ts
- /app-container/server
|
- /app-container/server/index.js
While trying to import
/app-container/my-vue-app/src/App.tsserver/index.js, everything works as expected. However, when attempting to import App.ts from main.ts, I encounter an unusual error stating that the module is 'not found'. I have tried different import syntaxes, but none have been successful except for using an absolute path:
// This does not
import App from "./App";
// Throws error complaining about .ts extension
import App from "App.ts";
// As per `vue create`, @ is configured to /src
import App from "@/App"
// Understandably, this is not found - but it was worth a try
import App from "/my-vue-app/src/App"
// This worked
import App from "C:\\absolute\\path\\to\\app-container\\my-vue-app\\src\\App";
It seems that Webpack is searching in the wrong directory when using "./App", leading to the error. The error only occurs when importing App.ts from the Node app, not during the yarn run serve in /my-vue-app. When using @/App, it attempts to search for it in /my-vue-app/node_modules and /node_modules in the project root.
For reference, here is my webpack.server.js configuration:
module.exports = {
entry: './server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: path.resolve('server-build'),
filename: 'index.js',
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.jsx', '.css', '.scss', '.sass', '.vue']
},
plugins: [new VueLoaderPlugin(), ...],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
'presets': [
'@babel/preset-env',
'@babel/preset-react',
],
'plugins': [
'@babel/plugin-transform-react-jsx',
'@babel/plugin-proposal-class-properties',
],
},
},
...
],
},
};
My project root contains a .babelrc.json, and /my-vue-app has a babel.config.js. Additionally, there are tsconfig.json files in both project root and /my-vue-app. The versions of these modules are installed in both /package.json and /my-vue-app/package.json. Despite trying various solutions, the only working options seem messy or compromise TypeScript type checking. How can I resolve this issue in my configuration files?