I am currently working on building a set of UI modules that developers can use to create content on their sites (similar to Bootstrap, Foundation etc). Each UI module is created as its own npm package and a developer will then pull the required modules into their project via npm.
I have a components-accordion package which contains just the CSS for an accordion. It has a file structure as follows:
/lib
/build
/node_modules
index.css
package.json
The index.css file shown above consists of a relative link to the lib directory where the actual styles for the component live:
./lib/accordion.css
I have been testing this package with a React Accordion project and have imported it for the styles. However the relative paths in this package seem to not be correctly resolved by Webpack.
import "components-accordion";
gives an error:
Failed to compile.
./src/components/Accordion.js
Module not found: Can't resolve 'components-accordion' in ...
If I link to the index.css file directly:
import "components-accordion/index.css";
../components-accordion/index.css
Module not found: Can't resolve './lib/accordion' in...
Any ideas would be great.
Thanks
Update your webpack configuration to include the lib folder as part of webpack modules, using path
const path = require("path");
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, 'lib')
]
},
Related
I'm using the HarveyD template:
https://github.com/HarveyD/react-component-library
And I need to use some assets in my components. But, when I import the library into my react project, the following error appears:
./node_modules/components-teste/build/index.esm.js
Module not found: Can't resolve '../assets/add.svg' in '/home/gbelther/Projects/my-projects/app-teste/node_modules/components-teste/build'
Looking the "/build/index.esm.js", the imports into build folder are not correctly, because they are "../assets" (import on component library), and not "./assets" (build folder).
The structure folder is:
src
component1
component2
assets
rollup.config.js
Someone know if has any configuration to set to use assets or what I'm doing wrong?
A example project is:
https://github.com/gbelther/library-teste
I found it, Thanks
It should be externally added in rollup.config.js
external: [ 'react', '#elastic/datemath', '#elastic/eui' ]
We are creating different components in reactJS,
Example:
App.js
index.js
LandingPage.js
.....
While importing this component in another component, we are not adding the extension .js
Example:
index.js:
import App from './App'
// here './App' we are not adding .js
Does anyone know the reason why?
Your Webpack config is taking care of resolving the common extensions (ie: .js or .jsx). If your project is using create-react-app, then this is already done for you behind the scenes.
Create-react-app already resolves the following extensions automatically:
extensions: [".web.js", ".mjs", ".js", ".json", ".web.jsx", ".jsx"],
More info here
https://github.com/webpack/docs/wiki/Configuration#resolveextensions
It all done by webpack module resolution, a resolver is a library which helps in locating a module by its absolute path.
The dependency module can be from the application code or a third-party library. The resolver helps webpack find the module code that needs to be included in the bundle for every such require/import statement. webpack uses enhanced-resolve to resolve file paths while bundling modules.
Once the path is resolved based on the above rule, the resolver checks to see if the path points to a file or a directory. If the path points to a file:
If the path has a file extension, then the file is bundled straightaway.
Otherwise, the file extension is resolved using the resolve.extensions option, which tells the resolver which extensions are acceptable for resolution e.g. .js, .jsx.
Resolve extensions: These options change how modules are resolved. webpack provides reasonable defaults, but it is possible to change the resolving in detail.
In webpack.config.js
module.exports = {
//...
resolve: {
enforceExtension: false
}
};
If the value is true here, it will not allow extension-less files. So by default require('./foo') works if ./foo has a .js extension, but with this (enforceExtension) enabled only require('./foo.js') will work.
Add .js to resolve/extensions in webpack.config.js
resolve: {
extensions: [".ts", ".js", ".mjs", ".json"],
symlinks: false,
cacheWithContext: false,
},
I've created a React app using create-react-app in VisualStudio. I'm trying to avoid having to use a bunch of ../../ in order to import my different components. Supposedly I should be able to use either the jsconfig.json file or .env files to setup baseUrl or NODE_URL. However, I'm clearly doing something wrong because I can't access my files. My file structure looks something like this:
+ClientApp
package.json
+public
+src
+buttons
Button.js
+components
+sidebar
Sidebar.js
SidebarButton.js
gulpfile.js
package.json
Program.cs
Startup.cs
What I want to do is to import the button component inside Button.js in my SidebarButton.js file using something like src/buttons/Button.js or a similar path. However, I can't get the environment to start its lookup for files from the src directory. An absolute path will start the lookup from my C:\ directory and any relative lookup will start from the current directory of the js file doing the import
Absolute Imports
You can configure your application to support importing modules using absolute paths. This can be done by configuring a jsconfig.json or tsconfig.json file in the root of your project. If you're using TypeScript in your project, you will already have a tsconfig.json file.
Below is an example jsconfig.json file for a JavaScript project. You can create the file if it doesn't already exist:
{ "compilerOptions": {
"baseUrl": "src" }, "include": ["src"] }
If you're using TypeScript, you can configure the baseUrl setting inside the compilerOptions of your project's tsconfig.json file.
Now that you've configured your project to support absolute imports, if you want to import your module located at src/buttons/Button.js, you can import the module like so:
import Button from 'buttons/Button';
For more information on these configuration files, see the jsconfig.json reference and tsconfig.json reference documentation.
I followed by instructions included in Bootstrap documentation https://getbootstrap.com/docs/4.0/getting-started/download/#npm and installed Bootstrap via Webpack.
Then I wanted to import css styles as here https://getbootstrap.com/docs/4.0/getting-started/theming/ AND
I'VE ENCOUNTERED A PROBLEM:
When I adding this import (#import "node_modules/bootstrap/scss/bootstrap";) to my custom.scss file and order sass --watch custom.scss:custom.css in the console I'm getting this two errors:
1) Error: Cannot find module
"-!../../node_modules/css-loader/index.js?{"importLoaders":1}!../../node_modules/postcss-loader/lib/index.js??postcss!../../node_modules/bootstrap/scss"
2)./src/tu_sassy/custom.css Module not found: Can't resolve
'../../node_modules/bootstrap/scss' in
'/home/zebra/Desktop/testowa/src/tu_sassy'
My file structure is similar as in Bootstrap documentation, included as screenshot below.
!For more I need to add that when I delete this import from custom.scss everything works like a charm ...AND is still reusable and non-corrupted to original Bootstrap stylesheet 'my own stylesheet' WHY ?
One quick tip up front. If you want to write inline-code within your StackOverflow post, use backticks (`) around the code. That makes reading your post much easier.
Sass has its own functionality to import from node modules. Webpack Sass loader provides the ~ (tilde) prefix as a way to tell the compiler that it should resolve the path out of the node_modules folder.
#import "~bootstrap/scss/bootstrap";
If you have a dependency tree of packages within node_modues that import sass files, you can also tell Webpack Sass loader to include node_modules for resolving paths:
{
loader: "sass-loader", // compiles Sass to CSS
options: {
includePaths: [
join(dirname(module.filename), 'node_modules')
]
}
I have an angular 2 project that lives in a directory:
/c/users/batcave/first_project.
In that direcotory I have my app folder, index.html, systemjs.config.js ..etc, and node_modules folder but ONLY with #types and typescript. This means my #angular and other dependencies live in another directory: /c/users/dep/node_modules.
I have updated my systemjs.config.js file to look in this different directory on runtime but my question is for compilation. How do I tell tsc to not look in the node_modules folder it's currently in but to look in a specified external directory: /c/users/dep/node_modules?
I tried setting the baseUrl setting in tsconfig.json but no luck. Since tsconfig lives in /c/users/batcave/first_project, I tried to set the relative path for the external nodes_module to ../../dep/
I do not have setup like this. But what you need is probably include:
// tsconfig.json
{
"include": [
"/c/users/dep/node_moodules"
]
}