We Keep Coding

Unable to import an API module into a nested component (Vue)

I've been struggling with a very odd bug(?) with regards to importing an API module into a nested component in a Vue app.
This is the simplest I could reduce the issue down to.
https://codesandbox.io/s/rough-tree-fqj7o
Essentially, the DogsCreate component renders the CreateDogsModal, which is importing the dogs module from the API directory.
As you can see, the codesandbox errors out even on the base URL with the error Cannot read property 'default' of undefined. If running this code locally not on codesandbox, the base URL renders ok, but if you go to /dogs/create, the error then becomes Failed to resolve component: CreateDogsModal.
The things I've found that fix this are:
Commenting out the API import statement in CreateDogsModal (not an option for us, we need to be able to create and import API modules)
Commenting out the TopNav component in main.js (...also not an option for us)
Importing the TopNav component in App.vue with a relative import or #/components/TopNav.vue works fine, but strangely importing CreateDogsModal and CreateTemplate in DogsCreate.vue with a relative import or #/components/[component-name].vue does not. Also, the latter would be somewhat acceptable as a long-term solution, but I'd prefer the #/components shorthand and that still leaves the root cause undetermined.
I'm using the default vue-cli webpack configuration and have checked via vue inspect that the alias seems to be set properly.
I've been spinning my wheels for a week trying to figure this out and just...cannot. Does anyone have any ideas for what may be happening?

It seems like a race condition in Webpack, using parallel builds, but I'm honestly not sure. I can see CreateDogsModal being pulled in from two places, starting from main.js:
'main.js'
- import 'App.vue'
- import '#/components/index.js'
- import and export 'CreateDogsModal.vue'
- import 'router/index.js'
- import '#/views/Dogs/DogsCreate.vue'
- import '#/components/index.js'
- import and export 'CreateDogsModal.vue'
One workaround is to remove the race by making the CreateDogsModal an async component in DogsCreate:
// DogsCreate.vue
import { defineAsyncComponent } from "vue";
import { CreateTemplate } from "#/components";
export default {
name: "DogsCreate",
components: {
CreateTemplate,
CreateDogsModal: defineAsyncComponent(() => import("#/components/CreateDogsModal.vue")),
},
};
demo

Import yoastseo in NextJS

Hello I am trying to use yoastseo plugin in NextJS, but when i import it i`m getting some strange errors.
Bellow is my code
import { Researcher, Paper } from 'yoastseo';
const paper = new Paper('Text to analyze', {
keyword: 'analyze',
});
const researcher = new Researcher(paper);
below is what i get in the terminal.
import { AnalysisWebWorker, AnalysisWorkerWrapper, createWorker } from "./src/worker";
^^^^^^
SyntaxError: Cannot use import statement outside a module
And that's what I get in the browser window.
Server Error
SyntaxError: Cannot use import statement outside a module
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
external%20%22yoastseo%22 (1:0) # Object.yoastseo
> 1 | module.exports = require("yoastseo");
I used the plugin it with create-react-app without any issues. I guess its related to how NextJS is loading the web worker.

React, error importing file from root folder

The error (Uncaught Error: Cannot find module '.../action/cartActions') occurs at the cartDetails.js file.
I am attaching the file structure screenshot below,
Import statement = import cartAction from '.../action/cartActions';
The following action's are getting uploaded from cartActions export default {add,remove,increment,decrement,removeall}
As answers suggested,I tried removing one dot from import but hit with same error

You typed one dot too much, should be ../action/cartActions

React styled component causes build error in production, but runs fine in development

I am having a weird problem with my code, I have a styled component div that wraps around another component like this:
<ContentWidget>
<BookDay />
</ContentWidget>
(Bookday returns an empty div so this should not be a problem)
My styled component ContentWidget is an empty styled component div and is declared like this:
const ContentWidget = styled.div``;
The weird thing is I have more contentwidgets filled with content that load other components inside of my webapp. All imports are fine because it works in development perfectly fine. But whenever I run npm run build I get the following error message in my console.
ERROR in ./app/containers/Dashboard/Dashboard.js 41:18 Module parse
failed: Unexpected keyword 'var' (41:18) You may need an appropriate
loader to handle this file type. | import ForegroundBlob from
"basicComponents/ForegroundBlob/ForegroundBlob"; | import
ForegroundBlobWrapper from
"basicComponents/ForegroundBlob/ForegroundBlobWrapper";
import BookDay, { var _ref = | /#PURE/ | _jsx(ContentWidget, {}, void 0, _jsx(BookDay, {})); } from "components/BookDay/BookDay";
# ./app/containers/PracticePage/PracticePage.js 40:0-55 58:5-14 #
./app/containers/PracticePage/Loadable.js #
./app/containers/App/App.js # ./app/app.js # multi
./node_modules/react-app-polyfill/ie11.js ./app/app.js
I found out that whenever I just change the tags with a standard div tag, it seems to build like it should. I have never been as confused as I have been now.

Okay so I found out myself after a little bit of debugging.
It seems that the "#babel/plugin-transform-react-constant-elements", babel plugin messes with styled components.

I was getting this error:
Module parse failed: Unexpected keyword 'var' (13:23) You may need an
appropriate loader to handle this file type.
I am unclear on exactly why, but moving styled components I was using into the file where I was using them, rather than importing them from a different file, resolved the problem. It does in fact seem to be some sort of issue with how "#babel/plugin-transform-react-constant-elements" deals with styled-components; may have to do something with circular dependencies.

Need help for Unexpected character error with react-redux f7 v3 template

I am not sure if anybody tried redux with framework 7 react template before but I think this is a more general error. I successfully install and run framework 7 react template, then I wanted to try redux. I installed redux, react-redux and tried to integrate todoList example in redux website into same template. I get unexpected character error for some files and I do not know why this happens.
I tried to remove brackets when importing, or added ; end of import lines but didnt change anything.
I copy and paste code directly from redux website, maybe some hidden character problem, how can I test and get rid of that ?
./src/components/Footer.js
Syntax error: D:\client\src\components\Footer.js: Unexpected character ‘​’ (4:0)
import React from 'react'
import FilterLink from '../containers/FilterLink'
import { VisibilityFilters } from '../actions'
​
const Footer = () => (
./src/reducers/index.js
Syntax error: D:\client\src\reducers\index.js: Unexpected character ‘​’ (5:0)
import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
​export default combineReducers({

If you copy/paste directly from the redux examples it looks like there is a zero width space on the blank lines. In the top right hand corner of the examples there is a copy icon which will copy the actual source code, try that.