"Uncaught Error: Element type is invalid" if .scss file with same base name exists in importing file's folder

[dakinshin]

I believe it is a bug, but not sure if I'm reporting in right place, may be it is related to meteor itself.

Fourseven plugin breaks TSX import (and probably jsx too) if scss file with same base name exists in importing file's directory

Folder structure:

/client/
-main.tsx
/imports/
-ui/
--App.tsx
--App.scss

main.tsx:

import { App } from '../imports/ui/App'

console.log(App)

Meteor.startup(() => {
  render(<App />, document.getElementById('react-target'))
})

App.tsx:

import React from 'react'

export const App = () => (
  <div className="App">We are the champions !!!</div>
)

Expected behavior: App.tsx imported into main.tsx

Actual behavior: App is undefined in main.tsx, error thrown in console:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for 
composite components) but got: undefined. You likely forgot to export your component from the file it's defined 
in, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (modules.js?hash=4bd233f962055aadccb0f50497afa216771d6d60:28938)
    at createFiberFromElement (modules.js?hash=4bd233f962055aadccb0f50497afa216771d6d60:28966)
    at reconcileSingleElement (modules.js?hash=4bd233f962055aadccb0f50497afa216771d6d60:17932)
    at reconcileChildFibers (modules.js?hash=4bd233f962055aadccb0f50497afa216771d6d60:17992)
    at reconcileChildren (modules.js?hash=4bd233f962055aadccb0f50497afa216771d6d60:20877)
    at updateHostRoot (modules.js?hash=4bd233f962055aadccb0f50497afa216771d6d60:21479)
    at beginWork (modules.js?hash=4bd233f962055aadccb0f50497afa216771d6d60:22957)
    at HTMLUnknownElement.callCallback (modules.js?hash=4bd233f962055aadccb0f50497afa216771d6d60:7825)
    at Object.invokeGuardedCallbackDev (modules.js?hash=4bd233f962055aadccb0f50497afa216771d6d60:7874)
    at invokeGuardedCallback (modules.js?hash=4bd233f962055aadccb0f50497afa216771d6d60:7936)

But, if App.scss is renamed to styles.scss, or if fourseven package is removed, import is working as expected
I think it is at least unexpected behaviour or probably bug.

Meteor 1.12
fourseven:scss 4.12.0

[sebastian-ruiz]

This isn't really a bug. It doesn't know whether you want to import App.jsx or App.scss since both can be imported. With this package you are allowed to do (for example in your App.jsx):

import {App as Something} from './App.scss';

[mawrkus]

Hi! I'm facing the same issue. It's not really a bug but very inconvenient...
In my case, I'm in the process of removing Webpack from a project with ~1000 of files containing several import statements that don't specify the file extension. Actually, only the .scss extensions are specified when needed.
Is there a way to establish a priority order?
If so, IMHO it would make sense that the default case when no extension is present should be to try to load a .jsx file.
What do you think?