node.js - 为什么 React 中的类无法正确加载？

Question

在我的应用程序中，我使用 React on Rails 和 webpack 来构建它。

我正在使用 OSX 和 VSCode。当我尝试从我的文件导入 Redux Store 时，我收到一个奇怪的“未捕获错误:找不到模块“../../bundles/store”。

但在下一行，同一文件中，导入正确。

这是我的 client/app/components/wallbuilder/wallbuilder.jsx 导入:

import { store as STORE } from "../../bundles/store";
import { enclosure } from "../../bundles/store/action_creators.jsx";

这是我的 client/app/bundles/store.jsx 文件:

import {createStore, combineReducers} from 'redux';

// Note: this file is not very decomposed on purpose.
// Start splitting only if this is unwieldy to handle

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
// Enclosure
import * as ACTIONS from './store/actions.jsx';
const ENCLOSURE_INITIAL = {cladding: '', type: '', showFilters: true};

function enclosure(state = ENCLOSURE_INITIAL, action) {
  switch(action.type) {
  case ACTIONS.ENCLOSURE_SET_CLADDING:
    return Object.assign({}, state, {cladding: action.value})
  case ACTIONS.ENCLOSURE_SET_TYPE:
    return Object.assign({}, state, {type: action.value})
  case ACTIONS.ENCLOSURE_SHOW_FILTERS:
    return Object.assign({}, state, {showFilters: action.value})
  default:
    return state;
  }

}



export const store = createStore(combineReducers({counter, enclosure}));

尝试导入 {store as STORE } 的这一行被破坏了。

在我的文件夹/文件上。

那么，有哪些选项会导致商店无法正确加载到我的 wallbuilder 文件上？

Answer 1

我认为你在这里犯了一个小错误。 JSX 是 React jsx 语法的扩展，但你的代码只是 js 代码，所以你需要将文件扩展名更改为 js，如下所示

import { enclosure } from "../../bundles/store/action_creators.js";