Vue-Loader搭配Webpack无法导入JS文件的问题排查

Alright, let's walk through the most likely causes of your Uncaught ReferenceError: Other is not defined error, along with fixes for each:

1. 文件名与导入路径的大小写不匹配 #

This is a super common gotcha, especially if you're switching between Windows (case-insensitive file system) and Linux/macOS (case-sensitive). You mentioned your file is named Other.js, but your import statement uses ./other — notice the lowercase mismatch. Fix the path to match the exact filename:

import Other from './Other'

2. 导出方式与导入语句不匹配 #

Double-check how you're exporting the class in Other.js — your import needs to align with the export type:

如果是默认导出（推荐） #

Your Other.js should look like this:

export default class Other {
  static yourStaticMethod() {
    // Your code here
  }
}

This pairs correctly with your import (once you fix the filename case).

如果是命名导出 #

If you used a named export like this:

export class Other {
  static yourStaticMethod() {
    // Your code here
  }
}

You need to adjust your import to use curly braces:

import { Other } from './Other'

3. Webpack配置缺失JS文件处理 #

While your error is a reference issue (not a syntax error), it's still worth confirming your Webpack setup can process ES6+ syntax like classes. Here's what you need:

1. Install required Babel dependencies:

npm install @babel/core babel-loader @babel/preset-env --save-dev

2. Add a rule for .js files in your Webpack config:

module.exports = {
  // ... other config
  module: {
    rules: [
      // ... other rules (like for Vue files)
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
}

3. Create a .babelrc file in your project root to enable the preset:

{
  "presets": ["@babel/preset-env"]
}

This ensures modern JS syntax (like classes) gets transpiled to code that works across target environments.

4. 文件路径错误 #

Make sure Test.vue and Other.js are actually in the same directory. If Other.js is in a different folder, adjust the import path accordingly:

• If it's one level up: import Other from '../Other'
• If it's in a subfolder named utils: import Other from './utils/Other'

内容的提问来源于stack exchange，提问作者JGleason