I'm importing a custom module like this in a .tsx file:
import { LinkContainer } from './typings/LinkContainer';
Visual Studio builds without a problem but when I try to run webpack I get the following error:
ERROR in ./Features/Menu/Menu.tsx
Module not found: Error: Can't resolve './typings/LinkContainer' in 'C:\Users\<user>\Documents\<solution>\<project>\Features\Menu'
# ./Features/Menu/Menu.tsx 19:22-56
# ./Features/App.tsx
# ./Features/index.tsx
# multi react-hot-loader/patch ./Features/index.tsx
File content for LinkContainer.d.ts:
import { ComponentClass } from "react";
import { NavLinkProps } from "react-router-dom";
type LinkContainer = ComponentClass<NavLinkProps>;
export const LinkContainer: LinkContainer;
The problem was that only type definitions were loaded and not the module itself. Solved with import { LinkContainer } from 'react-router-bootstrap';. You can read my answer here about custom types which was the reason for creating a custom type in the first place: https://stackoverflow.com/a/44046969/3850405
Related
I'm having a build issue with the scss at-rule "extend" using Vite to build out a Vue3 component library using the bulma-scss NPM package.
Using Bluma buttons for example, I would like to import the bulma-scss button.scss file into my tag in my .vue file (or into the button.scss file and then import that into the script tag) like so:
<template/>
<script/>
...
<style lang="scss">
#import 'bulma-scss/elements/button';
</style>
When running $ vite build I get this error from Vite:
File: /Users/my-user/sites/component-library/node_modules/bulma-scss/elements/_button.scss
Error: The target selector was not found.
Use "#extend %control !optional" to avoid this error.
It is specifically this line in the bulma-scss package that it doesn't like (in this example) https://github.com/j1mc/bulma-scss/blob/master/elements/_button.scss#L71
it looks like I can get around this by adding the following preprocessor option to my storybook's vite configs:
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "bulma-scss";`
}
},
},
But that would include the entirety of bulma-scss right? Ideally I would only import the things I need from bulma.
And here is my entire vite config file (sans the css preprocessorOptions)
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import {resolve} from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: resolve(__dirname, 'src/index.js'),
name: 'lmsComponentLibrary',
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue',
},
},
},
},
resolve: {
alias: {
'bulma-scss/': require('path').join(__dirname, 'node_modules/bulma-scss/'),
}
},
});
I think the problem comes from the bulma-scss package itself. In the file that you are importing there is no %control placeholder. Even its import ../utilities/controls and ../utilities/mixins don't have that placeholder neither. So the error is expected here.
The %control is defined in bulma-scss/utilities/extends so you can fix the problem by importing that file. BUT, it will lead to another problem because in the _extends.scss there are some variables that are not defined. So you need to import all the file that contains these variables.
Luckily, the package has a file containing all the utility variables. So you just need to import it.
#import 'bulma-scss/utilities/all'; <-- Add this line
#import 'bulma-scss/elements/button';
I am building a laravel package and in this package I have a vue plugin that I want to import in my project that is using the laravel package.
This is how I try to import it:
let MyPlugin = require('./../vendor/laravel-package/src/Plugins/Vue');
Vue.use(MyPlugin, { someOption: true });
In this path: vendor/laravel-package/src/Plugins/Vue/Main.js I have my plugin:
MyPlugin.install = function (Vue, options) {
console.log(options);
};
I am just trying something very simpel:
Now in my console I get the error
cannot find module
I'm using storybook in a lerna/yarn workspaces monorepo. I noticed today that storybook is trying to load stories from packages/**/node_modules/#scope/foo/stories/foo.stories.js I've tried logging out the require.context keys in config.js but its not logged to console. Is there a ready way to tell storybook not to load symlinked local node_modules? Is it likely I've misconfigured storybook? Here's my config:
import '#storybook/addon-console';
import { withA11y } from '#storybook/addon-a11y';
import { addDecorator, addParameters, configure } from '#storybook/polymer';
import theme from './my-theme'
const req = require.context('../packages', true, /\.stories\.js$/);
const load = filename => req(filename);
addParameters({ options: {
panelPosition: 'right',
theme,
} })
addDecorator(withA11y)
configure(function loadStories() {
req.keys()
.filter(filename => !filename.match(/packages\/.*\/node_modules/))
.forEach(load);
}, module);
example error:
ERROR in ./packages/input/node_modules/#scope/collapse/stories/collapse.stories.js
Module not found: Error: Can't resolve '../../button/src/my-button' in '/Users/bennyp/Documents/web-components/packages/input/node_modules/#scope/collapse/stories'
This causes the storybook build to break.
How do I tell storybook not to load stories from internal node_modules?
The following regex solved the problem
const req = require.context('../packages', true,
/^((?![\\/]node_modules[\\/]).)*\.stories\.js$/
);
I'm trying to use the react material-ui theme having installed it from npm, I get the following errors when I include 'import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";' in boot-client.tsx:
TS7016: Could not find a declaration file for module
'material-ui/styles/MuiThemeProvider'.
'W:/web/WebFront/node_modules/material-ui/styles/MuiThemeProvider.js'
implicitly has an 'any' type. Try npm install
#types/material-ui/styles/MuiThemeProvider if it exists or add a new
declaration (.d.ts) file containing declare module
'material-ui/styles/MuiThemeProvider';
I've tried both suggestions to no avail including running the command: npm install -D #types/material-ui.
My #types folder in node_modules exists with the relevant types.
Here is the code where I'm trying to use it:
import './css/site.css';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './configureStore';
import { ApplicationState } from './store';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
const history = createBrowserHistory({ basename: baseUrl });
// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = (window as any).initialReduxState as ApplicationState;
const store = configureStore(history, initialState);
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
// and injects the app into a DOM element.
ReactDOM.render(
,
document.getElementById('react-app')
);
}
renderApp();
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}
Ok I figured it out, in tsconfig.json under 'compilerOptions' visual-studio by default had its types set to ["webpack-env"], I needed to add "material-ui" to it or optionally just remove it: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Use the default import from the same path.
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
The solution that worked for me which is med's answer above which I explain in more detail below.
Open the tsconfig.json file. Add "types":"material-ui", within "compilerOptions": {}
as in
"compilerOptions": {"types":"material-ui"}
I am using Ionic, and get the following error:
Runtime Error Uncaught (in promise): Error: Module build failed:
Error: ENOENT: no such file or directory, open
'/Users/richardmarais/Development/ionic/theWhoZoo/src/pages/model/ratingModel.js'
The error is a result of this line of code:
this.ratingModel = new RatingModel();
When I remove this line, I don't get the error.
ratingModel.ts
import { Injectable } from "#angular/core";
import { PersonModel } from './personModel';
import { JobModel } from './jobModel';
#Injectable()
export class RatingModel {
public id: number = null;
public job: JobModel = null;
public review: string = null;
public rating: number = null;
public reviewDate: number = null;
public time: string = null;
public person: PersonModel = null;
public anonymous: number = null;
constructor() {
}
}
Reading other forums, people are getting this error due to the case not matching in their imports, but I have checked mine, and they do match.
import { RatingModel } from '../model/ratingModel';
However, I have noticed something strange in my IDE (Visual Studio Code):
As you can see, in the search results, there are two files for the object, ratingModel.ts and RatingModel.ts. But when I check the actual files system, there is only on file, ratingModel.ts:
Question
Does anyone know what and how to resolve what looks like possibly a bug or fault here?
Thanks
More info:
global packages:
#ionic/cli-utils : 1.0.0
Cordova CLI : 6.4.0
Ionic CLI : 3.0.0
local packages:
#ionic/app-scripts : 1.3.0
#ionic/cli-plugin-cordova : 1.0.0
#ionic/cli-plugin-ionic-angular : 1.0.0
Ionic Framework : ionic-angular 3.2.1
System:
Node : v7.10.0
OS : macOS Sierra
Xcode : Xcode 8.3.2 Build version 8E2002
ios-deploy : not installed
ios-sim : not installed
Apologies, my bad. I just found another file that was importing the object with the incorrect case. It does appear as if there is no issue, and I had a bug in my code.
import { RatingModel } from '../model/RatingModel';
This error occurred when your component can't be found with your app.module settings.
Follow these steps to solve your problem:
Right click on your web browser and select inspect (in this case I use chrome)
In the source tab, navigate to localhost:8100 (the default port for running ionic)
Go to src -> pages and open corresponded page(in this case 'model')
The name of .ts file and path must be as same as the name and path of the added import path in app.module.ts
In this case, there isn't model/ratingModel.ts
be aware :
The path is case sensitive (maybe the .ts file is RatingModel)