menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

infrastructure

Infrastructure-Components let you configure your React App Infrastructure easily

Channels
Team

Module parse failed: Unexpected character '@'

March 31, 2020 at 7:57pm

Module parse failed: Unexpected character '@'

March 31, 2020 at 7:57pm
So I am not certain if I missed a configuration option. Though scss is not working utilizing this component in the base react create app with the inclusion of 'node-sass'. Any Ideas?
'./src/assets/main.scss 4:0\n' + "Module parse failed: Unexpected character '@' (4:0)\n" + 'You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\n' + '| \n' +

April 1, 2020 at 5:46am
Hello Benjamin, I need to have a look into this issue. I'll come back to you.

April 1, 2020 at 8:39pm
Thanks, I am just trying to publish my application with sass
I can seemingly get around this error by following these instructions:
However, it causes more issues
Edited

April 2, 2020 at 2:37pm
Hello Benjamin, I created a new version of infrastructure-scripts could you try it with version 0.3.10-alpha.7
just update your package.json to dependencies: "infrastructure-components": "^0.3.10-alpha.3",
devDependencies: "infrastructure-components": "^0.3.10-alpha.7",
Then run
npm prune
and run
npm i
I hope it works for you
Edited
Thank you that works! That solved that issue. Though just had another come up in its place
Edited
I have added my current issue below, if you have any ideas on how to fix it that would be great
(node:49844) UnhandledPromiseRejectionWarning: /Users/ben/Repos/project-igboost/app/node_modules/@yaireo/tagify/dist/react.tagify.js:1 import React from "react"; ^^^^^^
SyntaxError: Cannot use import statement outside a module at wrapSafe (internal/modules/cjs/loader.js:1060:16) at Module._compile (internal/modules/cjs/loader.js:1108:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1164
I Should note I am attempting to just run this locally first

April 3, 2020 at 4:25am
Running it locally should not be the problem. Can you tell me a few things please: which top-level component do you use? Isomorphic App? Where and how in your code do you import this library?

April 3, 2020 at 4:45pm
I have tried utilizing the IsomorphicApp and the SinglePageApp. Unfortunately same error. I am utilizing it in my app.tsx that is called from index.tsx
package.json "example": "scripts app src/index.tsx example",
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Firebase, { FirebaseContext } from './utils/Firebase';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<FirebaseContext.Provider value={new Firebase()}>
<App />
</FirebaseContext.Provider>,
document.getElementById('root'),
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
App.tsx
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { ROLES } from './utils/constants'
import routes from "./routes";
import withTracker from "./withTracker";
import { AuthProvider } from "./utils/Authentication";
import PrivateRoute from "./utils/PrivateRoute";
import {
Environment,
Route,
IsomorphicApp
} from "infrastructure-components";
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/main.scss";
export default () => (
<IsomorphicApp
stackName = "spa-example"
buildPath = 'build'
assetsPath = 'assets'
region='us-east-1'>
<Environment
name="dev"
domain="my.domain.com"
/>
<AuthProvider>
<Router basename={process.env.REACT_APP_BASENAME || ""} >
<div>
{routes.map((route, index) => {
if(route.protected){
return (
<PrivateRoute
key={index}
path={route.path}
exact={route.exact}
roles={route.roles}
component={withTracker(props => {
return (
<route.layout {...props}>
<route.component {...props} />
</route.layout>
);
})}
/>
);
}else{
return (
<Route
key={index}
path={route.path}
exact={route.exact}
component={withTracker(props => {
return (
<route.layout {...props}>
<route.component {...props} />
</route.layout>
);
})}
/>
);
}
})}
</div>
</Router>
</AuthProvider>
</IsomorphicApp>

April 4, 2020 at 5:10pm
Hello Benjamin, First one remark (likely unrelated to this issue):
the script in the package.json should refer directly to the file exporting the <IsomorhicApp/>. In your case, the App.tsx. Alternatively, you could put the code of your App.tsx into the index.tsx
To the issue: I don't see the import in the App.tsx. Is the import in a sub-component?
As of now, I don't see a reason why it doesn't work. There's nothing special about this component.
Edited
So it is complaining about node_modules. If I remove one, itll find another npm package to be upset about.
I am in the process of removing all the node_modules that are causing the issues
I will let you know if I come across a fix
I think I need to get a better understanding on how the infrastructure component works. As everything seems to work seemlessly using react-scripts start
is there a debug flag?
loading configuration for environment: node
starting webpack, {
entry: { config: './src/index.tsx' },
output: {
libraryTarget: 'commonjs2',
path: '/Users/ben/Repos/app/.infrastructure_temp',
filename: 'config.js'
},
target: 'node',
mode: 'development',
resolve: { extensions: [ '.js', '.jsx', '.ts', '.tsx', '.css' ] },
optimization: { minimize: false },
devtool: 'source-map',
performance: { hints: false },
externals: [ [Function (anonymous)] ],
module: {
rules: [ [Object], [Object], [Object], [Object], [Object], [Object] ]
}
}
finishing webpack... { config: './src/index.tsx' }
(node:18909) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:18909) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
`
Edited
Is your project on GitHub? Or can you send me the zipped sources. Then I'll have a closer look. Currently, there is not yet a debugging option. Can you try pointing the script to App.tsx?
its on gitlab does that work?
When pointing directly to app.tsx
NOT an infrastructure component --> TypeError: component.type is not a function
at Object.exports.loadInfrastructureComponent (/Users/ben/Repos/project-igboost/app/node_modules/infrastructure-components/dist/libs/loader.js:60:34)
at loadConfigurationFromModule (/Users/ben/Repos/project-igboost/app/node_modules/infrastructure-components/dist/libs/loader.js:19:20)
at Object.loadConfiguration (/Users/ben/Repos/project-igboost/app/node_modules/infrastructure-components/dist/libs/loader.js:14:12)
at Object.<anonymous> (/Users/ben/Repos/project-igboost/app/node_modules/infrastructure-scripts/dist/infra-comp-utils/configuration-lib.js:72:52)
at Generator.next (<anonymous>)
at fulfilled (/Users/ben/Repos/project-igboost/app/node_modules/infrastructure-scripts/dist/infra-comp-utils/configuration-lib.js:5:58)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
main component is not a valid app!
plugins: []

April 5, 2020 at 5:52am
After a bunch of troubleshooting. I believe I have it fixed. So the component does not like arrow functions export default () vs export default () => () Additionally, I need to reference src/app.tsx vs index.tsx
Edited
Solution/Findings:
  • Change syntax of default export (arrow functions not supported) <- might be bug?
  • Use App.tsx when react-create-app
Potential Bug I am utilizing an array of objects containing my routes, then I loop through the array with a map function seen below. Unfortunately, after testing multiple scenarios I believe this is not possible. The <WebApp> component only looks at direct children? Let me know if that makes sense.
routes.map((_path, index) => {
return (
<Route
path='/'
name='My Isomorphic App'
render={(props) => <div>I support server side rendering!</div>}
/>
)})
Edited
After reviewing the code on github I believe I am correct. That it only takes into account direct children.
All you said seems reasonable
  • "arrow functions not supported": there is a difference between "export default X" (X is the app-component, e.g. <IsomorphicApp/>) and "export default () => X ", (X is still the app) but to get it, we would need to call the function first.
  • use App.tsx in the script: the script needs to point to the file/module that does "export default (<IsomorphicApp/>)".
  • <WebApp/> only supports <Route/>s as direct children. This is right. I'll fix this with the next version (to support arrays and lambdas)
Thank you for your endurance.
Show more messages